The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

CSS Grid Layout

Next ►
►

CSS Grid Layout is a powerful layout system available in CSS. It allows developers to create complex and responsive web layouts with ease. Unlike Flexbox, which is one-dimensional, CSS Grid is two-dimensional, meaning it can handle both rows and columns simultaneously.

Key Concepts of CSS Grid Layout

  1. Grid Container and Grid Items:

    • The element on which display: grid; is applied becomes a grid container.
    • The direct children of the grid container are grid items.

  2. Grid Lines:

    • These are the dividing lines that make up the structure of the grid. They can be horizontal or vertical.

  3. Grid Tracks:

    • The space between two adjacent grid lines. It can be a row or a column.

  4. Grid Cells:

    • The smallest unit on the grid, formed by the intersection of a row and a column.

  5. Grid Areas:

    • A rectangular area that consists of one or more grid cells.

Basic CSS Grid Properties

  • display: grid;: Defines a container as a grid container.
  • grid-template-columns and grid-template-rows: Define the number and size of columns and rows.
  • grid-column-gap and grid-row-gap: Define the space between columns and rows.
  • grid-template-areas: Allows you to define a grid template using named areas.

Practical Example

Let's create a simple grid layout with three columns and two rows.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 100px 100px;
            grid-gap: 10px;
        }
        .grid-item {
            background-color: #8ca0ff;
            border: 1px solid #000;
            text-align: center;
            padding: 20px;
            font-size: 30px;
        }
    </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-template-columns: 1fr 1fr 1fr;: This creates three equal columns. The fr unit represents a fraction of the available space.
  • grid-template-rows: 100px 100px;: This creates two rows, each 100 pixels tall.
  • grid-gap: 10px;: This adds a 10-pixel gap between each grid item.

Exercises

Exercise 1: Create a Responsive Grid

Create a grid layout with four columns on large screens and two columns on smaller screens.

Solution:

<style>
    .responsive-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 10px;
    }

    @media (max-width: 600px) {
        .responsive-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>

Exercise 2: Use Grid Areas

Create a layout using grid areas to define a header, sidebar, main content, and footer.

Solution:

<style>
    .grid-layout {
        display: grid;
        grid-template-areas:
            'header header'
            'sidebar main'
            'footer footer';
        grid-template-columns: 1fr 3fr;
        grid-template-rows: auto 1fr auto;
        grid-gap: 10px;
    }

    .header {
        grid-area: header;
    }

    .sidebar {
        grid-area: sidebar;
    }

    .main {
        grid-area: main;
    }

    .footer {
        grid-area: footer;
    }
</style>

Conclusion

CSS Grid Layout is a versatile tool for creating complex and responsive web designs. By understanding its basic properties and concepts, you can build layouts that adapt to different screen sizes and devices. Practice using grid properties and experiment with different layouts to become proficient in CSS Grid. In the next section, we will explore responsive typography to ensure text scales appropriately across devices.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved