Cool Amazing CSS Grid

Cool Amazing CSS Grid:

 

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 makrup first.

Item A
Item B
Item C
Item D
Item E
Item F
Item G
Item H

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+ */
        }

Similarly, Apply on all the boxes according to their locations in container div to get the desired result 😎.

Final result will look like this 👇


from Tumblr https://generouspiratequeen.tumblr.com/post/637499143979483136

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s