1.- Display Grid

1
2
3

.grid-1{
display: grid;
}

2.- Grid Template Columns

1
2
3
4
5
6

.grid-2{
display: grid;
grid-template-columns: 200px 200px 200px;
}

3.- Grid Template Rows

1
2
3
4
5
6

.grid-3{
display: grid;
grid-template-rows: 300px 300px 300px;
}
.grid-3 .box:nth-child(2){
grid-row-start: 1;
grid-row-end: 2;
}

4.- Span

1
2
3
4
5
6

.grid-4{
display: grid;
grid-template-columns: repeat(3, 300px);
grid-template-rows: repeat(2, 300px);
}

5.- Grid Shorthand

1
2
3
4
5
6

.grid-4{
display: grid;
grid-template-columns: repeat(3, 300px);
grid-template-rows: repeat(2, 300px);
}
.grid-4 .box:nth-child(2){
background-color: #00b74f;
grid-column: 2 / span 2;
grid-row: 1 / span 2;
}

6.- Grid Autoflow

1
2
3
4
5
6

.grid-6{
display: grid;
grid: repeat(2, 300px) / repeat(3, 300px);
grid-auto-flow: dense;
}
.grid-6 .box:nth-child(2){
grid-column: 1 / 2;
}

7.- Grid Fr y Grid Repeat

1
2
3
4
5
6

.grid-7{
display: grid;
grid: repeat(2, 1fr) / 2fr repeat(2, 1fr);
}

8.- Grid Gap

1
2
3
4
5
6

.grid-8{
display: grid;
grid: repeat(2, 1fr) / repeat(3, 1fr);
gap: 4rem 4rem ;
}

9.- Grid Areas

Header
Nav
Principal
Sidebar
Footer

.grid-9{
display: grid;
height: 120rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 25rem 10rem 60rem 25rem;
grid-template-areas: "header header header"
"nav nav nav"
"principal principal sidebar"
"footer footer footer"
;
}
.grid-9 .box:nth-child(1){
grid-area: header;
}
.grid-9 .box:nth-child(2){
grid-area: nav;
}
.grid-9 .box:nth-child(3){
grid-area: principal;
}
.grid-9 .box:nth-child(4){
grid-area: sidebar;
}
.grid-9 .box:nth-child(5){
grid-area: footer;
}

10.- Grid Template

Header
Nav
Principal
Sidebar
Footer

.grid-10{
display: grid;
height: 120rem;
grid-template-areas: "header header header" 25rem
"nav nav nav" 10rem
"principal principal sidebar" 60rem
"footer footer footer" 25rem / 1fr 1fr 1fr
;
} .grid-10 .box:nth-child(1){
grid-area: header;
}
.grid-10 .box:nth-child(2){
grid-area: nav;
}
.grid-10 .box:nth-child(3){
grid-area: principal;
}
.grid-10 .box:nth-child(4){
grid-area: sidebar;
}
.grid-10 .box:nth-child(5){
grid-area: footer;
}

11.- Alineación Grid

1
2
3
4
5
6

.grid-11{
display: grid;
grid-template-columns: repeat(6, 1fr);
height: 30rem;
place-content: end;
}

12.- Grid Autofill y Autofit

1
2
3

.grid-12{
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
}

12.1 Autofit

1
2
3

.grid-12-1{
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
}

12.2 Autofit MinMax

1
2
3

.grid-12-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}