DEV Community

Cover image for Grids -> CSS: Learn through code way
Himanshu Tiwari ๐ŸŒผ
Himanshu Tiwari ๐ŸŒผ

Posted on

Grids -> CSS: Learn through code way

Today let's understand Grids in a practical way
All you have to do is copy the code and paste it into a code editor and before reading from top to bottom, just have a quick look at the HTML part.

Note: Try Commenting and un-commenting accordingly as you go
down for playing with items

How to read
Read from top to down and read with comments also 
comment and uncomment accordingly as you try different things.

I hope you have prior knowledge of CSS basics so that you don't 
act noob here ;) LOL -->

The whole HTML is full of 
GOLDEN WORDS, so do read them as soon as they encounter -->

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
        .container {
            display: grid;
            โญ GOLDEN WORDS: 1 
            So when we start, we begin by making the main 
            the container as display: grid; 
            and that's a really important thing to understand.

            After this we use a very basic property i.e. 
            which takes the number of columns and their width. 
            Like in the example below you can see, I have written 
            3 widths, i.e. I am dividing the screen into 3 columns 
            with respective widths.
            The width can be in pixel or in fr... most commonly 
            fr, fr divides the screen into columns...
            let's talk with example see GW:2 where fr is written  

            grid-template-columns: 300px 120px 120px;
            grid-template-columns: 120px auto 120px; 

            โญ GOLDEN WORDS: 2 
            here in the example below the screen is divided into 
            1+2+1 columns and the second column is twice 
            the first column. 
            FR stands for fraction, try practicing by changing 
            values things will get more clear then

            grid-template-columns: 1fr 2fr 1fr;

               Repeat takes 2 parameters, 
               1: the number of columns or rows used accordingly
               2: width of auto or __px or any numerical value

            grid-template-columns: repeat(4, auto); 

               GridGap is simple it's like margin for grids try 
               playing with them you will understand 

            grid-gap: 1rem;
            /* grid-column-gap: 2rem; */
            /* grid-row-gap: 3rem; */

            /* grid-template-rows: 20px 20px 20px ; */
            /* grid-template-rows: repeat(4, auto); */

            โญ GOLDEN WORDS : 3
            So you might have understood the above statement, 
            __NO :(__
            That's the same as what I did for columns which now is 
            done for rows.
            N O W
            what is this auto rows property,
            i.e. Go and see the HTML item tags you can see there 
            are 9 total items but we styled only 4 or 3 columns 
            and a width of 3 or 4 items so what about others, so 
            we can style their widths using this ๐Ÿ‘‡ property
                          grid-auto-rows: _____; property
            try working with it for more explanation 

            grid-auto-rows: 120px; 

            โญ GOLDEN WORDS: 4 
            GTC or grid-template-columns: ___; can be used in a 
            bit different way with auto-fit and minmax property 
            and basically, it has a certain reason 

            reason: repeat contains 2 parameters 
            (as I told above), number of rows 
            or columns and size of them, so here auto-fit is for 
            the number of columns i.e. it will adjust accordingly, 
            to the screen and minmax property is for setting the 
            minimum and the maximum width of the item grids. Here 
            300px is minimum width and 1fr(fraction) is for 
            maximum width i.e. for 1 .item (class) on-screen 
            try practicing this a few times and you will 
            understand this well
            few devs use media queries instead so we can use that 
            as well( I prefer using media queries for that) 

            grid-template-columns: repeat(auto-fit , 

            /* justify-content: center; */

            โญ GOLDEN WORDS: 5 
            A very powerful tool to make designs of a website is 
            grid but the area tool in the grid is something that 
            makes it so so powerful.
            So, I did some tweaks here
            first I took 3 items and gave them id's and remember 
            to comment on other items before moving forward. 
            gave them grid-area while styling there id's
            anything relevant let's say a name (check below๐Ÿ‘‡) 
            after that in the container itself, we made the 
            grid-template-areas: ___; 
            this property uses those areas to represent 

            It designs in a 2D representation 

            i.e. every name is 1fr width and we write it as we 
            want it to appear(try to write logically and 
            practically possible things for god's sake  ๐Ÿ™), 
            a better way to understand this is to run 
            the below code and see... 
            don't forget to play by yourself
            "itemOne itemOne itemTwo itemTwo"
            "itemThree itemThree itemTwo itemTwo";


        .item {
            /* height: 100px;
            width: 100px; */
            background-color: rgb(62, 210, 255);
            border: 2px solid black;
            /* margin: 3px; */
            padding: 10px 5px;

        โญ GOLDEN WORDS: 6 
        Now as you are an amazing learner so it's time to 
        learn Spanning 
        So we selected the first item using the first-child 
        selector property and now used grid-column for spanning 
        through the column and the way I did it is by giving the 
        start "1" and then a "/" with a "span" keyword and then 
        end 2, 
        results were item 1 now spans all the way to col-2 
        the very same can be done with grid-row selector.
        Those commented 4 lines are another way of representation 
        and nothing else. This will be more clear only if you play 
        more with this, try experimenting with the below 
        .item:first-child {

            /* grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 3; */

            grid-column: 1 / span 2;
            grid-row: 1 / span 2;


        /* Check them for golden word 5 โ˜๏ธ */

            grid-area: itemOne;
            grid-area: itemTwo;
            grid-area: itemThree;


    <div class="container">
        <div id = one class="item">This is Item-1</div>
        <div id = two class="item">This is Item-2</div>
        <div id = three class="item">This is Item-3</div>
        <div class="item">This is Item-4</div>
        <div class="item">This is Item-5</div>
        <div class="item">This is Item-6</div>
        <div class="item">This is Item-7</div>
        <div class="item">This is Item-8</div>
        <div class="item">This is Item-9</div>


Enter fullscreen mode Exit fullscreen mode

I hope you have learned something ๐Ÿ‘
haha found my grammatical mistakes then comment them down

Top comments (4)

ash_bergs profile image

Love this approach to learning Grid, great work!

himanshutiwari15 profile image
Himanshu Tiwari ๐ŸŒผ

Thanks, glad you liked

samar profile image
samarjit mahi

nicely written blog.

himanshutiwari15 profile image
Himanshu Tiwari ๐ŸŒผ

thanks, dude, glad it helped