Как с помощью CSS можно создать расположение блоков, как на этом изображении?

Question

Автандил

html , css

Как с помощью CSS можно создать расположение блоков, как на этом изображении?

Как можно реализовать размещение блоков: если у вас 2 блока в одной колонке, то они должны занимать одинаковое пространство по ширине; если у вас 3 блока, то первые два должны занимать половину ширины каждый, а третий должен перейти на новую строку и занимать всю доступную ширину?

1 мая 2024 г. 11:10

Ответы на вопрос 5

Похожие вопросы

Answer 1

Для создания такого расположения блоков можно использовать 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; /* третий блок занимает всю ширину на новой строке */
}
```

Оба примера позволят создать необходимое расположение блоков в зависимости от их количества.

Answer 2

Дефолтная ширина блока половина, а для <code>:nth-child(odd):last-child</code> полная. <a href="https://play.vuejs.org/#eNp9U8Fu2zAM/RVBwNAWqN2kQS9eOmAbetgO27Dt6Isj0TZTWRIk2XUW+N9HyU7WAmsvBslHPj6K9JF/tDYfeuAF33rh0AbmIfT2Q6mxs8YFdmQOajax2pmOXVDqxftSl1oY7QMTpteB3ceUy80VAdubmYXqyQnQWVUFII+xLWrbBxYOFu5L7irdQMlZh5q8dbSqkazbFZlD1hkJKtd9twNH0dSn5DOPxIEJVXmfAB0q1OAWcIGHrDaxDhnqWSSxnmqQZFH68ciQTdP2hgpm4sXa3jzTTa4PBxXN/NyMHWP+zjgJrmBrOzJvFEq2U5V4pFdgNIxrUBN2Z8cUsJWUqJtzZIrUeZTyGplHNYBLxS1g04aC3a0WNomeBB4KGk+RoKxWMAP73gesD1mUCppKBH0Xlkpho7PY0r+IP6EMbSR/l9ydGTOPf5LYWVVGoQTVxBqDSrLNLQntjDbeVgISKowyNIED+WK+Qoc2Ey0qeWmkvCpoC2H258mX9utV6k91dEPpxfk1D54GqbHJ995outFUELfeWVTgvtuAdIclL2aqiFVKmaevKRZcD9enuGhBPP4nvvdjjJX8hwMPbqCjPGOBtgh0OhF++PUNRrLPIJ1oryj7DfAn0Cr7qHFO+9RrSbKf5SW1X9KfRg/+2z+MtDZ/GioKjZlTyi85/X2f3xj9n9xNvkl19J58+gs5vU+Q" rel="nofollow">Типа так</a> .

Answer 3

Пока сидела, нашла сама решение xD <br/>

Answer 4

Используйте flex и nth-child на кастомизацию по порядку идущих элементов.

Answer 5

CSS: <br/> <pre><code class="css">.container {
    display: flex;
    width: 100%;
}

.container__column {
  flex: 1;
}</code></pre> <br/> Логика: <br/> - Если на бэке, то нужно проверять количество колонок, затем в контейнер вставлять необходимое количество этих колонок. В CSS выше прописано, чтобы колонки занимали равное пространство в контейнере, соответственно 2 займут по 50%, а 1 займет 100%. <br/> - Если на фронте, то без js никак (придется перемещать колонки между контейнерами), но логика с js аналогична пункту выше.