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.

Resources

• Comprehensive Guides:
  • An Interactive Guide to CSS Grid Show archive.org snapshot
  • A Complete Guide to CSS Grid Show archive.org snapshot
  • The Grid chapter Show archive.org snapshot of web.dev's CSS course
• 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
  • Grid template areas Show archive.org snapshot
  • 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: Arrange cards with display: grid

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

Alternative Exercise: Compare Layouting strategies

If your BEM solution already made appropriate use of display: grid, you can opt to solve this exercise instead.
Position the gallery items of the card "CSS: Fluid and responsive layouts " once with each of the following different layouting algortihms Show archive.org snapshot :

• display:grid (the container)
• display:flex (the container)
• display:float (each item)
• display:absolute (each item)

Talk with your mentor about the pros and cons of each approach.