Ahmad Shadeedshadeed9
Jul 20, 2024, 6:45 PM✍️ New Guide: CSS Grid Areas
I wrote a new ✨ interactive ✨ guide that explores CSS grid areas, line numbers, line names, and includes many interactive examples to experiment with. Happy learning!
Replies
Jul 20, 2024, 7:32 PM@shadeed9 this is neat! Is there an extra word (‘from’) in this sentence? Or some other words missing maybe. Or I’m reading it wrong.
“Write the line numbers needed to place the second item from in the last three columns”
- Ahmad Shadeedshadeed9Jul 21, 2024, 6:14 AM
@dmc thank you! fixed.
Fredericfrederic@chaos.socialJul 21, 2024, 5:22 AM@shadeed9 Wow, that's really impressive!
- Ahmad Shadeedshadeed9Jul 21, 2024, 6:14 AM
@frederic This is great to hear, thanks 😊
Vivianaviviana@hessen.socialJul 21, 2024, 9:37 AM@shadeed9 Your articles are always sooo good! Working with flexbox and grid since a while yet and just now discovered that I can make the line numbers visible in DevTools 😅 Thank you!
- Ahmad Shadeedshadeed9Jul 21, 2024, 4:38 PM
@viviana So glad to hear that, thank you :)
meduz'meduz@m.nintendojo.frJul 21, 2024, 10:56 AM@shadeed9 Supercool! I would add one small example with a negative value for `grid-row` or `grid-column`:
```css
.my-class {
grid-column: 2 / -1 ; /* spans from the start of column 2 until the end of the last column */
}
```- Ahmad Shadeedshadeed9Jul 21, 2024, 4:38 PM
@meduz Thanks! I will see if I can include that in the guide.