63 lines
753 B
CSS
63 lines
753 B
CSS
html {
|
|
background-color: grey;
|
|
}
|
|
|
|
.container {
|
|
background-color: red;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-auto-rows: minmax(100px, auto);
|
|
gap: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.block {
|
|
border: solid 5px orange;
|
|
border-radius: 25px;
|
|
}
|
|
|
|
.one {
|
|
grid-column: 2 / 4;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.two {
|
|
grid-column: 2 / 4;
|
|
grid-row: 2 / 5;
|
|
}
|
|
|
|
.three {
|
|
grid-column: 1;
|
|
grid-row: 2 / 5;
|
|
}
|
|
|
|
.four {
|
|
grid-column: 4;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.five {
|
|
grid-column: 4;
|
|
grid-row: 3;
|
|
}
|
|
|
|
.six {
|
|
grid-column: 4;
|
|
grid-row: 4;
|
|
}
|
|
|
|
.seven {
|
|
grid-column: 2 / 4;
|
|
grid-row: 5 / 7;
|
|
}
|
|
|
|
.eight {
|
|
grid-column: 2;
|
|
grid-row: 7 / 8;
|
|
}
|
|
|
|
.nine {
|
|
grid-column: 3;
|
|
grid-row: 7 / 8;
|
|
}
|