Grid Sizing

on

 CSS Grid Sizing

When working with CSS Grid, one of the most important things to learn is how to size your rows and columns. Let’s go through the different ways you can do this step by step.

🔹 1. Fixed Size (px / rem)

You can define row and column sizes using fixed units like px or rem.

grid-template-rows: 100px 200px;
grid-template-columns: 400px 800px;

  • First row → 100px high

  • Second row → 200px high

  • First column → 400px wide

  • Second column → 800px wide

👉 The problem with fixed sizes is that they are not responsive. No matter how small or large the screen is, they won’t adjust.

🔹 2. Auto

The auto keyword makes the grid adapt automatically.

  • For columns → auto takes up all the remaining available width.

  • For rows → auto fits the height to the content.

👉 Column auto = responsive width
👉 Row auto = height depends on the content

🔹 3. Fractional Unit (fr)

The fr unit defines flexible ratios.

grid-template-rows: 1fr 2fr;
grid-template-columns: 1fr 2fr;

  • Second row will always be twice as tall as the first one.

  • Second column will always be twice as wide as the first one.

👉 This is one of the best ways to build responsive layouts.

🔹 4. Minmax()

The minmax(min, max) function allows you to set minimum and maximum limits for grid tracks.

grid-template-columns: 200px minmax(400px, 800px);

  • The second column will never be smaller than 400px

  • It will never grow larger than 800px

👉 Perfect when you want responsiveness but within limits.

🔹 5. Repeat()

Instead of writing the same values multiple times, you can use repeat().

grid-template-columns: repeat(3, 100px);

This is the same as writing:

grid-template-columns: 100px 100px 100px;

👉 Saves time and keeps your code clean.

🔹 6. Grid-auto-rows / Grid-auto-columns

If you define fewer rows/columns than you have items, CSS Grid automatically creates new ones.

By default, these rows/columns adjust based on content. But you can control them:

grid-auto-rows: 300px;

👉 Any new row that goes beyond your template will now be 300px high.

🔹 7. Debugging with Chrome DevTools

When you set display: grid on a container, Chrome DevTools shows a grid overlay.
From there, you can:

  • See row & column sizes

  • Display line numbers

  • Extend grid lines

  • Change overlay colors

👉 Super useful for debugging grid layouts.

✅ Summary

  • Fixed size → Not responsive

  • Auto → Columns fill space, rows fit content

  • fr → Ratio-based responsive sizing

  • minmax() → Responsive within limits

  • repeat() → Cleaner code, avoids repetition

  • grid-auto → Controls extra rows/columns

Comments

Post a Comment