CSS Grids [2d]
If you've stumbled over display: grid
while reading the Flexbox material of the previous card - we've got you covered!
Let's dive into this topic with a
quote
Show archive.org snapshot
:
Flexbox is made for one-dimensional layouts and Grid is made for two-dimensional layouts.
You will learn more subtle differences in the linked material below, but you can remember this as a rule of thumb.
Ressources
- An Interactive Guide to CSS Grid Show archive.org snapshot
- A Complete Guide to CSS Grid Show archive.org snapshot
- The video "Display grid" in our library:
- It is based on this accompanying card.
- Don't miss out Arnes tips regarding the layouting online tool Show archive.org snapshot and Chrome devtool capabilities.
- MDN: Basic concepts of grid layout Show archive.org snapshot
- MDN: Grid template areas Show archive.org snapshot
- MDN: Realizing common layouts using grids Show archive.org snapshot
- Grid Garden Show archive.org snapshot (interactive game)
- Grid by Example Show archive.org snapshot
Exercise
- Go back to the
Practice: Cards
exercise of the BEM pattern card - Rework your previous solution. It should now use
display: grid
wherever possible and reasonable
Tip
Can you reduce the number of container elements in your DOM by switching from Flexbox to Grid?