Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of CSS grid-auto-rows property
The CSS grid-auto-rows property sets the default height for grid rows that are created automatically (implicitly) when grid items don't fit in the explicitly defined rows. This property is essential for controlling the sizing of rows in CSS Grid layouts.
Syntax
selector {
grid-auto-rows: value;
}
Possible Values
| Value | Description |
|---|---|
length |
Fixed size in px, em, rem, etc. |
% |
Percentage of the grid container's height |
min-content |
Minimum size needed to fit content |
max-content |
Maximum size needed for content |
auto |
Size based on content (default) |
fr |
Fraction of available space |
Example: Fixed Row Height
The following example sets all auto-generated rows to 50px height −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-auto-rows: 50px;
gap: 10px;
background-color: #ff6b6b;
padding: 10px;
}
.container > div {
background-color: #ffd93d;
text-align: center;
padding: 10px 0;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
A red grid container with six yellow grid items arranged in rows, each row having a fixed height of 50px with 10px gaps between them.
Example: Using Fractional Units
This example uses fractional units to create flexible row heights −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-auto-rows: 1fr;
height: 300px;
gap: 10px;
background-color: #4ecdc4;
padding: 10px;
}
.container > div {
background-color: #45b7d1;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
</div>
</body>
</html>
A teal grid container with three blue grid items, each row taking up equal height (1fr) within the 300px container height.
Conclusion
The grid-auto-rows property provides flexible control over automatically created row heights in CSS Grid. Use fixed values for consistent sizing or fractional units for responsive layouts that adapt to available space.
Updated on: 2026-03-15T13:22:14+05:30
106 Views
Advertisements