From the course: CSS Layouts: From Float to Flexbox and Grid
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Columns, rows, and gutters with Grid - CSS Tutorial
From the course: CSS Layouts: From Float to Flexbox and Grid
Columns, rows, and gutters with Grid
- [Voiceover] 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 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 prefix properties are supported in all modern browsers. To check for current browser support for specific…
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.