CSS Grid

By /

In this chapter, you will learn about CSS Grid, a powerful CSS layout system used to arrange elements in rows and columns. Flexbox is mainly useful for arranging items in one direction. CSS Grid gives you more control because you can work with rows and columns at the same time. Let’s understand CSS Grid concept it step by step.

What is CSS Grid?

CSS Grid is a layout system that helps you create layouts using rows and columns. To create a grid container, use:

.container {
  display: grid;
}

The direct child elements inside the container become grid items.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid</title>

  <style>
    .container {
      display: grid;
    }

    .box {
      background-color: lightblue;
      border: 2px solid blue;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>

</body>
</html>

Right now, the boxes appear one below another because we have not created any columns yet.

Understanding Grid Rows, Columns, and Lines

Before moving ahead, let’s understand three basic Grid terms:

  • Grid container – The parent element using display: grid.
  • Grid items – The direct child elements inside the grid container.
  • Grid lines – The lines that divide rows and columns.

For example:

grid-template-columns: 1fr 1fr 1fr;

This creates three columns. The columns are separated by grid lines. These lines can be used to control where a grid item starts and ends.

1. Creating Columns

The grid-template-columns property is used to create columns. For example:

.container {
  display: grid;
  grid-template-columns: 200px 200px;
}

This creates two columns, and each column is 200px wide.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Columns</title>

  <style>
    .container {
      display: grid;
      grid-template-columns: 200px 200px;
      gap: 10px;
    }

    .box {
      background-color: lightblue;
      border: 2px solid blue;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
  </div>

</body>
</html>

The boxes will appear in two columns.

2. Using the fr Unit

CSS Grid provides a useful unit called fr. fr means fraction of the available space.

For example:

grid-template-columns: 1fr 1fr;

This creates two equal columns.

You can create three equal columns like this:

grid-template-columns: 1fr 1fr 1fr;

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid FR Unit</title>

  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
    }

    .box {
      background-color: lightgreen;
      border: 2px solid green;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
  </div>

</body>
</html>

The available space will be divided equally between the three columns.

3. Different Column Sizes

You can give different amounts of space to columns.

For example:

grid-template-columns: 1fr 2fr;

This creates two columns. The second column gets twice as much space as the first column.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Different Grid Columns</title>

  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 10px;
    }

    .box {
      background-color: lightyellow;
      border: 2px solid orange;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Small Column</div>
    <div class="box">Large Column</div>
  </div>

</body>
</html>

4. Creating Rows

The grid-template-rows property is used to define the size of rows.

For example:

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

This creates:

  • A first row with a height of 100px
  • A second row with a height of 150px

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Rows</title>

  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 100px 150px;
      gap: 10px;
    }

    .box {
      background-color: lightblue;
      border: 2px solid blue;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
  </div>

</body>
</html>

5. Explicit and Implicit Grid

The rows and columns you create using:

grid-template-columns

or:

grid-template-rows

are called the explicit grid.

But what happens if there are more items than the rows you defined? CSS Grid automatically creates extra rows or columns when needed. This is called the implicit grid. You can control automatically created rows using:

grid-auto-rows

Example

<!DOCTYPE html>
<html>
<head>
  <title>Grid Auto Rows</title>

  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      gap: 10px;
    }

    .box {
      background-color: lightgreen;
      border: 2px solid green;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
  </div>

</body>
</html>

Any automatically created rows will have a height of 100px.

6. The gap Property

The gap property adds space between rows and columns. For example:

.container {
  display: grid;
  gap: 20px;
}

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Gap</title>

  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .box {
      background-color: lightblue;
      border: 2px solid blue;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
  </div>

</body>
</html>

You can also control row and column gaps separately.

row-gap: 20px;
column-gap: 10px;

7. The repeat() Function

The repeat() function makes repeated columns or rows easier to write.

Instead of writing:

grid-template-columns: 1fr 1fr 1fr;

You can write:

grid-template-columns: repeat(3, 1fr);

Both create three equal columns.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Repeat</title>

  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .box {
      background-color: lightgreen;
      border: 2px solid green;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
  </div>

</body>
</html>

8. Placing Items with Grid Lines

Grid items can be placed using grid lines. You can use:

grid-column-start
grid-column-end

For example:

.box {
  grid-column-start: 1;
  grid-column-end: 3;
}

This tells the item to start at column line 1 and end at column line 3.

You can also write this using the shorthand:

.box {
  grid-column: 1 / 3;
}

The / separates the starting and ending grid lines.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Grid Column Lines</title>

  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .box {
      background-color: lightblue;
      border: 2px solid blue;
      padding: 20px;
    }

    .large {
      grid-column: 1 / 3;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box large">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>

</body>
</html>

The first box takes space from grid line 1 to grid line 3.

9. Spanning Columns

A grid item can take up multiple columns using:

grid-column: span 2;

This makes the item take up two columns.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Grid Column Span</title>

  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .box {
      background-color: lightyellow;
      border: 2px solid orange;
      padding: 20px;
    }

    .large {
      grid-column: span 2;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box large">This Box Takes Two Columns</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
  </div>

</body>
</html>

10. Placing Items in Rows

You can control the row position of an item using:

grid-row

For example:

.box {
  grid-row: 1 / 3;
}

This makes the item start at row line 1 and end at row line 3.

You can also use:

grid-row: span 2;

This makes the item take up two rows.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Grid Row Span</title>

  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 100px 100px;
      gap: 10px;
    }

    .box {
      background-color: lightgreen;
      border: 2px solid green;
      padding: 20px;
    }

    .large {
      grid-row: span 2;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box large">Tall Box</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>

</body>
</html>

11. The minmax() Function

The minmax() function allows you to set a minimum and maximum size for a grid row or column. For example:

grid-template-columns: minmax(200px, 1fr) 1fr;

This means:

  • The first column should not become smaller than 200px.
  • It can grow up to 1fr of the available space.

This is useful for flexible layouts.

12. Responsive Grid with auto-fit

CSS Grid makes responsive layouts easier. For example:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Let’s understand this simply:

  • repeat() creates repeated columns.
  • auto-fit creates as many columns as possible.
  • minmax(200px, 1fr) keeps columns at least 200px wide.
  • The columns grow when more space is available.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Responsive CSS Grid</title>

  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }

    .box {
      background-color: lightblue;
      border: 2px solid blue;
      padding: 30px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
  </div>

</body>
</html>

Try changing the browser window size. The layout will automatically adjust based on the available space.

13. Aligning Grid Items

CSS Grid provides several properties for alignment. The most useful ones are:

  • justify-items
  • align-items
  • place-items

justify-items

This controls the horizontal alignment of items inside their grid cells.

.container {
  justify-items: center;
}

align-items

This controls vertical alignment inside grid cells.

.container {
  align-items: center;
}

place-items

You can combine both properties using:

.container {
  place-items: center;
}

Example

<!DOCTYPE html>
<html>
<head>
  <title>Grid Item Alignment</title>

  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      height: 300px;
      place-items: center;
      background-color: lightyellow;
    }

    .box {
      background-color: white;
      border: 2px solid orange;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
  </div>

</body>
</html>

The boxes will be centered inside their grid cells.

14. Aligning the Entire Grid

You can also control the position of the entire grid inside the container. The important properties are:

  • justify-content
  • align-content
  • place-content

justify-content

Controls the horizontal position of the entire grid.

justify-content: center;

align-content

Controls the vertical position of the entire grid.

align-content: center;

place-content

Combines both:

place-content: center;

These properties are useful when the grid is smaller than its container.

15. Grid Template Areas

grid-template-areas allows you to create layouts by giving names to different parts of the grid. For example:

.container {
  display: grid;

  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

Then you can assign each item to an area.

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Template Areas</title>

  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 3fr;
      grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
      gap: 10px;
    }

    .header {
      grid-area: header;
    }

    .sidebar {
      grid-area: sidebar;
    }

    .main {
      grid-area: main;
    }

    .footer {
      grid-area: footer;
    }

    .item {
      background-color: lightblue;
      border: 2px solid blue;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="container">

    <div class="item header">
      Header
    </div>

    <div class="item sidebar">
      Sidebar
    </div>

    <div class="item main">
      Main Content
    </div>

    <div class="item footer">
      Footer
    </div>

  </div>

</body>
</html>

This is useful for creating page layouts because you can clearly see the structure of the layout in your CSS.

16. A Simple Responsive Card Layout

Now let’s use some important Grid properties together.

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout</title>

  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }

    .card {
      background-color: lightblue;
      border: 2px solid blue;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="container">

    <div class="card">
      <h2>HTML</h2>
      <p>Learn the structure of web pages.</p>
    </div>

    <div class="card">
      <h2>CSS</h2>
      <p>Learn how to style web pages.</p>
    </div>

    <div class="card">
      <h2>JavaScript</h2>
      <p>Learn how to make web pages interactive.</p>
    </div>

    <div class="card">
      <h2>Python</h2>
      <p>Learn programming step by step.</p>
    </div>

  </div>

</body>
</html>

In this example:

  • display: grid creates a grid container.
  • repeat() creates repeated columns.
  • auto-fit adjusts the number of columns automatically.
  • minmax() prevents cards from becoming too small.
  • gap adds space between cards.

This is a practical example of how CSS Grid can be used in modern websites.

Quick Recap

  • CSS Grid is used to create layouts with rows and columns.
  • display: grid creates a grid container.
  • grid-template-columns creates columns and grid-template-rows creates rows.
  • gap adds space between grid items.
  • repeat() makes repeated rows or columns easier to write.
  • The explicit grid contains rows and columns you define.
  • The implicit grid is created automatically when needed.
  • span allows items to take multiple rows or columns.
  • auto-fit helps create responsive layouts.
  • grid-template-areas helps create structured layouts.

Frequently Asked Questions (FAQs)

Q1. What is CSS Grid?

CSS Grid is a CSS layout system used to create web page layouts with rows and columns. It helps developers arrange and position elements more easily.

Q2. How to create css grid layouts?

You can create a CSS Grid layout by adding display: grid to a container. The direct child elements inside that container become grid items.

Q3. What is the difference between CSS Grid and Flexbox?

CSS Grid is mainly used for two-dimensional layouts with rows and columns, while Flexbox is commonly used for arranging items in one direction, either a row or a column.

Q4. Is this CSS Grid tutorial suitable for beginners?

Yes, this CSS Grid Tutorial for Beginners is designed for learners who are new to CSS Grid. It explains important concepts such as rows, columns, grid items, gap, repeat(), minmax(), and responsive layouts with simple examples.

Q5. How do I create responsive layouts using CSS Grid?

You can create responsive CSS Grid layouts using properties such as repeat(), auto-fit, and minmax(). These allow grid columns to adjust automatically based on the available screen space.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top