Introduction

HTML + CSS

In web design, a grid is a layout technique that provides an ordered framework for placing pieces on a webpage by classifying material into rows and columns. A grid can be defined as a set of intersecting horizontal and vertical lines. The CSS Grid layout divides the page into main areas. It defines the relationship between parts of a control built from HTML primitives in terms of class, position, and size. The Grid property provides a grid-based layout system with rows and columns. It makes it easy to design web pages without positioning or floating. One popular grid system that gives developers control over the dimensions, orientation, and alignment of grid elements inside the grid container is CSS Grid Layout.

Brief Explanation of CSS Grid

'Grid layout' the web page is multi-dimensional. To work with grids, we need a grid container & grid item.

Properties of grid containers

This property can only be applied to grid containers.

The properties are:

Display: It specifies the targeted component to be grid.

Syntax

display: grid;

Grid-template-columns: It specifies the number of columns along with their width.

Syntax

grid-template-columns: value;

Grid-template-rows: It specifies the number of rows along with their height.

Syntax

grid-template-rows: value;

Example

Column-gap/row-gap/gap: It specifies the gap between grid-item. The gap is the short-hand property of column-gap and row-gap.

Properties of grid-items: These properties we can apply only on grid-items

How to implement a CSS grid with an example?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=div, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grid-container{
            display: grid;
            grid-template-rows: 150px auto  auto 150px;;
            grid-template-columns: auto auto auto auto;
            height: 800px;
            width: 1000px;
            margin: 50px;
            gap: 10px;
        }
        p{
            text-align: center;
            font-size: 25px;
            font-weight: 200;
            padding: 50px;
        }
        .grid-item1{
            background-color: rgb(56, 188, 245);
            grid-column: 1/5;
        }
        .grid-item2{
            background-color: orange;
            grid-row: 2/4;
        }
        .grid-item3{
            background-color: green;
            grid-row:2/4;
            grid-column: 2/4;
        }
        .grid-item4{
            background-color: yellow;
            grid-row: 2/4;
        }
        .grid-item5{
            background-color: blueviolet;
            grid-column: 1/5;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item1"><p>Header</p></div>
        <div class="grid-item2"><p>Left sidebar</p></div>
        <div class="grid-item3"><p>Main content</p></div>
        <div class="grid-item4"><p>Right sidebar</p></div>
        <div class="grid-item5"><p>Footer</p></div>
    </div>
</body>
</html>

CSS Styling:

Output Image

Conclusion

CSS Grid provides a powerful and intuitive way to create responsive layouts on the web. By defining grid containers and items, designers can easily structure content and achieve complex layouts with minimal code. The example demonstrated here showcases how CSS Grid can be used to create a multi-column layout. CSS Grid is a valuable tool for modern web design.