Как можно реализовать размещение блоков: если у вас 2 блока в одной колонке, то они должны занимать одинаковое пространство по ширине; если у вас 3 блока, то первые два должны занимать половину ширины каждый, а третий должен перейти на новую строку и занимать всю доступную ширину?
Для создания такого расположения блоков можно использовать flexbox или grid в CSS.
Пример с использованием flexbox:
```css
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 0 50%; /* каждый блок занимает половину ширины */
}
.item:nth-child(3) {
flex: 1 0 100%; /* третий блок занимает всю ширину на новой строке */
}
```
Пример с использованием grid:
```css
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50%, 1fr)); /* каждый блок занимает половину ширины */
}
.item:nth-child(3) {
grid-column: 1 / -1; /* третий блок занимает всю ширину на новой строке */
}
```
Оба примера позволят создать необходимое расположение блоков в зависимости от их количества.
Дефолтная ширина блока половина, а для :nth-child(odd):last-child полная. Типа так .
Пока сидела, нашла сама решение xD
Используйте flex и nth-child на кастомизацию по порядку идущих элементов.
CSS:
.container { display: flex; width: 100%; } .container__column { flex: 1; }
Логика:
- Если на бэке, то нужно проверять количество колонок, затем в контейнер вставлять необходимое количество этих колонок. В CSS выше прописано, чтобы колонки занимали равное пространство в контейнере, соответственно 2 займут по 50%, а 1 займет 100%.
- Если на фронте, то без js никак (придется перемещать колонки между контейнерами), но логика с js аналогична пункту выше.