Bird
Raised Fist0
CSSmarkup~5 mins

Grid rows and columns in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Grid rows and columns help you organize content neatly on a page. They let you create layouts like a table but with more control and flexibility.

When you want to arrange items in neat rows and columns, like a photo gallery.
When you need a responsive layout that adjusts to different screen sizes.
When you want to align content both horizontally and vertically easily.
When you want to create complex page layouts without using floats or positioning.
When you want to control the size of rows and columns precisely.
Syntax
CSS
.container {
  display: grid;
  grid-template-columns: <track-size> <track-size> ...;
  grid-template-rows: <track-size> <track-size> ...;
}

grid-template-columns sets the width of each column.

grid-template-rows sets the height of each row.

Examples
This creates 3 columns with widths 100px, 200px, and 100px, and 2 rows with heights 50px and 100px.
CSS
.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 50px 100px;
}
This creates 3 equal columns that share available space and 2 rows each 150px tall.
CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 150px 150px;
}
This creates 2 columns where the second is twice as wide as the first, and rows adjust height automatically based on content.
CSS
.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto;
}
Sample Program

This example creates a grid with 3 columns and 2 rows. The middle column is twice as wide as the others. Each grid item is centered with a background color and number.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Grid Rows and Columns Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-rows: 100px 150px;
      gap: 10px;
      border: 2px solid #333;
      padding: 10px;
    }
    .grid-item {
      background-color: #8ac6d1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: #fff;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <main>
    <section class="grid-container" aria-label="Example grid with rows and columns">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use gap to add space between rows and columns easily.

Use fr units to divide space proportionally.

Rows and columns can have fixed sizes (like px), flexible sizes (like fr), or automatic sizes (auto).

Summary

Grid rows and columns define the structure of your layout.

You can mix fixed and flexible sizes for precise control.

Grid makes it easy to create neat, responsive designs.

Practice

(1/5)
1. What does the CSS property grid-template-columns control in a grid layout?
easy
A. The number and width of columns in the grid
B. The number and height of rows in the grid
C. The gap between grid items
D. The background color of the grid container

Solution

  1. Step 1: Understand the property name

    The property name grid-template-columns suggests it controls columns.

  2. Step 2: Recall grid layout basics

    This property sets how many columns there are and their widths.

  3. Final Answer:

    The number and width of columns in the grid -> Option A

  4. Quick Check:

    grid-template-columns = columns control [OK]
Hint: Columns = grid-template-columns, rows = grid-template-rows [OK]
Common Mistakes:
  • Confusing columns with rows
  • Thinking it controls gaps
  • Mixing it with background styles
2. Which of the following is the correct syntax to create a grid with 3 columns each 100px wide?
easy
A. grid-template-columns: repeat(3, 100px);
B. grid-template-columns: 3x 100px;
C. grid-template-columns: 100px, 100px, 100px;
D. grid-template-columns: 100px * 3;

Solution

  1. Step 1: Identify valid CSS syntax for repeating columns

    The repeat() function is the correct way to repeat values in grid-template-columns.

  2. Step 2: Check each option

    grid-template-columns: 100px, 100px, 100px; uses commas (invalid); B: '3x 100px' invalid; C: repeat(3, 100px) correct; D: '* 3' invalid CSS syntax.

  3. Final Answer:

    grid-template-columns: repeat(3, 100px); -> Option A

  4. Quick Check:

    Use repeat() for repeating columns [OK]
Hint: Use repeat() to simplify repeated column sizes [OK]
Common Mistakes:
  • Writing invalid CSS like '3x 100px'
  • Using commas between column sizes
  • Using multiplication syntax not supported in CSS
3. Given the CSS below, how many rows and columns will the grid have?
display: grid;
grid-template-columns: 150px 1fr 2fr;
grid-template-rows: 100px auto;
medium
A. 2 columns and 2 rows
B. 2 columns and 3 rows
C. 3 columns and 3 rows
D. 3 columns and 2 rows

Solution

  1. Step 1: Count columns from grid-template-columns

    There are three values: 150px, 1fr, 2fr, so 3 columns.

  2. Step 2: Count rows from grid-template-rows

    There are two values: 100px and auto, so 2 rows.

  3. Final Answer:

    3 columns and 2 rows -> Option D

  4. Quick Check:

    Count values in columns and rows properties [OK]
Hint: Count values in grid-template-columns and grid-template-rows [OK]
Common Mistakes:
  • Mixing up rows and columns count
  • Assuming 'auto' adds extra rows
  • Ignoring fractional units
4. Identify the error in this CSS grid code:
display: grid;
grid-template-columns: 100px, 200px, 100px;
grid-template-rows: 50px 50px;
medium
A. grid-template-rows must have commas between values
B. Commas should not be used between column sizes
C. display: grid; should be display: grid-container;
D. Column sizes must all be the same unit

Solution

  1. Step 1: Check syntax for grid-template-columns

    Values should be space-separated, not comma-separated.

  2. Step 2: Verify other options

    grid-template-rows is correct without commas; display: grid is valid; units can differ.

  3. Final Answer:

    Commas should not be used between column sizes -> Option B

  4. Quick Check:

    Grid values are space-separated, not comma-separated [OK]
Hint: Use spaces, not commas, between grid sizes [OK]
Common Mistakes:
  • Using commas between grid sizes
  • Changing display property incorrectly
  • Thinking units must match
5. You want a grid with 4 equal columns and 3 rows where the first row is 100px tall and the others share remaining space equally. Which CSS is correct?
hard
A. grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 1fr 1fr 1fr;
B. grid-template-columns: 4fr; grid-template-rows: 100px auto auto;
C. grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px 1fr 1fr;
D. grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px;

Solution

  1. Step 1: Set 4 equal columns

    Using repeat(4, 1fr) creates 4 columns each taking equal space.

  2. Step 2: Define 3 rows with first fixed and others flexible

    grid-template-rows: 100px 1fr 1fr; sets first row fixed 100px, next two share remaining space equally.

  3. Final Answer:

    grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px 1fr 1fr; -> Option C

  4. Quick Check:

    repeat() for columns, fixed + fractional rows [OK]
Hint: Use repeat() for equal columns and 1fr for flexible rows [OK]
Common Mistakes:
  • Wrong number of columns or rows
  • Using auto instead of 1fr for equal space
  • Setting all rows fixed height