How to Create a Responsive CSS Grid Layout ?

Last Updated : 15 Nov, 2024

Here are different ways to create a responsive grid layout with CSS.

1. Using auto-fill Property

This method can be used CSS Grid for a responsive layout. The grid-template-columns property adjusts columns based on space, keeping a minimum width of 200 pixels. Gaps between items are set with grid-gap. This approach ensures a flexible design that adapts to different screen sizes, ideal for responsive web development.

<!DOCTYPE html>
<html>

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

        .grid > div {
            font-size: 20px;
            padding: 1rem;
            color: yellow;
            text-align: center;
            background: red;
        }
    </style>
</head>

<body>
    <div class="grid">
        <div> Div 1</div>
        <div>Div 2</div>
        <div>Div 3</div>
        <div>Div 4</div>
        <div>Div 5</div>
        <div>Div 6</div>
        <div>Div 7</div>
        <div>Div 8</div>
    </div>
</body>

</html>

Output

2. Using auto-fill and auto-fit Properties

This approach provides flexibility in creating responsive grid layouts, allowing developers to choose between filling the space with fixed-width columns (auto-fill) or adjusting column widths to fit the container (auto-fit). The .auto-fill and .auto-fit classes are used to control the behavior of the grid columns. The .auto-fill class creates as many columns as possible with a minimum width of 200 pixels, while .auto-fit ensures that the columns fit snugly within the container, expanding or contracting as needed.

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid {
            display: grid;
            margin: 8px;
            grid-gap: 10px
        }

        .grid > div {
            font-size: 20px;
            padding: 1rem;
            color: yellow;
            text-align: center;
            background: red;
        }

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

        .auto-fill {
            grid-template-columns: repeat(auto-fill,
                    minmax(200px, 1fr));
        }
    </style>
</head>

<body>
    <div class="grid auto-fill">
        <div>Div 1</div>
        <div>Div 2</div>
    </div>

    <div class="grid auto-fit">
        <div>Div 1</div>
        <div>Div 2</div>
    </div>
</body>

</html>

Output

3. Using Media Query

This method uses media queries to create a responsive webpage layout. The .wrapper class defines the grid container with areas for the header, sidebar, content, and footer. Layout changes based on screen width, ensuring a flexible design that adapts to different sizes while maintaining structure and styling for each area.

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            margin: 40px;
        }

        .sidebar {
            grid-area: sidebar;
        }

        .content {
            grid-area: content;
        }

        .header {
            grid-area: header;
        }

        .footer {
            grid-area: footer;
        }

        .wrapper {
            background-color: #eeeeee;
            color: #444;
            padding: 10px;
            margin: auto;
            display: grid;
            grid-gap: 1em;
            grid-template-areas:
                "header" "sidebar" "content" "footer";
        }

        @media only screen and (min-width: 500px) {
            .wrapper {
                grid-template-columns: 20% auto;
                grid-template-areas:
                    "header   header" "sidebar  content" "footer   footer";
            }
        }

        @media only screen and (min-width: 600px) {
            .wrapper {
                grid-gap: 20px;
                grid-template-columns: 120px auto;
                grid-template-areas:
                    "header  header" "sidebar content" "footer  footer";
                max-width: 600px;
            }
        }

        .box {
            background-color: #444;
            color: #ffffff;
            border-radius: 5px;
            padding: 10px;
            font-size: 20px;
        }

        .header,
        .footer {
            background-color: blue;
        }

        .sidebar {
            background-color: #ccc;
            color: #444;
        }

        .content {
            background: rgb(16, 160, 179);
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box header">Header</div>
        <div class="box sidebar">Sidebar</div>
        <div class="box content">
            Content
        </div>
        <div class="box footer">Footer</div>
    </div>
</body>

</html>