Hello everyone!
In our last post about Grid Layouts, we explored how to create a basic grid structure in CSS. Now, let’s take that one step further. Today, we're diving into Grid Sizing — how to size columns and rows inside your grid layout.
By the end of this post, you’ll know exactly when to use fixed units like px, flexible units like fr, and responsive functions like minmax(). We’ll even explore some cool developer tools and an interactive test. Ready? Let’s go!
What is Grid Sizing?
Grid Sizing refers to how we control the size of the rows and columns inside our CSS Grid layout. Depending on what kind of content you're building (e.g., dashboards, cards, galleries), you'll want your grid to behave differently.
In CSS Grid, we use properties like:
-
grid-template-rows -
grid-template-columns -
grid-auto-rows -
grid-auto-columns
Let’s break these down together.
1. Fixed Sizes with px and rem
You can define static sizes for rows and columns using pixels (px) or root-em units (rem).
grid-template-rows: 100px 200px;
grid-template-columns: 400px 800px;
This layout will look the same no matter how big or small your screen is. That’s because it's not responsive.
If you use rem:
grid-template-rows: 1rem 2rem;
...it still behaves like fixed sizing — except now it’s relative to the root font size.
Pros: Easy to use for consistent layouts
Cons: Not responsive to screen size
2. Combining Rows and Columns with grid-template
For shorthand lovers, there's the grid-template property:
grid-template: 100px 200px / 400px 800px;
This sets rows first, then a slash, and then the columns. While it saves space, it’s better to use grid-template-rows and grid-template-columns separately when you're still learning — it’s easier to debug!
Tip: You’ll likely see this shorthand in other people’s code.
3. Making Grids Flexible with auto
Let’s say you want your columns or rows to adjust automatically. That’s where auto comes in.
grid-template-columns: 200px auto;
This means:
-
First column = 200px
-
Second column = takes up the remaining space
For rows:
grid-template-rows: 100px auto;
This adjusts the second row to fit its content, not the screen size.
Image Illustration: Grid with 2 columns, where one is fixed and the other expands/shrinks with window size.
4. Using Fractional Units (fr)
Want to set ratios instead of exact sizes? Use fr!
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 2fr;
This creates columns/rows with a 1:2 ratio. The second column will always be twice as wide (or tall) as the first one.
Dynamic & responsive!
Image Illustration: Columns using 1fr and 2fr resizing as screen changes
You can go beyond simple ratios:
grid-template-columns: 3fr 5fr;
grid-template-rows: 1fr 2.5fr;
5. Controlling Responsiveness with minmax()
Sometimes, we want our grid items to stay within a size range. That’s when minmax() shines.
grid-template-columns: 400px minmax(200px, 800px);
This means:
-
First column = 400px
-
Second column = can shrink to 200px and grow to 800px
Image Illustration: Resizable second column with set min and max widths.
Great for responsive images, text blocks, or components that should stay within readable widths.
6. Repeating Grid Sizes with repeat()
Don’t want to repeat yourself?
grid-template-columns: repeat(2, 100px);
grid-template-rows: repeat(2, 200px);
Equivalent to:
grid-template-columns: 100px 100px;
grid-template-rows: 200px 200px;
Perfect for things like chessboards, galleries, or product grids.
7. Handling Extra Grid Items with grid-auto-*
What happens if you have more items than your grid template defines?
Example:
grid-template-columns: 100px 100px;
grid-template-rows: 200px 200px;
If you have 5 items, the extras will be auto-placed and auto-sized.
To control this, use:
grid-auto-rows: 300px;
grid-auto-columns: 300px;
This tells the browser to give extra rows and columns a specific size.
8. Practical Exercise: Building a Responsive Grid
You can try this in the Grid Sizing Exercise.
Instructions:
-
Set
display: grid -
Use
grid-template-rows: 1fr 1fr 2fr -
Use
grid-template-columns: auto 400px minmax(200px, 500px) -
Set
grid-auto-rows: 50px
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr 2fr;
grid-template-columns: auto 400px minmax(200px, 500px);
grid-auto-rows: 50px;
}
Image Illustration: Purple section mimics green layout with responsiveness
9. Debugging with Chrome DevTools
CSS Grid can be tricky. Use Chrome DevTools to inspect your layout!
-
Right-click > Inspect > Elements
-
Click the "grid" chip when selecting a grid container
-
Toggle options like: show line numbers, track sizing, and more
Image Illustration: DevTools panel showing grid overlays and settings
Final Tips
-
Always name your rows and columns clearly when starting out
-
Avoid too many nested grids
-
Use DevTools often!
Want to dive deeper? Check out:
-
Our previous guide
-
Next lesson on Grid Placement
You're Ready to Size Like a Pro!
We’ve gone from fixed grids to fully flexible and responsive layouts using fr, auto, minmax(), and more. Great work!
Next up, we’ll explore Grid Placement — how to position items exactly where you want in a grid layout.
Let’s keep building, everyone! See you in the next post!
Comments
Post a Comment