Skip to content

Commit 9fad50e

Browse files
AKSHITHA-CHILUKAAKSHITHA-CHILUKA
authored
Create css-grid.md
1 parent ad534ec commit 9fad50e

File tree

1 file changed

+177
-0
lines changed

1 file changed

+177
-0
lines changed

‎docs/CSS/css-grid.md

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
# CSS Grid
2+
3+
## Introduction
4+
CSS Grid Layout is a powerful tool for creating two-dimensional layouts on the web. It allows you to design complex web layouts with rows and columns, making it easier to create responsive designs.
5+
6+
## Basic Concepts
7+
8+
### Grid Container
9+
A grid container is an element with `display: grid`. The children of this container become grid items.
10+
11+
```css
12+
.container {
13+
display: grid;
14+
}
15+
```
16+
17+
### Grid Items
18+
The direct children of a grid container automatically become grid items.
19+
20+
```html
21+
<div class="container">
22+
<div class="item">Item 1</div>
23+
<div class="item">Item 2</div>
24+
<div class="item">Item 3</div>
25+
</div>
26+
```
27+
## Grid Properties
28+
### Container Properties
29+
#### grid-template-columns and grid-template-rows
30+
31+
Defines the columns and rows of the grid.
32+
33+
```css
34+
.container {
35+
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
36+
grid-template-rows: 100px 200px; /* 2 rows with specific heights */
37+
}
38+
```
39+
40+
#### grid-gap
41+
42+
Defines the gaps (gutters) between rows and columns.
43+
```css
44+
.container {
45+
grid-gap: 10px; /* gap between rows and columns */
46+
}
47+
```
48+
49+
#### grid-template-areas
50+
51+
Defines named grid areas.
52+
53+
54+
```css
55+
.container {
56+
grid-template-areas:
57+
'header header header'
58+
'sidebar content content'
59+
'footer footer footer';
60+
}
61+
```
62+
## Item Properties
63+
#### grid-column and grid-row
64+
65+
Specifies the start and end lines for the item.
66+
```css
67+
.item {
68+
grid-column: 1 / 3; /* spans from column line 1 to 3 */
69+
grid-row: 1 / 2; /* spans from row line 1 to 2 */
70+
}
71+
```
72+
73+
#### grid-area
74+
75+
Specifies a grid item’s size and location within the grid by referencing the name of a grid area.
76+
77+
```css
78+
.item {
79+
grid-area: header;
80+
}
81+
```
82+
# Examples
83+
## Basic Grid Layout
84+
```html
85+
<!DOCTYPE html>
86+
<html lang="en">
87+
<head>
88+
<meta charset="UTF-8">
89+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
90+
<style>
91+
.container {
92+
display: grid;
93+
grid-template-columns: 1fr 2fr 1fr;
94+
grid-gap: 10px;
95+
background-color: #f4f4f4;
96+
padding: 20px;
97+
}
98+
.item {
99+
background-color: #61dafb;
100+
padding: 20px;
101+
font-size: 20px;
102+
color: white;
103+
border-radius: 5px;
104+
}
105+
</style>
106+
</head>
107+
<body>
108+
<div class="container">
109+
<div class="item">Item 1</div>
110+
<div class="item">Item 2</div>
111+
<div class="item">Item 3</div>
112+
<div class="item">Item 4</div>
113+
<div class="item">Item 5</div>
114+
</div>
115+
</body>
116+
</html>
117+
```
118+
119+
## Grid Layout with Areas
120+
121+
```html
122+
<!DOCTYPE html>
123+
<html lang="en">
124+
<head>
125+
<meta charset="UTF-8">
126+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
127+
<style>
128+
.container {
129+
display: grid;
130+
grid-template-areas:
131+
'header header header'
132+
'sidebar content content'
133+
'footer footer footer';
134+
grid-gap: 10px;
135+
background-color: #f4f4f4;
136+
padding: 20px;
137+
}
138+
.header {
139+
grid-area: header;
140+
background-color: #61dafb;
141+
}
142+
.sidebar {
143+
grid-area: sidebar;
144+
background-color: #ff6347;
145+
}
146+
.content {
147+
grid-area: content;
148+
background-color: #ffa500;
149+
}
150+
.footer {
151+
grid-area: footer;
152+
background-color: #32cd32;
153+
}
154+
.item {
155+
padding: 20px;
156+
font-size: 20px;
157+
color: white;
158+
border-radius: 5px;
159+
}
160+
</style>
161+
</head>
162+
<body>
163+
<div class="container">
164+
<div class="header item">Header</div>
165+
<div class="sidebar item">Sidebar</div>
166+
<div class="content item">Content</div>
167+
<div class="footer item">Footer</div>
168+
</div>
169+
</body>
170+
</html>
171+
```
172+
173+
# Conclusion
174+
CSS Grid is a powerful tool for creating complex and responsive web layouts. By understanding its various properties, you can design flexible and efficient layouts with ease.
175+
176+
177+
This guide covers the essential properties, concepts, and examples to help users understand and apply CSS Grid in their projects.

0 commit comments

Comments
 (0)