<div class="price">
<div class="price__head"></div>
<div class="price__head">Пн-Пт</div>
<div class="price__head">Сб, Вс</div>
<div class="price__head">Один</div>
<div class="price__col">4 200</div>
<div class="price__col">5 000</div>
<div class="price__head">Двое</div>
<div class="price__col">5 800</div>
<div class="price__col">7 000</div>
<div class="price__head">Плюс 1</div>
<div class="price__col">2 800</div>
<div class="price__col">2 800</div>
<div class="price__head">Ребенок</div>
<div class="price__col">2 200</div>
<div class="price__col">2 200</div>
</div>
.price {
display: grid;
grid-template-columns: repeat(3, 1fr);
&__head,
&__col {
padding: 10px;
border: 1px solid red;
}
&__head {
font-weight: bold;
}
@media (min-width: 600px) {
grid-auto-flow: column;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: inherit;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.