DEV Community 👩‍💻👨‍💻

Cover image for Cool Amazing CSS Grid
Rahul Kumar
Rahul Kumar

Posted on • Updated on

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 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>
Enter fullscreen mode Exit fullscreen mode

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+ */
    }
Enter fullscreen mode Exit fullscreen mode

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;
        }
Enter fullscreen mode Exit fullscreen mode

Some basic CSS to make attractive boxes 😍.

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

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

Alt Text

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.

Alt Text

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+ */
        }
Enter fullscreen mode Exit fullscreen mode

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+ */
        }
Enter fullscreen mode Exit fullscreen mode

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

Final result will look like this 👇

Alt Text

Some Useful Links 🤞:

I Hope this will help you, if you have query or suggestion feel free to ask or tell respectively.

To Visit Me 🤝 Click Here

Thank You 😊!

Top comments (3)

Collapse
shivendrarox profile image
Shivendra Singh

Is CSS grid a viable replacement for flexbox?

Collapse
matthijsewoud profile image
⚡️

No. The two do different things. They have some overlap, but function very differently in regards to how content is used to set the size of boxes.

Collapse
rkrider profile image
Rahul Kumar Author • Edited on

Flex is useful for arranging items in particular row or column, while CSS Grid arrange them in any row and column.
Both are different.

🌚 Life is too short to browse without dark mode