CSS Visual ToolsLesson 73Free preview

Grid Generator

This lesson is part of Web Developer Tools · All levels

Summary

Grid generators help to arrange a two-dimensional layout with rows and columns that can be precisely adjusted. You can use the units fr, and you can name the area with grid-template-areas. CSS Grid is suitable for complex page layouts and galleries.

Key points

CSS Grid organizes items in rows and columns at once
Grid-template-columns and grid-template-rows determine the track size
The unit fr divides the available space proportionally
It facilitates responsive layout
Grid-template-areas give area names for easy-to-read placement

Full lesson

Code examples and quizzes

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