GridLesson 310Free preview

3 Column Layout

This lesson is part of How To · All levels

Summary

The three-column layout divides content into three parallel sections, often used for listing features, services, or articles. The CSS Grid with repeat(3, 1fr) automatically makes all three columns equal in width. To stay comfortable on the phone, the number of columns is reduced via media query or by auto-fit patterns.

Key points

Repeat(3, 1fr) makes three columns of equal width
Use the gap for a consistent distance between the columns
Media queries can lower the number of columns on a small screen
Repeat(auto-fit, minmax(220px, 1fr)) makes the column automatically adjust
Avoid putting too much text in one narrow column

Full lesson

Code examples and quizzes

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