---
title: "CSS Grid"
url: https://khanwaseem.com/blog/course/css-grid-layout
author: "khan Waseem"
published: 2023-09-12
updated: 2023-09-19
topics: ["course", "CSS Tutorial"]
description: "Discover expert insights on web development, design trends, and coding tips. Stay updated with the latest in tech and unleash your creative potential"
---

# CSS Grid

CSS Grid is a powerful and versatile layout system in web development. It allows designers and developers to create complex grid-based layouts with precision and ease. Unlike traditional layout methods, CSS Grid operates in two dimensions, providing control over both rows and columns simultaneously.

**Here are key characteristics of CSS Grid:**

**1. Two-Dimensional Layout:** CSS Grid enables the creation of grid structures in both horizontal rows and vertical columns, allowing for highly flexible and responsive layouts.

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19095353/flex-vs-grid.png)

**2. Grid Container:** To establish a grid layout, you designate a container element as a grid using the `display: grid;` property. This container defines the boundaries of the grid.

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19104032/h9qs07pm0a8s20scr6wr.png)

**3. Grid Items:** Elements within the grid container become grid items. You can position and size these items within the grid cells according to your design requirements.

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19104303/grid-container.png)

**4. Explicit Grid:** You can explicitly define the number of rows and columns in the grid using properties like `grid-template-rows` and `grid-template-columns`. This provides full control over the grid structure.

**5. Implicit Grid:** CSS Grid also accommodates additional rows and columns automatically when grid items exceed the explicitly defined grid structure. This is known as the implicit grid.

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19104457/css_grid_explicit_and_implicit_track_sizing.png)

**6. Grid Lines:** Grid lines are horizontal and vertical lines that separate rows and columns within the grid. These lines serve as reference points for positioning grid items.

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19104614/download.png)

**7. Grid Gap:** The `grid-gap` property specifies the spacing between grid rows and columns, enhancing readability and aesthetics.

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19104703/grid_gaps.png)

**8. Responsive Design:** CSS Grid is ideal for creating responsive layouts. Media queries can be used to adapt the grid structure and item placement for different screen sizes and devices.

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19104743/4ixwf8ldladua3cp6edl.webp)

**9. Grid Templates:** Grid templates allow you to name areas within the grid and assign specific grid items to those areas. This simplifies complex layouts.

**10. Browser Support:** CSS Grid is well-supported by modern web browsers, making it a practical choice for web designers and developers.

## Grid Property

In CSS, the grid layout system provides a powerful way to design web page layouts. There are several properties associated with CSS Grid that help you control the behavior and structure of the grid. Let’s explore each of these properties in detail:

**1.  **`**display: grid;**`: This property is used to define an element as a grid container. Once applied to an element, it allows you to create a grid layout within that container. For example, `display: grid;` transforms a `<div>` element into a grid container.

```css
.grid-container {
  display: grid;
}
Code language: CSS (css)
```

`2. **grid-template-columns**` **and `grid-template-rows`:** These properties determine the size and number of columns and rows in your grid. You can specify the width of each column and the height of each row using various units like pixels, percentages, or `fr` units, which represent a fraction of the available space.

```css
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px auto;
}
Code language: CSS (css)
```

`**3. grid-template-areas**`: This property lets you define a named grid template, making it easier to position items within the grid. You can assign names to different areas of the grid and then place grid items in these areas using the `grid-area` property.

```css
.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}Code language: CSS (css)
```

`**4. grid-gap**`: This property sets the spacing between grid items, both horizontally and vertically. You can use values like pixels, percentages, or `auto` to control the gap between grid cells.

```css
.grid-container {
  display: grid;
  grid-gap: 20px;
}Code language: CSS (css)
```

**`5. justify-items` and `align-items`: **These properties control the alignment of grid items within their respective grid cells. `justify-items` controls horizontal alignment (e.g., center, start, end), while `align-items` controls vertical alignment (e.g., center, start, end).

```css
.grid-container {
  display: grid;
  justify-items: center;
  align-items: center;
}Code language: CSS (css)
```

**6.  `justify-content` and `align-content`**: These properties control the alignment of the entire grid within its container. `justify-content` deals with horizontal alignment (e.g., center, start, end), while `align-content` deals with vertical alignment (e.g., center, start, end).

```css
.grid-container {
  display: grid;
  justify-content: center;
  align-content: space-between;
}Code language: CSS (css)
```

**7.  `grid-auto-columns` and `grid-auto-rows`: **These properties specify the size of columns and rows that are automatically created when grid items are placed in the grid without explicit column and row definitions. They allow for flexibility in your grid layout.

