353 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?