From the course: CSS Essential Training

Unlock the full course today

Join today to access over 23,200 courses taught by industry experts.

Adding gutters with the gap property

Adding gutters with the gap property - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Adding gutters with the gap property

“

- [Instructor] In the CSS grid layout, gutters can be added between grid items using the gap property. One value adds the same amount of space between the rows and columns. Using two values sets different gutter values for the rows and columns. The first value will be applied to the rows, the second to the columns. Gap can be used with any length units, a percentage, or the calc function, which lets you perform calculations when specifying the values. Different types of values can be used within the calculations. While the FR unit can be used for sizing other grid properties, it can't be used with gap. The gap property is also shorthand for row gap and column gap. Originally, grid layout defined the gap property as grid gap and the longhand properties as grid row gap and grid column gap. This property was updated to be used for both Flexbox and grid layouts. We've covered many of the foundational grid concepts…

Contents