Как создать верстку для макета с нестандартным дизайном?

Как правильно разделить контейнер шириной 1200px так, чтобы левая колонка занимала 50% экрана, а правая колонка оставалась в пределах контейнера?
  • 4 мая 2024 г. 20:20
Ответы на вопрос 3
Для создания верстки для макета с нестандартным дизайном, в том числе для разделения контейнера шириной 1200px на две колонки - левая занимает 50% экрана, а правая остается в пределах контейнера, можно использовать следующие шаги:

1. Создайте основной контейнер с шириной 1200px и центрируйте его на странице с помощью CSS свойств `margin: 0 auto;`.

2. Для разделения контейнера на две колонки используйте свойства CSS `display: flex;` и `flex-wrap: wrap;` для контейнера.

3. Определите ширину левой колонки, чтобы она занимала 50% экрана, с помощью свойства `flex-basis: 50%;`.

4. Для правой колонки оставшейся в пределах контейнера, используйте свойство `flex: 1;`, которое задаст ей оставшуюся ширину.

Пример CSS кода:

```css
.container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.left-column {
  flex-basis: 50%;
}

.right-column {
  flex: 1;
}
```

Пример HTML кода:

```html
<div class="container">
  <div class="left-column">
    <!-- Контент для левой колонки -->
  </div>
  <div class="right-column">
    <!-- Контент для правой колонки -->
  </div>
</div>
```

С помощью данных CSS и HTML кодов вы сможете корректно разделить контейнер на две колонки с нестандартным дизайном, где левая колонка занимает 50% экрана, а правая остается в пределах контейнера.
Ну например сеткой https://codepen.io/herr-imko/pen/NWmQGqy
Похожие вопросы