Prev Next

CSS Grid Container

A grid container is the parent element that holds the grid items. It is created by applying the display: grid; property to an element. The grid container controls the layout structure, including rows, columns, and gaps between items.

Key Topics

Defining a Grid Container

To create a grid container, set display: grid; on the parent element. All child elements automatically become grid items.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Container</title>
    <style>
        .grid-container {
            display: grid;
            background-color: #F0F0F0;
            padding: 10px;
        }
        .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>
</body>
</html>

Grid Template Properties

The grid-template-rows and grid-template-columns properties define the structure of rows and columns in the grid container. You can specify sizes using relative or absolute units:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Template</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: 100px 200px;
            grid-template-columns: 1fr 2fr;
            gap: 10px;
            background-color: #F0F0F0;
            padding: 10px;
        }
        .grid-item {
            background-color: #28A745;
            color: white;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Row 1, Col 1</div>
        <div class="grid-item">Row 1, Col 2</div>
        <div class="grid-item">Row 2, Col 1</div>
        <div class="grid-item">Row 2, Col 2</div>
    </div>
</body>
</html>

Gap Property

The gap property specifies the spacing between grid rows and columns. Use row-gap and column-gap for individual control:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Gap</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: 100px 100px;
            grid-template-columns: 1fr 1fr;
            row-gap: 20px;
            column-gap: 30px;
            background-color: #F0F0F0;
            padding: 10px;
        }
        .grid-item {
            background-color: #DC3545;
            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>
</body>
</html>

Explanation: The row-gap and column-gap properties specify the vertical and horizontal spacing between items in the grid container.

Key Takeaways

  • Grid Container: The parent element of all grid items, created using display: grid;.
  • Grid Template: Defines the structure of rows and columns.
  • Gap Property: Adds spacing between grid items, improving layout readability.
  • Flexibility: Grid containers allow precise control over layout structures.
Prev Next