Grid Layout

CSS Grid is a layout system that allows you to design web pages with complex and responsive layouts. It provides a way to create a grid structure with rows and columns, making it easier to align and arrange content on the page. there having some types of grid layout

Display: Grid

To start using CSS Grid, you need to set the display property of a container element to grid. This makes its children grid items.

<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>

<style>
    .grid-container {
        display: grid;
        border: 1px solid #ccc;
        padding: 10px;
    }
    .grid-item {
        background: #f4f4f4;
        margin: 10px;
        padding: 20px;
        border: 1px solid #ddd;
    }
</style>

Grid Template Columns

The grid-template-columns property defines the number and size of the columns in your grid.

<style>
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
    }
</style>

In this example, the grid container has three equal columns.

Grid Template Rows

The grid-template-rows property defines the number and size of the rows in your grid.

<style>
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two equal columns */
        grid-template-rows: 100px 200px; /* First row 100px, second row 200px */
    }
</style>

In this example, the grid container has two columns and two rows with specified heights.

Grid Gap

The grid-gap property adds space between grid items. It can be used as grid-column-gap for column gaps, grid-row-gap for row gaps, or simply grid-gap for both.

<style>
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px; /* 20px gap between rows and columns */
    }
</style>

Grid Area

The grid-area property allows you to place a grid item in a specific area of the grid by defining a name and then placing it using grid-template-areas.

<div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

<style>
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "header header"
            "sidebar content"
            "footer footer";
        grid-gap: 10px;
    }
    .header {
        grid-area: header;
        background: #007BFF;
        color: white;
        padding: 20px;
    }
    .sidebar {
        grid-area: sidebar;
        background: #f4f4f4;
        padding: 20px;
    }
    .content {
        grid-area: content;
        background: #ffffff;
        padding: 20px;
    }
    .footer {
        grid-area: footer;
        background: #007BFF;
        color: white;
        padding: 20px;
    }
</style>

In this example, the layout is divided into a header, sidebar, content area, and footer using named grid areas.

Example: Grid Layout

<div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Main Content</div>
    <div class="footer">Footer</div>
</div>

<style>
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 3fr; /* Two columns: sidebar 1fr, content 3fr */
        grid-template-rows: auto 1fr auto; /* Three rows: header auto, content 1fr, footer auto */
        grid-template-areas:
            "header header"
            "sidebar content"
            "footer footer"; /* Layout structure */
        grid-gap: 10px; /* Space between grid items */
    }
    .header {
        grid-area: header;
        background: #007BFF;
        color: white;
        padding: 20px;
        text-align: center;
    }
    .sidebar {
        grid-area: sidebar;
        background: #f4f4f4;
        padding: 20px;
    }
    .content {
        grid-area: content;
        background: #ffffff;
        padding: 20px;
    }
    .footer {
        grid-area: footer;
        background: #007BFF;
        color: white;
        padding: 20px;
        text-align: center;
    }
</style>