Cool Amazing CSS Grid

#css #html #webdev #codepen

Introduction

Here I'll show the amazing use of CSS GRID property, CSS grid is a very powerful tool for any Frontend Web Developer. CSS Grid makes very easy for us to arrange the different block in the web page in very short lines.

In normal CSS we need to do a lot of work i.e using, float or flex property.

Let's get our hands dirty

For any webpage markup text is most important. So Let's write our markup first.

<div class="container">
        <div class="item-1">Item A</div>
        <div class="item-2">Item B</div>
        <div class="item-3">Item C</div>
        <div class="item-4">Item D</div>
        <div class="item-5">Item E</div>
        <div class="item-6">Item F</div>
        <div class="item-7">Item G</div>
        <div class="item-8">Item H</div>
    </div>

In Markup, keep all the boxes in one container as you can see, so that we can apply grid property at the root element or parent element of those boxes i.e container.

Now time for magic of CSS

First let's apply some basic formatting on body.

body{
      padding: 10px;
      background-color: #334d50;  /* fallback for old browsers */
      background-image: -webkit-linear-gradient(to right, #cbcaa5, #334d50);  /* Chrome 10-25, Safari 5.1-6 */
      background-image: linear-gradient(to right, #cbcaa5, #334d50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

Now, It's time for real magic ✨, so let's apply magic of CSS on the div of class container.

We have define CSS Grid property like display:grid to make the container box into grid. Now, we also need to tell how many rows and columns we want in our grid here it is grid-template-rows: repeat(3,1fr);grid-template-columns:repeat(5,1fr);. We also want a gap between corresponding rows and columns grid-gap:10px.

Below complete code for container class 👇

.container{
            display:grid;
            grid-gap: 10px;
            grid-template-rows: repeat(3,1fr);
            grid-template-columns:repeat(5,1fr);
            text-align: center;
            height: 95vh;
        }

Some basic CSS to make attractive boxes 😍.

.container div{
            border: 1px solid black;
            border-radius: 10px;
            font-weight: 700;
            font-size: 20px;
        }

It will look something like this till now without arranging the boxes at their places

Benefits of CSS Grid property 😲...

Here comes the main use of this powerful tool which makes this work so much easy. Otherwise we have to use float or flex property which make this very difficult. But with CSS Grid this is just a peanuts.

As we know that there are rows and columns in any grid, CSS provides the corresponding row's and column's number as shown below.

Arranging all the boxes at desired places.

There is property called grid-area by this we can define that which box should lay down between which row and column.

Actually grid-area is combined of grid-row & grid-column.

How grid area work 🤔?

grid area: row-starting-number/column-starting-number/row-ending-number-column-ending-number

Let's apply these in our example 😋...

On Item-1

.item-1{
            grid-area:1/1/2/3 ;
            background-color: #799F0C;  /* fallback for old browsers */
            background-image: -webkit-linear-gradient(to top, #ACBB78, #799F0C);  /* Chrome 10-25, Safari 5.1-6 */
            background-image: linear-gradient(to top, #ACBB78, #799F0C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }

On Item-2

.item-2{
            grid-area: 1/4/3/5;
            background-color: #00467F;  /* fallback for old browsers */
            background-image: -webkit-linear-gradient(to top, #A5CC82, #00467F);  /* Chrome 10-25, Safari 5.1-6 */
            background-image: linear-gradient(to top, #A5CC82, #00467F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }