From the course: CSS Layouts: From Float to Flexbox and Grid

Unlock the full course today

Join today to access over 24,900 courses taught by industry experts.

Columns, rows, and gutters with Grid

Columns, rows, and gutters with Grid - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial Buy for my team

Columns, rows, and gutters with Grid

“

- [Instructor] In the last lesson, we were able to create a basic grid with just a few properties, gap, grid template columns, and grid template rows. Well, there's a little more to know about these properties. Gap is used for creating grid gutters, and is shorthand for row-gap and column-gap. One value sets the gutter for both rows and columns, and two values sets the gutter for the rows then the columns. Gap can be used with any length unit, calc function, or a percentage, but not an FR unit. And one last thing about gap. Originally, the grid layout defined the gap property as grid gap and the longhand properties as grid row gap and grid column gap. The property was updated to be used for both Flexbox and grid, but right now gap is only supported for Flexbox in Firefox. Gap for grid layouts and the previous grid prefixed properties are supported in all modern browsers. To check for current browser support for…

Contents