From the course: CSS: Advanced Layouts with Grid
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Grid gap - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Grid gap
- [Instructor] There is one more feature in CSS Grid I want to show you before we jump into advanced layouts and that is the grid-gap. If I turn off this overlay grid for a second, you'll see that right now, each of our grid rows and grid columns are jamming up against the next one and that's great for a lot of designs but sometimes you have layouts and designs where you require some space in between each of these items. Now of course you could solve this by going into an individual element and then adding in some margin around it by going like margin: 1em or something like that. But all you're doing then is creating space around the individual cell. You're not dealing with how the grid is laid out. A much cleaner way would be to create actual space between each of these grid lines or what we call gutters inside the grid and using CSS Grid specification, we can do just that. In CSS Grid terminology, the space between each column or each row, is called a grid-gap and you set it up be…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
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.