Layout with Grid
Build a layout in rows and columns.
Describe the columns
display: grid creates a grid container. grid-template-columns: 1fr 1fr creates two equally flexible tracks. gap controls the gutters between tracks.
A flexible recipe
repeat(auto-fit, minmax(140px, 1fr)) makes as many columns as fit, each at least 140 pixels wide. The remaining space is shared between them. Ensure the minimum fits your smallest supported container.
Choose a layout tool
Flexbox is useful for distributing items along an axis. Grid is useful when you want explicit control over tracks. A page can use both.
Try the example
<style>
body { font-family: sans-serif; background: #f7f8f2; padding: 24px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.grid div { padding: 32px 20px; background: #d4ef78; border: 1px solid #526d14; }
</style>
<h1>A place for everything.</h1>
<div class="grid">
<div>01 / Ideas</div><div>02 / Notes</div>
<div>03 / Sketches</div><div>04 / Work</div>
</div>Enable JavaScript to edit and run the example in the playground.
Your turn
Change the columns to 1fr 2fr and observe how the space is divided.
Check your understanding
What does gap control?
- Space between grid tracks
- The text size
- The number of rows
Show answer and explanation
Space between grid tracks. gap sets gutters between rows and columns.