Skip to content

Commit 10af35d

Browse files
LaaouatniLaaouatni
committed
6 CSS Grid - FREECODECAMP
1 parent 57db68b commit 10af35d

File tree

45 files changed

+1088
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1088
-0
lines changed

‎6-CSS-Grid/167-Livello-FreeCodeCamp(0)/167(0)Create-Your-First-CSS-Grid.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<style>
2+
.d1 {
3+
background: LightSkyBlue;
4+
}
5+
6+
.d2 {
7+
background: LightSalmon;
8+
}
9+
10+
.d3 {
11+
background: PaleTurquoise;
12+
}
13+
14+
.d4 {
15+
background: LightPink;
16+
}
17+
18+
.d5 {
19+
background: PaleGreen;
20+
}
21+
22+
.container {
23+
font-size: 40px;
24+
width: 100%;
25+
background: LightGray;
26+
/* Only change code below this line */
27+
display: grid;
28+
/* Only change code above this line */
29+
}
30+
</style>
31+
32+
<div class="container">
33+
<div class="d1">1</div>
34+
<div class="d2">2</div>
35+
<div class="d3">3</div>
36+
<div class="d4">4</div>
37+
<div class="d5">5</div>
38+
</div>
39+
40+
<!--
41+
Create Your First CSS Grid Turn any HTML element into a grid container by setting its display property to grid. This gives you the ability to use all the other properties associated with CSS Grid. Note: In CSS Grid, the parent element is referred to as
42+
the container and its children are called items. Change the display of the div with the container class to grid. -->

‎6-CSS-Grid/167-Livello-FreeCodeCamp(0)/6-167-0.png‎

242 KB
Loading

‎6-CSS-Grid/168-Livello-FreeCodeCamp(1)/168(1)Add-Columns-with-grid-template-columns.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<style>
2+
.d1 {
3+
background: LightSkyBlue;
4+
}
5+
6+
.d2 {
7+
background: LightSalmon;
8+
}
9+
10+
.d3 {
11+
background: PaleTurquoise;
12+
}
13+
14+
.d4 {
15+
background: LightPink;
16+
}
17+
18+
.d5 {
19+
background: PaleGreen;
20+
}
21+
22+
.container {
23+
font-size: 40px;
24+
width: 100%;
25+
background: LightGray;
26+
display: grid;
27+
/* Only change code below this line */
28+
grid-template-columns: 100px 100px 100px;
29+
/* Only change code above this line */
30+
}
31+
</style>
32+
33+
<div class="container">
34+
<div class="d1">1</div>
35+
<div class="d2">2</div>
36+
<div class="d3">3</div>
37+
<div class="d4">4</div>
38+
<div class="d5">5</div>
39+
</div>
40+
<!--
41+
Add Columns with grid-template-columns Simply creating a grid element doesn't get you very far. You need to define the structure of the grid as well. To add some columns to the grid, use the grid-template-columns property on a grid container as demonstrated
42+
below: .container { display: grid; grid-template-columns: 50px 50px; } This will give your grid two columns that are each 50px wide. The number of parameters given to the grid-template-columns property indicates the number of columns in the grid, and
43+
the value of each parameter indicates the width of each column. Give the grid container three columns that are each 100px wide. -->

‎6-CSS-Grid/168-Livello-FreeCodeCamp(1)/6-168-1.png‎

273 KB
Loading

‎6-CSS-Grid/169-Livello-FreeCodeCamp(2)/169(2)Add-Rows-with-grid-template-rows.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<style>
2+
.d1 {
3+
background: LightSkyBlue;
4+
}
5+
6+
.d2 {
7+
background: LightSalmon;
8+
}
9+
10+
.d3 {
11+
background: PaleTurquoise;
12+
}
13+
14+
.d4 {
15+
background: LightPink;
16+
}
17+
18+
.d5 {
19+
background: PaleGreen;
20+
}
21+
22+
.container {
23+
font-size: 40px;
24+
width: 100%;
25+
background: LightGray;
26+
display: grid;
27+
grid-template-columns: 100px 100px 100px;
28+
/* Only change code below this line */
29+
grid-template-rows: 50px 50px;
30+
/* Only change code above this line */
31+
}
32+
</style>
33+
34+
<div class="container">
35+
<div class="d1">1</div>
36+
<div class="d2">2</div>
37+
<div class="d3">3</div>
38+
<div class="d4">4</div>
39+
<div class="d5">5</div>
40+
</div>
41+
42+
<!--
43+
Add Rows with grid-template-rows The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use the grid-template-rows property in the same way you used grid-template-columns in the previous challenge.
44+
Add two rows to the grid that are 50px tall each. -->

