GridLesson 311Free preview

4 Column Layout

This lesson is part of How To · All levels

Summary

The four-column layout is suitable for presenting a large number of services, features, or products in a concise manner. The CSS Grid with repeat(4, 1fr) divides the space into four equal widths, while the gaps keep the intercard distance. On the middle screen, the number of columns is reduced to two, then one column on the phone.

Key points

Use repeat(4, 1fr) for four columns of equal width
The cards in the column should have a consistent padding and height
Lower the number of columns on the breakpoint tablets and mobile phones
Avoid long text in a narrow column because it is hard to read
Use the gap to make the antithetical distance uniform.

Full lesson

Code examples and quizzes

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