DEV Community

loading...
Cover image for Grids -> CSS: Learn through code way

Grids -> CSS: Learn through code way

himanshutiwari15 profile image Himanshu Tiwari ๐ŸŒผ ใƒป4 min read

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">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
                                   scale=1.0">
    <title>CSS-GRID-SYSTEM</title>
    <style>
        .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. 
            grid-template-columns 
            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, 
            right!!! 
            __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 
            alone... 
            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 , 
                                   minmax(300px,1fr));

            /* 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. 
            then 
            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 
            design

            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
             */
            grid-template-areas: 
            "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 
        statements
        */
        .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 โ˜๏ธ */

        #one{
            grid-area: itemOne;
        }
        #two{
            grid-area: itemTwo;
        }
        #three{
            grid-area: itemThree;
        }
    </style>
</head>

<body>

    <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>
    </div>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (4)

pic
Editor guide
Collapse
ash_bergs profile image
Ash

Love this approach to learning Grid, great work!

Collapse
himanshutiwari15 profile image
Himanshu Tiwari ๐ŸŒผ Author

Thanks, glad you liked

Collapse
samar profile image
samarjit mahi

nicely written blog.

Collapse
himanshutiwari15 profile image
Himanshu Tiwari ๐ŸŒผ Author

thanks, dude, glad it helped