Prev Next

CSS Grid Introduction

CSS Grid Layout is a powerful two-dimensional layout system for the web. It allows developers to design web pages by aligning items into rows and columns. Grid simplifies the process of creating complex layouts and is fully responsive, making it ideal for modern web design.

Key Topics

Grid Basics

CSS Grid introduces the display: grid; property to create a grid container. Inside the grid container, child elements automatically become grid items, which can be aligned and sized using grid properties like grid-template-rows, grid-template-columns, and gap.

Key Features of CSS Grid

  • Two-Dimensional Layout: Handles both rows and columns simultaneously.
  • Explicit and Implicit Grids: Control over defining the grid structure or letting items automatically generate grid tracks.
  • Flexible Item Placement: Place items in specific grid cells or let them flow naturally.
  • Responsive Design: Easily adapt layouts for different screen sizes using media queries.

Basic Grid Example

This example demonstrates a simple grid layout with three rows and three columns.

<!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-rows: 100px 100px 100px;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
            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">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 class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
</body>
</html>

Explanation: The grid container is defined with three rows and three columns, each grid item occupying one cell. The gap property adds spacing between rows and columns.

Key Takeaways

  • Grid Layout: CSS Grid is a two-dimensional layout system for aligning items into rows and columns.
  • Flexibility: Grid layouts can be explicit (predefined) or implicit (auto-generated).
  • Responsiveness: Grid properties combined with media queries enable highly responsive designs.
  • Simplified Layout: CSS Grid simplifies the creation of complex and nested layouts.
Prev Next