It offers various options like fixed lengths, percentages, fr units, and dynamic functions like minmax() and fit-content().
This guide explains how to use grid-template-rows effectively in your web design projects.
Examples
Let’s look at some practical examples to see how grid-template-rows
works.
Example 1: Using auto
and Length Values
Here, we create a grid with 4 columns and 2 rows, each cell containing a letter from A to H.
HTML:
CSS:
Example 2: Using min-content
and max-content
Values
Here, we create a grid with 4 columns and 2 rows. The first row adjusts automatically, and the second row is fixed at 150px.
HTML:
CSS:
Values and Descriptions
The grid-template-rows
property accepts various values to define the size and behavior of rows within a grid container. Here’s a breakdown:
none
- Description: No explicit grid; rows are generated implicitly.
[linename]
- Description: Names a line in the grid.
<length>
- Description: Sets the row size using a length value (e.g., px, em, rem).
<percentage>
- Description: Sets the row size as a percentage of the grid container’s block size.
<flex>
- Description: Uses the
fr
unit to set the flex factor of the row.
max-content
- Description: Sizes the row to fit the largest content of the grid items.
min-content
- Description: Sizes the row to fit the smallest content of the grid items.
minmax(min, max)
- Description: Defines a size range for the row.
auto
- Description: Sets the row size based on the content.
fit-content([ <length> | <percentage> ])
- Description: Clamps the row size at a specified value.
repeat([ <positive-integer> | auto-fill | auto-fit ], <track-list>)
- Description: Repeats a fragment of the track list.
masonry
- Description: Uses the masonry algorithm for layout.
subgrid
- Description: Adopts the parent grid’s row sizes.
Formal Definition and Syntax
The grid-template-rows
property allows you to define the structure and size of rows in a grid container.
Formal Definition
Initial Value | none |
---|---|
Applies to | Grid containers |
Inherited | No |
Percentages | Refer to the corresponding dimension of the content area |
Computed Value | As specified, but with relative lengths converted into absolute lengths |
Animation Type | Simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list |
Explanation of Syntax Components
- none: No explicit grid defined. Rows are created implicitly.
- <track-list>: List of track sizes and optional line names. Includes fixed, flexible, and dynamic sizes.
- <auto-track-list>: List allowing automatic row generation, useful for responsive designs.
- subgrid <line-name-list>?: Grid adopts the spanned portion of its parent grid. Optional line names.
- <line-names>: Custom identifier for naming grid lines, enclosed in square brackets.
- <track-size>: Defines track size using fixed lengths, percentages, flexible sizes (fr), or functions like
minmax()
orfit-content()
. - <track-repeat>: Repeats a fragment of the track list for patterns.
- <fixed-size>: Specifically for fixed sizes.
- <fixed-repeat>: Repeats a fragment of the fixed size list.
- <auto-repeat>: Repeats a fragment of the auto track list for responsive layouts.
- <name-repeat>: Repeats line names.
- <track-breadth>: Defines track breadth using lengths, percentages, flexible sizes (fr), or dynamic sizes.
- <inflexible-breadth>: Specifically for inflexible sizes.
- <length-percentage>: Length or percentage value for track size.
- <fixed-breadth>: Defines fixed breadth using lengths or percentages.
Specifying Grid Row Sizes
The grid-template-rows
property in CSS lets you define row sizes within a grid container, creating flexible and responsive layouts. Here’s how to specify row sizes using different values and functions.
HTML
CSS
This example creates a grid with two rows. The first row is 30px tall, and the second row takes up the remaining space using the fr
unit.
Specifying Grid Row Sizes with Different Values
You can define row sizes using fixed lengths, percentages, and dynamic functions like minmax()
. Here are some examples:
Fixed Lengths
Percentages
fr
Unit
minmax()
Function
fit-content()
Function
Combining Different Values
Combine fixed lengths, percentages, and the fr
unit for complex layouts:
Examples
Using repeat()
for Repeated Rows
This example creates three rows, each 100px tall, using the repeat()
function.
Example 1: Fixed Rows
HTML:
CSS:
This example creates a grid with three columns and three rows, each row being 100px high.
Example 2: Flexible Rows with minmax()
HTML:
CSS:
This example creates flexible rows with a minimum height of 50px and a maximum height that adapts to the content.
Example 3: Content-Based Rows with fit-content()
HTML:
CSS:
This example creates rows that adjust to the content size, with a maximum height of 100px.
Example 4: Nested Grids with subgrid
HTML:
CSS:
This example creates a nested grid where the child grid adopts the row sizes from the parent grid using subgrid
.
Browser Compatibility
The grid-template-rows
property is widely supported across modern browsers. This ensures your grid layouts work seamlessly across various platforms and devices.
Full Compatibility
- Google Chrome: Supported since version 57 (March 2017).
- Firefox: Supported since version 52 (March 2017).
- IE/Edge: Supported since version 16 (September 2017).
- Opera: Supported since version 44 (March 2017).
- Safari: Supported since version 10 (September 2016).
Browser Compatibility Table
Browser | Version | Release Date |
---|---|---|
Google Chrome | 57 | March 2017 |
Firefox | 52 | March 2017 |
IE/Edge | 16 | September 2017 |
Opera | 44 | March 2017 |
Safari | 10 | September 2016 |
Additional Resources
For more information on browser compatibility, refer to:
FAQs
What does the grid-template-rows
property do?
The grid-template-rows
property sets the height of each row in a grid container. It can use fixed heights, flexible heights (fr
), or dynamic sizes with functions like minmax()
.
How do I define rows using grid-template-rows
?
You can define row heights like this: grid-template-rows: 100px auto 1fr;
, which creates three rows: the first is 100px, the second takes up as much space as its content, and the third fills the remaining space.
Can grid-template-rows
be used with auto-fit
or auto-fill
?
While auto-fit
and auto-fill
are typically used with grid-template-columns
, you can still control row sizes responsively using functions like minmax()
with grid-template-rows
.
What’s the difference between grid-template-rows
and grid-auto-rows
?
grid-template-rows
defines the explicit row structure, while grid-auto-rows
controls the size of rows that are automatically added when content overflows the defined grid.
How does grid-template-rows
work with grid-template-areas
?
grid-template-rows
determines the row heights within the overall grid layout, while grid-template-areas
defines named areas. The row heights should align with the areas to ensure a consistent design.
Can I use grid-template-rows
with repeat()
?
Yes, you can use the repeat()
function with grid-template-rows
to create a repeated fragment of the row list, making it easier to define multiple rows with a recurring pattern. For example, grid-template-rows: repeat(3, 100px);
.
What is the subgrid
value in grid-template-rows
?
The subgrid
value indicates that the grid will adopt the spanned portion of its parent grid in that axis. Instead of being specified explicitly, the sizes of the grid rows/columns will be taken from the parent grid’s definition.
How do I use fit-content()
with grid-template-rows
?
The fit-content()
function represents the formula min(max-content, max(auto, argument))
, which is calculated similarly to auto
(i.e., minmax(auto, max-content)
), except that the track size is clamped at the specified argument if it is greater than the auto
minimum. For example, grid-template-rows: fit-content(200px);
.
What does the masonry
value do in grid-template-rows
?
The masonry
value indicates that this axis should be laid out according to the masonry algorithm, which arranges items in a way that minimizes gaps.
Can I combine grid-template-rows
with other CSS properties?
Yes, you can combine grid-template-rows
with other CSS properties to create more complex and dynamic layouts. For example, you can use grid-gap
to add space between rows, or align-items
to control the alignment of items within the grid.
By understanding these FAQs, you can effectively use the grid-template-rows
property to create flexible and responsive grid layouts in your web design projects. Whether you’re working with fixed heights, flexible sizes, or dynamic functions, this property offers the tools you need to create sophisticated grid layouts.
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.