Posted on Jan 19, 2021

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