How to Create a CSS Grid Layout

Introduction

CSS Grid is a powerful layout system that allows you to create complex and responsive web layouts with ease. It provides a two-dimensional system, meaning you can control both rows and columns, making it ideal for grid-based designs like galleries, dashboards, or landing pages.

In this tutorial, you'll learn how to create a simple and responsive CSS Grid layout where items are aligned in rows and columns.

Development Steps

Create Basic HTML Structure: Write the HTML structure with items to be placed in the grid.
Define a Grid Container in CSS: Use CSS to define the grid container and the layout for rows and columns.
Control Grid Item Placement: Position grid items and style them.
Make the Layout Responsive: Add media queries to adjust the layout on smaller screens.

Step 1: Create a Basic HTML Structure

We’ll start by creating a container that holds several grid items. These items will be arranged into a grid layout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Layout Example</title>
</head>
<body>

    <!-- Step 1: Basic Grid Structure -->
    <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>

Explanation:

The grid-container will hold all the grid items (grid-item) that will be styled and arranged into a grid layout.

Step 2: Define a Grid Container in CSS

Now, we’ll style the grid container and define the grid layout. We'll set up a grid with 3 columns.

/* Basic page styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

/* Step 2: Grid container styles */
.grid-container {
    display: grid; /* Activate grid layout */
    grid-template-columns: repeat(3, 1fr); /* Create 3 equal columns */
    gap: 20px; /* Space between grid items */
    max-width: 800px;
    width: 100%;
    padding: 20px;
    background-color: #fff;
}

/* Grid item styles */
.grid-item {
    background-color: #3498db;
    color: white;
    padding: 40px;
    font-size: 24px;
    text-align: center;
    border-radius: 5px;
}

Explanation:

display: grid;: Sets up a grid layout for the grid-container.
grid-template-columns: repeat(3, 1fr);: Creates 3 equal columns, each taking up 1fr (one fraction of the available space).
gap: 20px;: Adds a 20px space between the grid items.
grid-item styles: Adds a background color, padding, and border radius to each grid item for better presentation.

Step 3: Control Grid Item Placement

You can also control where individual items are placed within the grid. For example, you can make one grid item span multiple columns or rows.

/* Grid item 1 spans across 2 columns */
.grid-item:nth-child(1) {
    grid-column: span 2;
}

/* Grid item 3 spans across 2 rows */
.grid-item:nth-child(3) {
    grid-row: span 2;
}

Explanation:

grid-column: span 2;: This makes the first grid item span across 2 columns.
grid-row: span 2;: This makes the third grid item span across 2 rows.

Step 4: Make the Layout Responsive

To ensure the grid layout works well on smaller screens, you can use media queries to adjust the number of columns.

/* Step 4: Responsive layout */
@media (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr; /* Single column layout for small screens */
    }
}

Explanation:

grid-template-columns: 1fr;: On screens smaller than 600px, the layout will change to a single column.

Complete Code Example

Here’s the complete HTML and CSS code for creating a responsive CSS Grid layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Layout Example</title>
    <style>
        /* Basic page styles */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }

        /* Step 2: Grid container styles */
        .grid-container {
            display: grid; /* Activate grid layout */
            grid-template-columns: repeat(3, 1fr); /* Create 3 equal columns */
            gap: 20px; /* Space between grid items */
            max-width: 800px;
            width: 100%;
            padding: 20px;
            background-color: #fff;
        }

        /* Grid item styles */
        .grid-item {
            background-color: #3498db;
            color: white;
            padding: 40px;
            font-size: 24px;
            text-align: center;
            border-radius: 5px;
        }

        /* Grid item 1 spans across 2 columns */
        .grid-item:nth-child(1) {
            grid-column: span 2;
        }

        /* Grid item 3 spans across 2 rows */
        .grid-item:nth-child(3) {
            grid-row: span 2;
        }

        /* Step 4: Responsive layout */
        @media (max-width: 600px) {
            .grid-container {
                grid-template-columns: 1fr; /* Single column layout for small screens */
            }
        }
    </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>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, you learned how to create a simple and responsive CSS Grid layout. CSS Grid makes it easy to define layouts with rows and columns, and the flexibility it offers allows for powerful, complex layouts with minimal code. You can customize the number of columns, row and column spans, and make the layout responsive for different screen sizes.

Java Guides

Search This Blog