Как создать сетку из двух столбцов, используя сетку CSS? - PullRequest
Новая
       4

Как создать сетку из двух столбцов, используя сетку CSS?

0 голосов
/ 29 октября 2019

Я пытаюсь создать довольно простую компоновку и хочу избежать использования поплавков. Мой упрощенный HTML-код выглядит следующим образом, и теперь я пытаюсь создать макет из двух столбцов, в котором я хотел бы, чтобы элемент B находился слева, а элементы A, C и D - справа (под каждым другом). Код, который я пытался использовать: 

.container {
  display: grid;
  grid-template-areas: 'left right';
}

.item-b {
  grid-area: left;
}

.item:not(.item-b) {
  grid-area: right;
}
<div class="container">
  <div class="item item-a">A</div>
  <div class="item item-b">B</div>
  <div class="item item-c">C</div>
  <div class="item item-d">D</div>
</div>

Но здесь предметы справа располагаются поверх друг друга. Есть ли способ поместить их под друг друга? Вот скрипка с тем же кодом: https://jsfiddle.net/b85h7g03/

Кроме того, когда вы смотрите на скрипку, почему элементы больше не на 50% больше контейнера?

(Кстати, причина, по которой я не размещаю элемент B над элементом A в своем HTML-коде, заключается в том, что на мобильном элементе B должно быть ниже элемента A)

Редактировать: я только что обновил свою скрипку: https://jsfiddle.net/b85h7g03/2/ Я забыл упомянуть, что пункт B имеет гибкую высоту и может быть очень длинным. Для справки: это макет, который я хочу, но без поплавков: https://jsfiddle.net/hLx3709v/

1 Ответ

0 голосов
/ 29 октября 2019

Здесь вы можете использовать flex 

<div class="container">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

CSS 

* {
  box-sizing: border-box;
}
body, html {
  margin: 0;
  padding: 0;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.children {
  width: calc(50% - 10px);
  margin: 5px;
  background: #D8D8D8;
  flex: 1;
}
.children:first-child {
  flex: 0 0 calc(100% - 10px);
  border: 2px solid #44C0FF;
}
...