CSS Grid: проблема с получением автоподбора - PullRequest
Новая
       27

CSS Grid: проблема с получением автоподбора

0 голосов
/ 07 ноября 2019

Приведенный ниже код правильно размещает 2 прямоугольных деления в одной строке, когда я повторяю 2 значения minmax. Он ломается, когда я вместо этого повторяю автозаполнение или автозаполнение.

Рабочий пример: https://codepen.io/seandez/pen/mddLwNp

<div id="outerContainer">
  <div class="longRectangle"></div>
  <div class="longRectangle"></div>
</div>

// css
body { background-color: black; }

.longRectangle {
  border: 2px dashed white;
  height: 100px;
  width: 400px;
}

#outerContainer {
  display: grid;
  border: 2px solid green;
  grid-template-columns: repeat(autofit, minmax(200px, 1fr));
}

У меня есть ширина экрана для 2 строк от 200 пикселей и полный кадр, чтобы поместиться на 1ряд. Почему по умолчанию используется 2 строки и какова правильная настройка?

Намерение здесь состоит в том, чтобы получить пример работы, который будет имитировать упаковку 2 элементов в вертикальный стек при небольшой ширине экрана. По умолчанию должно быть 2 столбца.

1 Ответ

2 голосов
/ 07 ноября 2019

его auto-fit не autofit. Вам также не нужно устанавливать ширину на .longRectangle, потому что это будет контролироваться сеткой. 

body { background-color: black; }

.longRectangle {
  border: 2px dashed white;
  height: 100px;
}

#outerContainer {
  display: grid;
  border: 2px solid green;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
<div id="outerContainer">
    <div class="longRectangle"></div>
    <div class="longRectangle"></div>
</div>
...