‎6-CSS-Grid/169-Livello-FreeCodeCamp(2)/6-169-2.png‎

246 KB
Loading

‎6-CSS-Grid/170-Livello-FreeCodeCamp(3)/170(3)Use-CSS-Grid-units-to-Change-the-Size-of-Columns-and-Rows.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<style>
2+
.d1 {
3+
background: LightSkyBlue;
4+
}
5+
6+
.d2 {
7+
background: LightSalmon;
8+
}
9+
10+
.d3 {
11+
background: PaleTurquoise;
12+
}
13+
14+
.d4 {
15+
background: LightPink;
16+
}
17+
18+
.d5 {
19+
background: PaleGreen;
20+
}
21+
22+
.container {
23+
font-size: 40px;
24+
width: 100%;
25+
background: LightGray;
26+
display: grid;
27+
/* Only change code below this line */
28+
grid-template-columns: 1fr 100px 2fr;
29+
/* Only change code above this line */
30+
grid-template-rows: 50px 50px;
31+
}
32+
</style>
33+
34+
<div class="container">
35+
<div class="d1">1</div>
36+
<div class="d2">2</div>
37+
<div class="d3">3</div>
38+
<div class="d4">4</div>
39+
<div class="d5">5</div>
40+
</div>
41+
42+
<!-- Use CSS Grid units to Change the Size of Columns and Rows You can use absolute and relative units like px and em in CSS Grid to define the size of rows and columns. You can use these as well: fr: sets the column or row to a fraction of the available space,
43+
auto: sets the column or row to the width or height of its content automatically, %: adjusts the column or row to the percent width of its container. Here's the code that generates the output in the preview: grid-template-columns: auto 50px 10% 2fr 1fr;
44+
This snippet creates five columns. The first column is as wide as its content, the second column is 50px, the third column is 10% of its container, and for the last two columns; the remaining space is divided into three sections, two are allocated for
45+
the fourth column, and one for the fifth. Make a grid with three columns whose widths are as follows: 1fr, 100px, and 2fr. -->

‎6-CSS-Grid/170-Livello-FreeCodeCamp(3)/6-170-3.png‎

285 KB
Loading

‎6-CSS-Grid/171-Livello-FreeCodeCamp(4)/171(4)Create-a-Column-Gap-Using-grid-column-gap.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<style>
2+
.d1 {
3+
background: LightSkyBlue;
4+
}
5+
6+
.d2 {
7+
background: LightSalmon;
8+
}
9+
10+
.d3 {
11+
background: PaleTurquoise;
12+
}
13+
14+
.d4 {
15+
background: LightPink;
16+
}
17+
18+
.d5 {
19+
background: PaleGreen;
20+
}
21+
22+
.container {
23+
font-size: 40px;
24+
min-height: 300px;
25+
width: 100%;
26+
background: LightGray;
27+
display: grid;
28+
grid-template-columns: 1fr 1fr 1fr;
29+
grid-template-rows: 1fr 1fr 1fr;
30+
/* Only change code below this line */
31+
grid-column-gap: 20px;
32+
/* Only change code above this line */
33+
}
34+
</style>
35+
36+
<div class="container">
37+
<div class="d1">1</div>
38+
<div class="d2">2</div>
39+
<div class="d3">3</div>
40+
<div class="d4">4</div>
41+
<div class="d5">5</div>
42+
</div>
43+
44+
<!-- Create a Column Gap Using grid-column-gap So far in the grids you have created, the columns have all been tight up against each other. Sometimes you want a gap in between the columns. To add a gap between the columns, use the grid-column-gap property
45+
like this: grid-column-gap: 10px; This creates 10px of empty space between all of our columns. Give the columns in the grid a 20px gap. -->

‎6-CSS-Grid/171-Livello-FreeCodeCamp(4)/6-171-4.png‎

260 KB
Loading

0 commit comments

Comments
 (0)