Explain CSS Grid Like I'm Five

Comments

[Sam Beckham]

CSS Grid is exactly what it says in the tin. A grid, created with CSS. Previously CSS layout methods were all hacks (maybe with the exception of flexbox). CSS grid is a dedicated layout tool.

You can specify the grid itself, how many columns/rows it has, how wide they should be, what happens when content goes outside the defined grid. Then, you can tell your items where to go in the grid. You can place them in a specific cell, you can span rows, you can autofill, all sorts of things.

Or to truly explain it like you're five: It's a thing that lets you make boxes to put other things in.

[Meghan (she/her)]

CSS Grid is the table layout designers of the past's dreams always wanted but could never have. It allows you to take any element and define an arbitrary grid inside. The keyword here is arbitrary because you can have as many "rows" or "columns" as you want, the only elements affected by the CSS are the parent and it's direct children, and you can place elements anywhere on the grid you please.

If you'd like to dive right into the properties and how to get started CSS Tricks has a great tutorial and guide on their website.

---

CSS Tricks is awesome and you should totally check them out if you haven't heard of them before. Linkeroo