Сжатие элементов сетки, как сгибать элементы в CSS - PullRequest
Новая
       25

Сжатие элементов сетки, как сгибать элементы в CSS

0 голосов
/ 21 октября 2018

Можно ли сжимать элементы сетки точно так же, как элементы flex в css?

Элементы сетки 

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.child {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 3px solid #a07;
}
<div class="container">
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
</div>

jsfiddle

Гибкие элементы 

.container {
  display: flex;
  margin-left: -10px;
  flex-flow: row wrap;
}

.child {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 3px solid #a07;
  flex: 200px 1 1;
  margin-left: 10px;
  margin-bottom: 10px;
}
<div class="container">
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
</div>

jsfiddle

В двух словах у меня может быть следующее расположение элементов с изгибом выше:

введите описание изображения здесь

Пока я не могу добиться того же поведения с помощью компоновки сетки.Компоновка Flex позволяет сжимать элементы на маленьком экране, а компоновка сетки - нет.В то же время я хотел бы сохранить поведение, при котором элемент будет перемещаться на следующую строку с другим элементом, только когда после такого размещения каждый из них будет не короче определенного размера (в нашем случае 200 пикселей).

Я использую сетку, поскольку она позволяет сохранить инвариант, что ширина всех дочерних элементов будет одинаковой.При использовании гибкого макета последний элемент будет растянут на всю строку, если он будет один на линии.

1 Ответ

0 голосов
/ 22 октября 2018

Одним из решений является указание max-width для дочернего элемента, опирающегося на единицу окна просмотра, поскольку процентные значения относятся к размеру дорожки, определенной minmax(), и не могут использоваться.Это решение не является универсальным, и вам необходимо настроить значение в зависимости от каждой ситуации.

В вашем случае, например, мы можем использовать 100vw, поскольку контейнер является единственным элементом в теле и принимаетвся ширина: 

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.child {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 3px solid #a07;
  max-width:100vw;
  box-sizing:border-box; /* Don't forget this !*/
}

body {
  margin:0;
}
<div class="container">
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
</div>

В случае наличия большего количества элемента или некоторого отступа / поля необходимо учитывать их в расчете max-width: 

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.child {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 3px solid #a07;
  max-width:calc(100vw - 40px); /*we remove the body margin*/
  box-sizing:border-box; 
}

body {
  margin:0 20px; 
}
<div class="container">
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
</div>

Как будто у нас больше нет 2 ограничений, а 3:

  • Минимальный размер ячейки сетки 200px
  • Ячейка сетки заполняет оставшееся пространство
  • Максимальный размер элемента внутри ячейки сетки определяется размером экрана. (ограничение усадки, которое мы пропустили)
...