From the course: Responsive Layout

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Grid gap

Grid gap - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

Grid gap

“

- [Instructor] You may want to add spaces or gutters between your columns and rows. You could use margin if you want. Let's go over here into the CSS and try a margin of 10 pixels. So I'm gonna apply this to the item class and do margin 10 pixels on line 15. Save and go over here and refresh. So it puts space between the grid items. The problem is that it puts space on every side of the grid items, so you have this extra space around the edge of the grid that you probably don't want. Instead we have a property called grid-gap. You apply it to the containing element and specify the space you want between rows and columns. So going back to the code, I'm going to take out this margin, and instead on the container element, I'm gonna add the property of grid dash gap colon 20 pixels. Save and go over here and refresh. So we still have the space between the items, but no space around the edge of the grid. From the dev tools, you can see some extra information. It has diagonal lines to show…

Contents