но не пойму, как 4 блок перенести в 3 колонку сначала?
Использовал данные стили, но 4 блок был на месте 5, и последующие не заполняли свободные ячейки
.box:nth-child(3n) {
grid-column: span 2
}
.box:nth-child(5n + 4) {
grid-column: span 2;
}
грид не такой кроссбраузерный как float
(min-width: 1024px)
(max-width: 1023px)
:root{
font-size: 62.5%
}
body { font-size: 1.4rem; /* 14px */ }
h1 { font-size: 3.2rem; /* 32px */ }
@function toRem($px) {
/* 16px – это значение шрифта по умолчанию в большинстве агентов */
@return $px / 16px * 1rem;
}
body { font-size: toRem(14px); }
h1 { font-size: toRem(32px); }
const select = document.querySelector('select');// Берем первый селект на странице
select.addEventListener('change', () => {
switch (select.value) {
case 1:
select.style.border = '1px solid red';
break;
case 2:
select.style.border = '1px solid green';
break;
case 3:
select.style.border = '1px solid blue';
break;
}
})
document.querySelectorAll('select').forEach(select => {
select.addEventListener('change', () => {
switch (select.value) {
case 1:
select.style.border = '1px solid red';
break;
case 2:
select.style.border = '1px solid green';
break;
case 3:
select.style.border = '1px solid blue';
break;
}
})
})
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
...
</div>
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.item:nth-child(3n + 3) {
grid-column: span 2;
}