From the course: CSS: Advanced Layouts with Grid
Join today to access over 24,900 courses taught by industry experts.
Grid gap - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Grid gap
- [Speaker] Another feature of CSS grid I'd like to show you is the grid gap. As our grid currently stands, you can see that each item in our columns and rows, but right up against each other. Maybe you want that for your design or maybe you want some space in between these. Now, you could solve this by going into an individual element, say this masthead and adding some margin around it. So we'll say margin 1em, but all we've done here is create space around the individual cell. We're not dealing with how the grid is laid out. The better way would be to create actual space between each of these grid lines or gutters. And for that, we have the gap property. It's the same as the property available in Flexbox and works exactly the same way. So let's go to our grid container and we'll say gap is 1em. And now we have a 1em gap between each row and between each column. And you'll notice that when we have items spanning multiple rows or columns, we don't get any gap there. So that's nice…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.