COURSE SYLLABUS

1. Introduction to CSS

Introduction to CSS How CSS Works CSS vs HTML Adding CSS

2. CSS Basics

CSS Basics CSS Syntax Inline CSS Internal CSS External CSS CSS Comments

3. CSS Selectors

CSS Selectors Element Selector Class Selector ID Selector Attribute Selector Descendant Selector Child Selector Pseudo-Class Selector Pseudo-Element Selector

4. Colors & Backgrounds

Colors & Backgrounds Color Values Background Color Background Image Background Repeat Background Attachment Multiple Backgrounds

5. Text & Fonts

Text & Fonts Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow Font Family Font Size Font Style Font Weight Web Fonts

6. CSS Box Model

CSS Box Model Width & Height Padding Margin Border Border Radius Box Sizing Box Shadow Overflow

7. Flexbox

Flexbox Flex Container Flex Direction Flex Wrap Justify Content Align Items Align Content Gap Flex Items Order Flex Grow Flex Shrink Flex Basis

8. CSS Grid

CSS Grid Grid Container Grid Rows & Columns Grid Template Columns Grid Template Rows Grid Gap Grid Column Grid Row Grid Area Grid Alignment Responsive Grid

9. Responsive Design

Responsive Design Responsive Web Design Viewport Media Queries Breakpoints Mobile First Responsive Images Responsive Typography

10. Advanced CSS

Advanced CSS CSS Pseudo-Classes CSS Pseudo-Elements CSS Transforms CSS Transitions CSS Animations CSS Variables CSS Functions CSS Specificity CSS Best Practices

CSS Grid Template Rows

The grid-template-rows property defines the number and size of rows inside a CSS Grid Container.

It controls how the available vertical space is divided between Grid rows.

What is grid-template-rows?

The grid-template-rows property is used to define the row structure of a CSS Grid.

You can define rows using values such as px, %, fr, auto, and repeat().

Basic Syntax

.container {
    display: grid;
    grid-template-rows: 100px 150px 100px;
}

The Grid Container contains three rows.

The first row has a height of 100px.

The second row has a height of 150px.

The third row has a height of 100px.

Understanding Grid Rows

A Grid Row is a horizontal track inside a Grid Container.

The grid-template-rows property controls the height of these rows.

Multiple row values create multiple Grid rows.

Grid Rows Diagram

Row 1
80px

Row 2
150px

Row 3
100px

Three Grid rows with different heights.

Creating Fixed-Height Rows

.container {
    display: grid;
    grid-template-rows: 100px 100px;
}

This creates two Grid rows.

Each row has a fixed height of 100px.

Different Row Sizes

Grid rows do not have to have the same height. Different values can be used for different rows.

.container {
    display: grid;
    grid-template-rows: 80px 150px 100px;
}

The first row has a height of 80px.

The second row has a height of 150px.

The third row has a height of 100px.

Using the fr Unit

.container {
    display: grid;
    grid-template-rows: 1fr 2fr 1fr;
}

The fr unit represents a fraction of the available space.

The available vertical space is divided into 4 fractions.

The first row receives 1 fraction, the second receives 2 fractions, and the third receives 1 fraction.

The resulting proportion is 1 : 2 : 1.

Using Percentage Values

.container {
    display: grid;
    grid-template-rows: 25% 50% 25%;
}

Percentage values define row heights relative to the available height of the Grid Container.

The rows use 25%, 50%, and 25%.

Using auto

.container {
    display: grid;
    grid-template-rows: 100px auto 100px;
}

The first and third rows have a fixed height of 100px.

The middle row uses the remaining available vertical space.

Using repeat()

The repeat() function can be used when multiple rows have the same height.

.container {
    display: grid;
    grid-template-rows: repeat(3, 100px);
}

This creates three rows.

Each row has a height of 100px.

Combining Rows and Columns

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px 150px;
}

The Grid contains three columns and two rows.

The columns use a 1 : 2 : 1 proportion.

The first row has a height of 100px, while the second row has a height of 150px.

Output

Row 1
80px

Row 2
150px

Row 3
100px

Important Properties

grid-template-rows

Defines the number and size of Grid rows.

fr

Represents a fraction of the available Grid space.

repeat()

Repeats a row size multiple times.

auto

Allows a row to use available remaining space.

Common Values

Value	Purpose
100px 100px	Creates two fixed-height rows.
1fr 1fr	Creates two equal flexible rows.
1fr 2fr	Creates two rows with a 1 : 2 proportion.
25% 50% 25%	Creates rows using percentages.
100px auto 100px	Creates fixed rows with a flexible middle row.
repeat(3, 100px)	Creates three equal rows.

Real-World Uses

Dashboard layouts
Website headers and footers
Course content layouts
Admin panels
Card layouts
Web application interfaces

Important: The grid-template-rows property controls the row structure of a CSS Grid. Use it to define the height and proportion of Grid rows.

Summary

The grid-template-rows property controls the number and size of rows in a CSS Grid layout. Values such as px, fr, %, auto, and repeat() can be used to create flexible and structured Grid layouts.

← Previous: Grid Template Columns

Next: Grid Gap →