HTML & CSS LayoutLesson 23Free preview

CSS Grid

This lesson is part of Intro to HTML & CSS · All levels

Summary

CSS Grid is a two-dimensional layout model that arranges rows and columns simultaneously. You'll study grid-template-columns, units of fr, gaps, and placement of items into a particular area. Grids are ideal for page layouts such as header, sidebar, content, and footer in a single declaration.

Key points

The grid sets the layout of the rows and columns at once
Grid-template-columns specify the width of the column; fr divides the space flexibly
The gap sets the distance between the cells without the need for a margin

Full lesson

Code examples and quizzes

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