From the course: CSS Essential Training

Unlock the full course today

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

Intro to CSS Grid

Intro to CSS Grid - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Intro to CSS Grid

“

- [Instructor] Before there was CSS Grid, grid-based layouts were a common part of web design. Grids are divided into evenly spaced columns with gutters to add consistent spacing between them. The grid then serves as a guide for laying out page components by arranging them within the columns. CSS Grid is a layout method that makes it possible to create grid-based designs that previously required hacks and other workarounds. Let's go over some grid terminology. Similar to the Flexbox layout, the grid container is the parent element. The direct child elements are the grid items. To begin using a grid layout, start by defining the grid container with the display property with either the grid or inline-grid value. Both will designate the child elements as grid items which will display in a single column. When using the value of grid, the width of the items by default will span the width of its container. When using the…

Contents