CSS GridLesson 83Free preview

Grid Intro

This lesson is part of CSS · All levels

Summary

CSS Grid is a two-dimensional layout module capable of arranging rows and columns simultaneously. With `display: grid` on the container, we define the grid lines through `grid-template-columns` and `grid-template-rows`. Grids are ideal for page frames such as header, sidebar, and main content area.

Key points

Turn the container into a grid container
`grid-template-columns` defines the number and width of columns
The `fr` unit represents the remaining portion of the available space
`gap` sets the distance between grid cells (lines and columns)

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.