What is CSS Grid?

Last Updated : 18 Sep, 2024

CSS Grid is the powerful layout property in CSS that allows the web developers to design the complex and responsive grid-based layout. Unlike the older layout systems like Flexbox, which focuses on one dimensional layouts. CSS Grid is the two dimensional system, means that it can handle simultaneously the both rows and columns.

Prerequisites

What is CSS Grid?

CSS Grid is a layout system that divides the webpage into the grid of the rows and columns, where you can place items precisely within this grid. It can gives the more flexibility and control over how the elements are displayed on the webpage. CSS Grid can be used to create the responsive layouts that adapt to the different screen sizes, making it a perfect choice for the modern web development.

CSS Grid introduces the few new concepts such as the grid containers and grid items, where the parent element is the grid container, and the children are the grid items.

Properties of the CSS Grid

Some key properties of the CSS Grid that help in the creating a grid layout:

Grid Container Properties:

display: grid : It can defines the element as the grid container.
grid-template-columns: It can specifies the number and size of the columns in the grid.
grid-template-rows: It can specifies the number and size of the rows in the grid.
grid-gap: It can specifies the spacing between the rows and columns.

Grid Item Properties:

grid-column-start and grid-column-end: It can defines the start end points of the grid items in the columns.
grid-row-start and grid-row-end: It can defines the start and end points of the grid items in the rows.
grid-area: The shorthand for specifying the both row and column positioning.

Syntax:

.container {
    display: grid;
    grid-template-columns: 100px 200px auto;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

.item2 {
    grid-column: 2 / 4;
    grid-row: 2;
}

Explanation

display: grid: It defines the container as the grid.
grid-template-columns: It defines the layout of the columns. For example, grid-template-columns: 100px 200px auto; creates three columns: the first is 100px wide, the second is 200px, and the third takes up the remaining space
grid-template-rows: It creates space between rows and columns. For example, grid-gap: 10px; creates a 10px gap between both rows and columns.
grid-gap: It can creates a 10px gap between the rows and columns.
grid-column-start and grid-column-end: It defines where an item starts and ends in terms of columns. For example, grid-column-start: 1; and grid-column-end: 3; means the item spans from the first column to the third column.
grid-row-start and grid-row-end: It defines where an item starts and ends in terms of rows. For example, grid-row-start: 1; and grid-row-end: 2; means the item spans from the first row to the second row.

In this example, we can create the simple grid layout using the CSS Grid.

HTML

<!-- index.html-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 100px 200px auto;
            grid-template-rows: 100px 100px;
            grid-gap: 10px;
            background-color: #ddd;
            padding: 10px;
        }

        .item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            font-size: 20px;
            text-align: center;
        }

        .item1 {
            grid-column: 1 / 3;
            grid-row: 1 / 2;
        }

        .item2 {
            grid-column: 2 / 4;
            grid-row: 2;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item item1">Item 1</div>
        <div class="item item2">Item 2</div>
        <div class="item item3">Item 3</div>
    </div>
</body>

</html>

Output