How to use grid layouts in CSS

What to know about grid layouts in CSS

CSS Grid creates two-dimensional layouts with columns and rows. It is ideal for dashboards, product pages, and portfolios. This chapter explains the concept, demonstrates a practical example, and gives you a guided exercise.

How to use grid layouts in CSS

Write a rule with a clear selector and declarations, then inspect the cascade in browser developer tools. Prefer reusable classes, responsive units, and visible focus styles.

Example: grid layouts in CSS

Use this example as a starting point. Identify the part that controls the result, then adapt it to your own page or project.

.gallery { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 1rem; }

Common questions about grid layouts

When should I use grid layouts?

Use this technique when it expresses the structure, styling, or behavior your page needs. Keep the implementation focused and test it with the surrounding content.

What should I practice next?

Style a responsive card with readable type, consistent spacing, a clear focus state, and a layout that adapts to a narrow screen.