CSS Grid Layout

Last Updated : 26 Aug 2026

What is CSS Grid?

CSS grid is a two-dimensional layout that helps web designers build complex and flexible web pages. As we know now, CSS offers a two-dimensional grid layout model which allows us exact control over the placement and the size of elements within the rows and columns.

Due to CSS Grid's new properties and values, web designers can now create dynamic, responsive, and grid-based layouts without relying heavily on positioning workarounds or floats. It makes the process of organizing the content on a web page easier, more logical, and more effective.

What is CSS Grid Layout?

In CSS, we have a two-dimensional layout system that is called CSS grid layout, also known as CSS grid, or with the help of CSS grid, web designers can build flexible and adaptable grid-based layouts for web pages. With precise control over the positioning and sizing of elements within the grid, it offers a flexible way to arrange content in rows and columns.

The grid container and grid items make up the CSS Grid Layout model:

Grid Container: The element that houses the grid layout is called the "grid container." Usually, it is a parent element that has several child elements, which turn into grid items. We create a new grid formatting context for the children of an element by setting it to be a grid container.
Grid Items: The term "grid items" refers to the grid container's child elements. These are the components that the grid layout has positioned and aligned. Multiple rows and columns of grid items are possible, allowing for adaptable and dynamic arrangements.

Comparing CSS Grid to more conventional layout techniques that heavily rely on floats, positioning, or intricate CSS frameworks, CSS Grid introduces new properties and values that make it easier and more efficient for web designers to create grid-based layouts.

Grid Template Columns and Rows

The grid-template-columns and grid-template-rows properties define the number and size of columns and rows in a CSS Grid. They can use values such as px, %, fr, and auto to control the grid structure.

Example

The following example shows how to create a grid with three columns and two rows of different sizes.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
    display: grid;
    grid-template-columns: 100px 150px 200px;
    grid-template-rows: 80px 100px;
    gap: 10px;
}

.grid-item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
}
</style>
</head>
<body>

<div class="grid-container">
    <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>
</div>

</body>
</html>

Grid Gap

The gap property defines the space between rows and columns in a CSS Grid. You can also use row-gap and column-gap when different spacing is required.

Example

The following example shows how to add space between the rows and columns of a grid.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    gap: 20px;
}

.grid-item {
    background-color: lightgreen;
    padding: 20px;
    text-align: center;
}
</style>
</head>
<body>

<div class="grid-container">
    <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>
</div>

</body>
</html>

Grid Item Placement

CSS Grid provides properties such as grid-column and grid-row to control the position of individual grid items. These properties can also make an item span across multiple columns or rows.

Example

The following example shows how to make a grid item span across two columns.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
}

.grid-item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
}

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

<div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
</div>

</body>
</html>

Example of CSS Grid Layout

You can arrange elements in a grid-based structure using the Grid layout in CSS to build a simple program. A simple HTML and CSS program that uses a Grid layout to create a 3x3 grid is shown here as an example:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="grid-container">
        <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>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
</body>
</html>

CSS:

body {
    margin: 0;
    padding: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px); /* 3 columns with 100px width each */
    grid-template-rows: repeat(3, 100px);    /* 3 rows with 100px height each */
    gap: 10px;                               /* Gap between grid items */
    justify-content: center;                 /* Center the grid horizontally */
    align-items: center;                     /* Center the grid vertically */
    height: 100vh;                           /* Set grid container height to full viewport height */
}

.grid-item {
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}

Output:

In this example, you can see the display property of the container is set to the grid to create a 3x3 grid using the grid layout in CSS. The grid's columns and rows are defined using the grid-template-columns and grid-template-rows properties, respectively. We use CSS to style each grid item with a background color and center its content. Each grid item is a div element with the class grid item.

You should see a 3x3 grid with numbers from 1 to 9 set up in a grid layout when you open the HTML file in a web browser. To create grid layouts that are more complex and tailored to your needs, you can change the CSS properties.

Next TopicCSS Layout

← prev next →

We deliver comprehensive tutorials, interview question-answers, MCQs, study materials on leading programming languages and web technologies like Data Science, MEAN/MERN full stack development, Python, Java, C++, C, HTML, React, Angular, PHP and much more to support your learning and career growth.