{"id":306989,"date":"2020-05-08T10:40:20","date_gmt":"2020-05-08T17:40:20","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=chapters&p=306989"},"modified":"2021-10-03T11:55:16","modified_gmt":"2021-10-03T18:55:16","slug":"flexible-grids","status":"publish","type":"chapters","link":"https:\/\/css-tricks.com\/books\/greatest-css-tricks\/flexible-grids\/","title":{"rendered":"Flexible Grids"},"content":{"rendered":"\n

CSS Grid<\/a> has a learning curve, like anything else, but after a minute there is a certain clarity to it. You set up a grid (literally columns and rows), and then place things on those rows. The mental model of it, I’d argue, is simpler than flexbox<\/a> by a smidge. <\/p>\n\n\n\n

Here I’ll set up a grid:<\/p>\n\n\n\n

.grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: 1rem;\n}<\/code><\/pre>\n\n\n\n
And now if I had three children to put onto that grid…<\/p>\n\n\n\n
<div class=\"grid\">\n   <div><\/div>\n   <div><\/div>\n   <div><\/div>\n<\/div><\/code><\/pre>\n\n\n\n
They would fall onto that grid perfectly. That’s wonderfully easy, and offers us a ton of control. That 1fr<\/code> unit can be adjusted as needed. If the first one was 2fr<\/code> instead, it would take up twice as much room as the other two. If it was 200px<\/code>, it would exactly that wide. The gap<\/code> can be widened and narrowed. There are all kinds of tools for alignment and explicit placement and ordering. <\/p>\n\n\n\n
\n