CSS сетка создает пустые столбцы с автоматическим заполнением

голоса
2

Фрагмент должен проиллюстрировать это довольно хорошо, но вот что я пытаюсь достичь:

Я хочу , чтобы мой первый ряд , чтобы быть grid-column: 1/-1, так что она охватывает сетку. Эта первая строка не всегда будет присутствовать.

Дополнительные столбцы в сетке должно быть , grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));я не знаю , сколько из них будет в любой момент времени.

Вот проблема: Когда охватывающий ряд присутствует , следующие столбцы ведут себя как auto-fill, не auto-fit . Фрагмент кода показывает , как наличие остовной колонны изменяет поведение последующих столбцов. На скриншоте дополнительные столбцы создается.

Вам нужно запустить сниппета полный экран, чтобы увидеть его в действии.

Любой совет будет принят во внимание. Спасибо!

неправильное

* {
  box-sizing: border-box;
}

.box__title {
  grid-column: 1 / -1;
}

.box > * {
  border: 1px solid gray;
  padding: 20px;
  margin: 0;
  background: white;
}

.box {
  border: 1px solid gray;
  background: #efefef;
  padding: 20px;
  margin: 20px;
  display: grid;
  grid-template-rows: auto;
  grid-gap: 20px;
}

.box--fit-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.box--fill-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.box--grid > * {
  border: 1px solid gray;
  padding: 20px;
  margin: 0;
}
<div class=box box--fit-grid>
  <h2 class=box__title>The top two boxes should use auto-fit</h2>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div> asdf sadf sa dfsa dfLorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
</div>

<div class=box box--fit-grid>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
</div>

<div class=box box--fill-grid>
  <h2 class=box__title>The bottom two boxes should use auto-fill</h2>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div> asdf sadf sa dfsa dfLorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
</div>

<div class=box box--fill-grid>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
</div>

Задан 07/11/2018 в 20:05
источник пользователем
На других языках...                            


1 ответов

голоса
1

При использовании auto-fitили auto-fill, факторов контейнеров во всех элементах сетки.

В макете есть четыре элемента сетки. Это создает четыре трека колонки, как показано в изображении:

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

Затем вы устанавливаете свой первый ряд, чтобы:

.box__title {
  grid-column: 1 / -1;
}

Это запирает в четырех столбцах. В результате, auto-fitне может растянуть трех последующих элементов на строке , так как четвертый столбец не разрушается.

Без первого пункта и grid-column: 1 / -1правила, есть только три столбца и auto-fit/ auto-fillработают , как и ожидалось.

Но , возможно , вам не нужно auto-fitили auto-fill. Алгоритм автоматического размещения сетки может быть достаточно , чтобы справиться с этой задачей.

.box__title {
  grid-column: 1 / -1;
}

.box--fit-grid {
  grid-template-columns: repeat(3, minmax(250px, 1fr));
}

.box {
  border: 1px solid gray;
  background: #efefef;
  padding: 20px;
  margin: 20px;
  display: grid;
  grid-template-rows: auto;
  grid-gap: 20px;
}

.box>* {
  border: 1px solid gray;
  padding: 20px;
  margin: 0;
  background: white;
}

.box--grid>* {
  border: 1px solid gray;
  padding: 20px;
  margin: 0;
}

* {
  box-sizing: border-box;
}
<div class="box box--fit-grid">
  <h2 class="box__title">The top two boxes should use auto-fit</h2>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis doloremque. Blanditiis.</div>
  <div> asdf sadf sa dfsa dfLorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
  <div>;kjlij lhuo . yul;i Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusantium fugiat laudantium explicabo enim amet earum quibusdam facere. Laudantium consequatur minima quod dignissimos consequuntur suscipit assumenda quas, blanditiis
    doloremque. Blanditiis.</div>
</div>

jsFiddle демо

Дополнительная информация:

Ответил 08/11/2018 в 00:55
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more