Learn CSS Grid?

Hello folks, this is my another bl0g and in this blog you will learn the basics of css grid that makes your work easy and fast.

Now let's get start

Introduction

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element's children (which become Grid Items).

Grid layout

The two main components of a CSS Grid are the Container (" parent ") and the items (children). The Container is the actual grid and the items are the content inside the grid.

Here’s the example of  Container & item

            <div class="Container">
                <div class="iteam iteam1">1</div>
                <div class="iteam iteam2">2</div>
                <div class="iteam iteam3">3</div>
                <div class="iteam iteam4">4</div>
                <div class="iteam iteam5">5</div>
            </div>

To turn our Container div into a grid, we simply give it a display of grid:

    .Container{
             display:grid;
    }            

But, this doesn’t do anything because we not define how we went our grid to look like. it will see simply 5 div's are stacked on the top of each.

Columns and rows

To make it two-dimensional, we’ll need to define the columns and rows. Let’s create three columns and two rows. We’ll use the grid-template-row and grid-template-column properties.

      .Container {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 50px 50px;
     }

The values dictate how wide we want our columns to be (100px) and how tall we’d want our rows to be (50px). Here’s the result:

To make sure you properly understand the relation between the values and how the grid looks, take a look at this example as well.

    .Container {
        display: grid;
        grid-template-columns: 200px 50px 100px;
        grid-template-rows: 100px 30px;
    }

Try to grasp the connection between the code and the layout.

Here is the example.

To position and resize the items we’ll target them and use the grid-column and grid-row properties:

        .item1 {
            grid-column-start: 1;
            grid-column-end: 4;
        }

What we are saying here is that we want item1 to start on the first grid line and end on the fourth column line.

Are you confused why we have 4 column lines when we only have 3 columns. Take a look at this bottom image, where I’ve drawn the column lines in black:

Notice that we’re now using all the rows in the grid. When we made the first item take up the entire first row, it pushed the rest of the items down.

Finally, I’d like to show a simpler way of writing the syntax above:

        .item1 {
            grid-column: 1 / 4;
        }

To make sure you have understood this concept properly, let’s rearrange the items a little bit.

        .item1 {
            grid-column-start: 1;
            grid-column-end: 3;
        }
        .item3 {
            grid-row-start: 2;
            grid-row-end: 4;
        }
        .item4 {
            grid-column-start: 2;
            grid-column-end: 4;
        }

And that was it!

That's all for this blog.

Conclusion

In this blog , we learned about Css Grid basics properties.I hope this information is useful for all of you while designing websites.

Thanks to all for reading this blog .