IT-образование
- 1 ответ
- 0 вопросов
1
Вклад в тег
<style>
.div-wrapper {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 2fr 1fr 1fr;
grid-auto-rows: 100px;
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-template-areas:
"d1 d1 d2 d4"
"d1 d1 d3 d4"
"d1 d1 d5 d6"
"d7 d10 d8 d8"
"d7 d9 d8 d8";
}
.div {
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.div-1 {
grid-area: d1;
}
.div-2 {
grid-area: d2;
}
.div-3 {
grid-area: d3;
}
.div-4 {
grid-area: d4;
}
.div-5 {
grid-area: d5;
}
.div-6 {
grid-area: d6;
}
.div-7 {
grid-area: d7;
}
.div-8 {
grid-area: d8;
}
.div-9 {
grid-area: d9;
}
.div-10 {
grid-area: d10;
}
</style>
<section class="div-wrapper">
<div class="div div-1">1</div>
<div class="div div-2">2</div>
<div class="div div-3">3</div>
<div class="div div-4">4</div>
<div class="div div-5">5</div>
<div class="div div-6">6</div>
<div class="div div-7">7</div>
<div class="div div-8">8</div>
<div class="div div-9">9</div>
<div class="div div-10">10</div>
</section>