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>
I hope you have learned something 👍
haha found my grammatical mistakes then comment them down
Top comments (4)
Love this approach to learning Grid, great work!
Thanks, glad you liked
nicely written blog.
thanks, dude, glad it helped