{"id":336967,"date":"2021-04-06T06:35:18","date_gmt":"2021-04-06T13:35:18","guid":{"rendered":"https:\/\/css-tricks.com\/?p=336967"},"modified":"2021-04-06T06:35:20","modified_gmt":"2021-04-06T13:35:20","slug":"gaps-gasp","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/gaps-gasp\/","title":{"rendered":"Gaps? Gasp!"},"content":{"rendered":"\n

At first, there were flexboxes<\/a> (the children of a display: flex<\/code> container). If you wanted them to be visually separate, you had to use content justification (i.e. justify-content: space-between<\/code>), margin<\/code> trickery, or sometimes, both. Then along came grids<\/a> (a display: grid<\/code> container), and grids could have not-margin not-trickeried minimum gaps between grid cells, thanks to grid-gap<\/code>. Flexboxes did not have gaps.<\/p>\n\n\n\n

Now they can, thanks to the growing support of gap<\/code>, the grid-gap<\/code> successor that isn\u2019t confined to grids. With gap<\/code>, you can gap your grids, your flexboxes, and even your multiple columns. It\u2019s gaptastic!<\/p>\n\n\n\n\n\n\n

Gap with Grid<\/h3>\n\n\n

Let\u2019s start where gap<\/code> is the most robust: CSS Grid. Here\u2019s a basic grid setup in HTML and CSS:<\/p>\n\n\n\n

<section>\n  <div>div<\/div>\n  <div>div<\/div>\n  <div>div<\/div>\n  <div>div<\/div>\n  <div>div<\/div>\n  <div>div<\/div>\n  <div>div<\/div>\n<\/section><\/code><\/pre>\n\n\n\n
section {\n  display: grid;\n  grid-template-rows: repeat(2,auto);\n  grid-template-columns: repeat(4,auto);\n  gap: 1em;\n}\nsection div {\n  width: 2em;\n}<\/code><\/pre>\n\n\n\n