Skip to content

Commit 7751dad

Browse files
Himanshutiwari15Himanshutiwari15
authored
Add files via upload
1 parent 29aae81 commit 7751dad

File tree

1 file changed

+167
-0
lines changed

1 file changed

+167
-0
lines changed

‎cssgrid.html

+167
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<!--
2+
How to read
3+
Read from top to down and read with comments also comment and uncomment accordingly
4+
as you try different things.
5+
I hope you have prior knowledge of CSS basics so that you don't act noob here ;) LOL -->
6+
7+
<!--
8+
The whole HTML is full of
9+
GOLDEN WORDS, so do read them as soon as they encounter -->
10+
11+
<!DOCTYPE html>
12+
<html lang="en">
13+
14+
<head>
15+
<meta charset="UTF-8">
16+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
17+
<title>CSS-GRID-SYSTEM</title>
18+
<style>
19+
.container {
20+
display: grid;
21+
/*
22+
GOLDEN WORDS : 1
23+
So when we start that is when we begin we begin by making the main container as display: grid;
24+
and that's really important thing to understand. After that using a very basic property that is
25+
grid-template-columns which takes number of columns and their width. The width can be in pixel
26+
or in fr... most commonly fr, fr divides the screen in columns..
27+
let's talk with example see GW :2 where fr is written */
28+
29+
/* grid-template-columns: 300px 120px 120px;
30+
grid-template-columns: 120px auto 120px; */
31+
32+
/*
33+
GOLDEN WORDS : 2
34+
here in the example bellow the screen is divided in 2+4+2 columns and the first column is of
35+
2 columns combined together and second column is of 4 columns combined together.... this is
36+
how it goes */
37+
38+
/* grid-template-columns: 2fr 4fr 2fr; */
39+
40+
/* Repeat actually repeats the number of columns or rows , used accordingly
41+
and i.e with width of auto or 200px in this case */
42+
43+
/* grid-template-columns: repeat(4, auto); */
44+
45+
/* GridGap is simple it's like margin for grids try them you will understand */
46+
47+
grid-gap: 1rem;
48+
/* grid-column-gap: 2rem;
49+
grid-row-gap: 3rem; */
50+
51+
/* grid-template-rows: 20px 20px 20px ; */
52+
/* grid-template-rows: repeat(4, auto); */
53+
54+
/*
55+
GOLDEN WORDS : 3
56+
So you might have understood the above statement done for rows as similar was done for
57+
column but what is this auto rows property,
58+
i.e. for all the left rows as we made 9 items and in above statement we gave width to
59+
only 3 , so for rest of the others we can give width using this
60+
grid-auto-rows: _____; property
61+
try working with it for more explaination */
62+
63+
/* grid-auto-rows: 120px; */
64+
65+
/*
66+
GOLDEN WORDS : 4
67+
GTC or grid-template-columns: ___; can be used in a bit different way for auto-fit amd
68+
minmax property and basically it has a certain reason for that
69+
reason : repeat contains 2 parameters, number of rows or columns and size of them
70+
so here auto-fit is for number of columns i.e. it will adjust acordingly, to the
71+
screen and minmax property is for setting the minimum and maximum width of the item
72+
grids. Here 300px is minimum width and 1fr(fraction) is for maximum width i.e. for 1 .item
73+
on screen alone...
74+
try practcing this few times and you will understand this well
75+
few devs use media queries instead so we can use that as well
76+
*/
77+
78+
grid-template-columns: repeat(auto-fit , minmax(300px,1fr));
79+
80+
/* justify-content: center; */
81+
82+
83+
/*
84+
GOLDEN WORDS : 5
85+
A very poweful tool to make designes of a website is grid absolutely
86+
but the area tool in grid is something that makes it so so powerful
87+
88+
What we did is we created took 3 items from container div and gave them id's
89+
we then game them grid-area of anything relvant let's say a name (check below)
90+
after that in the container itself, we made the grid-template-areas: ___;
91+
this property uses those areas in a way to represent design
92+
93+
we use a 2D representation
94+
___________________________________________
95+
|__________|__________|_________|_________|
96+
|__________|__________|_________|_________|
97+
|__________|__________|_________|_________|
98+
99+
100+
i.e. every name is 1fr and we write it as we want it
101+
to appear, better way to understand this is to run the below code and see....
102+
*/
103+
grid-template-areas:
104+
"itemOne itemOne itemTwo itemTwo"
105+
"itemThree itemThree itemTwo itemTwo";
106+
107+
}
108+
109+
.item {
110+
/* height: 100px;
111+
width: 100px; */
112+
background-color: rgb(62, 210, 255);
113+
border: 2px solid black;
114+
/* margin: 3px; */
115+
padding: 10px 5px;
116+
}
117+
118+
/*
119+
GOLDEN WORDS : 4
120+
Doing this for learning the spanning
121+
So we selected the first item using first child selector property and now used
122+
grid-column for spanning through column and the way i did is by giving the start first and then
123+
a "/" with a span keyword and then end 2, results were item 1 now spans all the way to col-2
124+
the very same can be done with grid-row selector.
125+
Next 4 lines are another way of representation and nothing else
126+
This will be more clear only if you play more with this, try experimenting in the below statements
127+
*/
128+
.item:first-child {
129+
grid-column: 1 / span 2;
130+
grid-row: 1 / span 2;
131+
/* grid-column-start: 1;
132+
grid-column-end: 3;
133+
grid-row-start: 1;
134+
grid-row-end: 3; */
135+
}
136+
137+
/* Check them for golden word 5 */
138+
139+
#one{
140+
grid-area: itemOne;
141+
}
142+
#two{
143+
grid-area: itemTwo;
144+
}
145+
#three{
146+
grid-area: itemThree;
147+
}
148+
</style>
149+
</head>
150+
151+
<body>
152+
153+
<div class="container">
154+
<div id = one class="item">This is Item-1</div>
155+
<div id = two class="item">This is Item-2</div>
156+
<div id = three class="item">This is Item-3</div>
157+
<div class="item">This is Item-4</div>
158+
<div class="item">This is Item-5</div>
159+
<div class="item">This is Item-6</div>
160+
<div class="item">This is Item-7</div>
161+
<div class="item">This is Item-8</div>
162+
<div class="item">This is Item-9</div>
163+
</div>
164+
165+
</body>
166+
167+
</html>

0 commit comments

Comments
 (0)