W3.CSSLesson 14Free preview

W3.CSS Grid

This lesson is part of W3.CSS · All levels

Summary

CSS Grid is a two-dimensional layout system that organizes content in rows and columns at once. You define how many columns are through grid-template-columns, and then each child occupies the cell according to the given rules. Unlike a one-way flexbox, the grid gives full control over the area of the courtyard like a chessboard.

Key points

Container made with display: grid
Grid-template-columns specify the number and width of columns
The unit fr represents one part of the space available
Grid-gap or gaps regulate the distance between cells
Items can span several columns or rows

Full lesson

Code examples and quizzes

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