The Project | About Us | Contribute | Donations | License

HOME

CSS Grid Layout is a powerful layout system available in CSS. It allows you to create complex and responsive web layouts with ease. In this lesson, we will cover the basics of CSS Grid, including its syntax, properties, and how to create a simple grid layout.

What is CSS Grid?

CSS Grid is a two-dimensional layout system for the web. It allows you to layout items in rows and columns, making it easier to design web pages without using floats and positioning.

Key Concepts of CSS Grid

Grid Container: The element on which display: grid is applied. It contains grid items.
Grid Item: The children of the grid container.
Grid Lines: The dividing lines that make up the structure of the grid.
Grid Tracks: The space between two grid lines. They can be rows or columns.
Grid Cells: The smallest unit of the grid, formed by the intersection of a row and a column.
Grid Areas: A rectangular area that consists of one or more grid cells.

Basic Syntax

To create a grid layout, you need to define a grid container and specify the grid properties.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Example</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: auto;
            gap: 10px;
        }
        .grid-item {
            background-color: #8ca0ff;
            padding: 20px;
            text-align: center;
            border: 1px solid #ccc;
        }
    </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>

Explanation

Grid Container: The div with the class grid-container is the grid container. It has the display: grid property.
Grid Template Columns: The grid-template-columns property defines three columns, each taking up an equal fraction of the available space (1fr).
Grid Template Rows: The grid-template-rows property defines the rows. In this case, it is set to auto, meaning the rows will adjust their height based on the content.
Gap: The gap property defines the space between the grid items.

Practical Exercise

Task

Create a grid layout with four columns and three rows. Each grid item should have a unique background color.

Solution

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Exercise</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, auto);
            gap: 10px;
        }
        .grid-item {
            padding: 20px;
            text-align: center;
            border: 1px solid #ccc;
        }
        .item1 { background-color: #ff9999; }
        .item2 { background-color: #99ff99; }
        .item3 { background-color: #9999ff; }
        .item4 { background-color: #ffcc99; }
        .item5 { background-color: #cc99ff; }
        .item6 { background-color: #99ccff; }
        .item7 { background-color: #ff99cc; }
        .item8 { background-color: #ccff99; }
        .item9 { background-color: #99ffcc; }
        .item10 { background-color: #ffccff; }
        .item11 { background-color: #ccffff; }
        .item12 { background-color: #ffffcc; }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item item1">1</div>
        <div class="grid-item item2">2</div>
        <div class="grid-item item3">3</div>
        <div class="grid-item item4">4</div>
        <div class="grid-item item5">5</div>
        <div class="grid-item item6">6</div>
        <div class="grid-item item7">7</div>
        <div class="grid-item item8">8</div>
        <div class="grid-item item9">9</div>
        <div class="grid-item item10">10</div>
        <div class="grid-item item11">11</div>
        <div class="grid-item item12">12</div>
    </div>
</body>
</html>

Explanation

Grid Template Columns: The grid-template-columns property uses the repeat function to create four columns, each taking up an equal fraction of the available space (1fr).
Grid Template Rows: The grid-template-rows property uses the repeat function to create three rows, each adjusting their height based on the content (auto).
Grid Items: Each grid item has a unique background color for better visualization.

Conclusion

In this lesson, we introduced CSS Grid, a powerful layout system for creating complex and responsive web layouts. We covered the basic syntax and properties of CSS Grid and provided practical examples and exercises to help you understand how to use it. In the next lesson, we will dive deeper into the properties of the grid container and how to control the layout of grid items.

Introduction to CSS Grid

What is CSS Grid?

Key Concepts of CSS Grid

Basic Syntax

Example

Explanation

Practical Exercise

Task

Solution

Explanation

Conclusion

CSS Mastery: From Beginner to Advanced

Module 1: Introduction to CSS

Module 2: Text and Font Styling

Module 3: Box Model and Layout

Module 4: Positioning and Floating

Module 5: Flexbox

Module 6: CSS Grid

Module 7: Advanced CSS Techniques

Module 8: Responsive Design

Module 9: Preprocessors and Frameworks

Module 10: Best Practices and Optimization

Module 11: Project: Building a Responsive Website