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?
Posted by Michael Leimstädtner to makandra Curriculum (2022-12-07 08:18)