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

Unlock the full course today

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

Create a basic Grid layout

Create a basic Grid layout - CSS Tutorial

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

Start my 1-month free trial

Create a basic Grid layout

“

- [Instructor] To get started with Grid, the grid-container must first be defined. Similar to the flexbox layout, the grid-container is the parent element, and the direct child elements are the grid items. To define the grid-container, use the display property. Both the grid and inline-grid values will designate the child elements as grid items. With the grid value, the container will be displayed as a block-level element, and will stack on top of other grid-containers. With the inline-grid value, grid items will still display in a column, but unless otherwise defined, the grid-container and grid items will be the same width as their content. The grid-container will also display inline, and will line up with other inline-grid containers. To create columns and rows, use the grid template columns property and the grid template rows property defined in the grid container. The values can be declared with a percentage or…

Contents