loading...
markdown guide
 

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.

 

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

Classic DEV Post from Nov 24 '19

I created the Web Almanac. Ask me anything about the state of the web!

AMA about the Web Almanac and the state of the web.

Deni Toshevski profile image

👋 Hey dev.to reader.

Do you prefer sans serif over serif?

You can change your font preferences in the "misc" section of your settings. ❤️