🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEcss

css Documentation

📖 INDEX

# Align-content
# Align-items
# Align-self
# Animation-delay
# Animation-duration
# Animation-timing-function
# Animation
# Background-color
# Background-image
# Background-position
# Background-repeat
# Background-size
# Basic-Selectors
# Borders
# Box-sizing
# Child-Selectors
# Class-Selectors
# Clear
# Clip-path
# Color
# Content
# CSS-Attribute-Selectors
# CSS-Comments
# CSS-Rules
# CSS-Syntax
# Cursor
# Descendant-Selectors
# Display-flex
# Display-grid
# Filter
# Flex-basis
# Flex-direction
# Flex-grow
# Flex-shrink
# Flex-wrap
# Float
# Font-family
# Font-size
# Font-style
# Font-weight
# Grid-column
# Grid-gap
# Grid-row
# Grid-template-areas
# Grid-template-columns
# Grid-template-rows
# ID-Selectors
# Include-Css-in-Html
# index
# Justify-content
# Justify-items
# Keyframes
# Letter-spacing
# Line-height
# Margin
# Media-queries
# Object-fit
# Opacity
# Order
# Orientation
# Overflow
# Padding
# Pointer-events
# Position
# Properties
# RefDeviceCharacteristics
# RefDimensions
# RefScreenDimensions
# Resize
# Resolution
# Selectors
# Siblings-Selectors
# Text-align
# Text-shadow
# Text-transform
# Top, Right, Bottom, Left
# Transition-delay
# Transition-duration
# Transition-timing-function
# Transition
# Universal-Selectors
# User-select
# Values
# Visibility
# Word-spacing
# Z-index
# Including-Css-in-Html
LOADING ENGINE...

CSS Grid Rows

Control vertical layout structure. Learn to define tracks using grid-template-rows.

style.css
.container {
display: grid;
grid-template-rows:
100px
1fr
repeat(2, 50px);
}
Row 1 (1fr)
Row 2 (2fr)
Row 3 (1fr)
grid.css
1 / 9
🏗️

Tutor:The grid-template-rows property defines the line names and track sizing functions of the grid rows. It determines the height of your tracks.


Grid Mastery Tree

Unlock nodes by learning layout and track sizing.

Concept 1: Fixed Height Rows

The most basic way to define rows is using explicit length units like pixels (px) or rem. This forces the row to stay at that specific height regardless of the container size or content.

System Check

Which property controls the height of grid tracks?

Community Holo-Net

Share Layouts

Built a complex grid structure? Share your row configurations and responsive tricks.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Grid Template Rows

Author

Pascual Vila

Frontend Instructor.

The grid-template-rows property is a fundamental part of CSS Grid Layout. It defines the line names and track sizing functions of the grid rows. Essentially, it controls the vertical size of your grid items.

Defining Track Sizes

You can define the height of your rows using various units:

  • Pixels (px): For fixed, absolute heights.
  • Percentages (%): Relative to the grid container's height.
  • Fraction (fr): Represents a fraction of the available space in the grid container.
  • Auto: Sizes the track based on the content.

The fr Unit

The fr unit is unique to CSS Grid. It allows you to distribute available space proportionally. For example, grid-template-rows: 1fr 2fr; will create two rows, where the second row is twice as tall as the first, taking up remaining space.

The repeat() Function

When you have multiple rows of the same size, typing them out manually can be tedious. The repeat() function simplifies this. repeat(3, 1fr) is equivalent to writing 1fr 1fr 1fr.

Grid Glossary

Grid Track
The space between two adjacent grid lines. A row is a horizontal track.
fr (Fractional Unit)
A unit of length that represents a fraction of the free space in the grid container.
repeat()
A CSS function used to repeat a pattern of track sizes, simplifying the definition of complex grids.
minmax()
Defines a size range greater than or equal to min and less than or equal to max.