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.

HTML

<!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.

HTML

<!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.