Prev Next

RWD Grid View

A grid view is a commonly used layout in responsive web design (RWD) that arranges content into rows and columns. CSS Grid provides a simple and flexible way to create responsive grid layouts that adapt seamlessly to different screen sizes.

Key Topics

Grid Basics

CSS Grid uses the display: grid; property to define a grid container. Items within the container are automatically placed into grid cells, which can be customized using rows and columns.

Responsive Grid Layout

Responsive grid layouts use media queries and flexible grid properties to adapt to different screen sizes. Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Grid Layout</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            padding: 10px;
            background-color: #F0F0F0;
        }
        .grid-item {
            background-color: #007BFF;
            color: white;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
        <div class="grid-item">Item 5</div>
        <div class="grid-item">Item 6</div>
    </div>
</body>
</html>

Explanation: The grid automatically adjusts the number of columns based on the available space, creating a responsive layout.

Auto-Fit and Auto-Fill

CSS Grid supports dynamic layouts with auto-fit and auto-fill, allowing grids to adjust based on the number of items and the container size. Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto-Fit and Auto-Fill Example</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 10px;
            padding: 10px;
            background-color: #F0F0F0;
        }
        .grid-item {
            background-color: #28A745;
            color: white;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Item A</div>
        <div class="grid-item">Item B</div>
        <div class="grid-item">Item C</div>
        <div class="grid-item">Item D</div>
        <div class="grid-item">Item E</div>
    </div>
</body>
</html>

Explanation: The auto-fill keyword fills the available space with as many grid items as possible, ensuring a responsive and flexible layout.

Key Takeaways

  • CSS Grid: The go-to solution for creating responsive grid layouts.
  • Media Queries: Use them with grid properties to tailor layouts for specific screen sizes.
  • Dynamic Grids: Leverage auto-fit and auto-fill for layouts that adjust automatically.
Prev Next