You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.2 KiB
CSS
66 lines
1.2 KiB
CSS
6 years ago
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
font-size: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 1.6rem;
|
||
|
|
font-family: Helvetica;
|
||
|
|
}
|
||
|
|
|
||
|
|
#container {
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(4, 1fr);
|
||
|
|
/* grid-template-rows: repeat(4, 75px); */
|
||
|
|
grid-template-rows: 70px 1fr 1fr 1fr 1fr 140px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#item1 {
|
||
|
|
background-color: purple;
|
||
|
|
grid-column-start: 2;
|
||
|
|
grid-column-end: 4;
|
||
|
|
grid-row-start: 3;
|
||
|
|
grid-row-end: -2;
|
||
|
|
}
|
||
|
|
|
||
|
|
#item2 {
|
||
|
|
background-color: green;
|
||
|
|
grid-column: 3;
|
||
|
|
grid-row: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
Size can be any valid CSS unit px vw auto that enables a column or row to
|
||
|
|
stretch across available space
|
||
|
|
|
||
|
|
For example grid-template-column: 10px auto will create a 10px column followed
|
||
|
|
by a second column that fills all available space
|
||
|
|
|
||
|
|
fr is a fractional unit that causes any remaining space to be distributed
|
||
|
|
to columns or rows based on the ratios of these units
|
||
|
|
|
||
|
|
grid-template-rows: 1fr 2fr
|
||
|
|
|
||
|
|
creates two dynamic rows whith the second twice the size of the first,
|
||
|
|
|
||
|
|
grid-template-columns: 1fr 1fr 1fr 1fr
|
||
|
|
|
||
|
|
Defines four equal-sized columns
|
||
|
|
|
||
|
|
The `repeat()`function can be used to make the above less verbose repeat(4, 1fr)
|
||
|
|
|
||
|
|
|
||
|
|
*/
|