```css
.grid-container {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-rows: minmax(50px, auto);
}Code language: CSS (css)
```

**8. `grid-auto-flow`:** This property determines the order in which grid items are placed into the grid cells. You can set it to “row,” “column,” “dense,” or “sparse” to control the flow of items.

```css
.grid-container {
  display: grid;
  grid-auto-flow: column;
}Code language: CSS (css)
```

**9. `grid-column` and `grid-row`:** These properties allow you to precisely position individual grid items within the grid by specifying their start and end positions for columns and rows.

```css
.grid-container {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-rows: minmax(50px, auto);
}Code language: CSS (css)
```

**10. **`**grid-area**`**:** This property is used to assign a grid item to a named grid area defined in the `grid-template-areas`. It simplifies the placement of items within the grid.

```css
.grid-item {
  grid-area: sidebar;
}Code language: CSS (css)
```

These grid properties give you fine-grained control over the layout of your web page, allowing you to create responsive and intricate designs with ease. They make CSS Grid a valuable tool for web developers and designers looking to create flexible and attractive layouts.

The `grid` property in CSS is a shorthand property used to set all the grid-related properties in one declaration. It includes properties like `grid-template-rows`, `grid-template-columns`, `grid-template-areas`, `grid-template`, `grid-auto-rows`, `grid-auto-columns`, `grid-auto-flow`, `grid`, `grid-gap`, and `grid-column-gap`. Here’s an example that demonstrates the usage of various grid properties within the `grid` shorthand property in an HTML document:

```xml
<!DOCTYPE html>
<html>
<head>
    <style>
        /* Define a grid container using the grid property */
        .grid-container {
            display: grid;
            grid: 
                "header header" 80px /* Grid template rows and their heights */
                "sidebar main" 1fr /* Grid template columns and their widths */
                "sidebar footer" auto / 200px 1fr; /* Explicit column widths */

            grid-gap: 10px; /* Gap between grid items */
            background-color: #f0f0f0; /* Background color for the grid container */
            padding: 20px; /* Padding for the grid container */
        }

        /* Style grid items */
        .grid-item {
            background-color: #336699; /* Background color for grid items */
            color: #ffffff; /* Text color for grid items */
            padding: 20px; /* Padding for grid items */
            text-align: center; /* Center text within grid items */
        }

        /* Style specific grid items using grid-area property */
        .header {
            grid-area: header;
            background-color: #ff9933;
        }

        .sidebar {
            grid-area: sidebar;
            background-color: #99cc33;
        }

        .main {
            grid-area: main;
        }

        .footer {
            grid-area: footer;
            background-color: #ff9933;
        }
    </style>
</head>
<body>
    <h2>CSS Grid Property Example</h2>

    <!-- Grid container with grid items -->
    <div class="grid-container">
        <div class="grid-item header">Header</div>
        <div class="grid-item sidebar">Sidebar</div>
        <div class="grid-item main">Main Content</div>
        <div class="grid-item footer">Footer</div>
    </div>
</body>
</html>Code language: HTML, XML (xml)
```

**Output : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19110355/image-150-1024x338.png)

**In this example:**

- We have a basic HTML document with a heading (`<h2>`).

- Inside the `<style>` element, we define styles for creating a grid layout using the `grid` property:

- The `grid` property defines the grid template rows, grid template columns, and grid template areas all in one line. This shorthand syntax is a convenient way to set up a complex grid layout.

- We also set the `grid-gap` property to specify the gap between grid items.

- We define styles for specific grid items using the `grid-area` property, which assigns items to specific areas defined in the grid template.

- In the HTML body, we create a grid container with four grid items, each assigned to a specific area.

When you open this HTML file in a web browser, you will see a grid layout with defined rows, columns, and grid areas, where each grid item is styled according to the defined CSS properties. The `grid` property simplifies the process of creating complex grid layouts in CSS.

CSS Grid has revolutionized web layout design by offering a more intuitive and efficient way to create complex, responsive, and grid-based designs. It reduces the need for complex CSS and HTML structures, making it easier to achieve visually appealing and highly functional web layouts.

### Related posts:

[JavaScript – Events](https://blog.khanwaseem.com/javascript-events/)
[CSS – Measurement Units](https://blog.khanwaseem.com/css-measurement-units/)
[CSS – Flex](https://blog.khanwaseem.com/css-flex/)
[CSS – @ Rules](https://blog.khanwaseem.com/css-rules/)

Powered by [YARPP](https://yarpp.com).