display grid
display: grid;
grid-template-columns: repeat(3, 30%);
grid-column-gap: 3.33%;
grid-row-gap: 60px;
3.67
6
.parent{
display: grid;
grid-template-columns: repeat(3, 250px);
/*
instead of writing 250px 250px 250px 3 times, we use repeat(number of columns, width) function
*/
grid-template-rows: repeat(3, 400px);
}
.parent .child-1{
grid-column: 2 / 4; /* Start at column 2 and end at column 3, 4 not counted [not inlcuded]*/
grid-row: span 2; /* take only 2 rows. can be written also as [grid-row: 1 / 3]*/
}
.parent .child-2{
grid-column: span 3;
grid-row: 1 / 3; /* 2 rows */
}
/*
ShortHand
grid-column: grid-column-start grid-column-end
grid-row: grid-row-start grid-row-end
Example:
*grid-column: 2 / 8; start at 2 and end at 8-1 = 7
=> grid-column-start = 2, grid-column-end = 7
*/
Thank you!
6
0
4
1
.container {
display: grid | inline-grid;
}
Thank you!
1
0
4
3
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
Thank you!
3
0
4.22
9
grid-template-columns: auto auto auto;
Thank you!
9
0
4
3
.item-a {
grid-column: 1;
grid-row: 1 / 3;
}
.item-e {
grid-column: 5;
grid-row: 1 / 3;
}
Thank you!
3
0
Are there any code examples left?
New code examples in category Other
-
Other 2023-03-27 22:50:10 how to select the whole line in vscode with keyboard shortcut
-
Other 2022-03-27 22:45:24 income of a web developer
-
Other 2022-03-27 22:35:01 \pyrcc_main.py: File does not exist 'resources.qrc'
-
Other 2022-03-27 22:30:45 rick roll embed code
-
Other 2022-03-27 22:20:08 Circuit_04_Potentiometer
-
Other 2022-03-27 22:20:05 iterative power
-
Other 2022-03-27 22:15:11 flutter run all
-
Other 2022-03-27 22:10:05 when is karlson release
-
Other 2022-03-27 22:10:02 wp .htaccess example
-
Other 2022-03-27 22:00:08 bash pause in file read line by line