Предотвращение пустых мест на четном количестве ячеек

Я создаю макет сетки, и мне нужна помощь. Вот описание требований.

  1. Каждая ячейка в сетке имеет минимальный фиксированный размер (120 пикселей).
  2. Всегда будет четное количество ячеек.

Я бы хотел, чтобы сетка заполнила все пустые места.

Моя текущая реализация работает с небольшими размерами контейнеров, но переполнение строк не работает с большими размерами.

// Cells cannot be smaller than this value.
$minimum-cell-width: 120px;

.container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($minimum-cell-width, 1fr));
  width: 600px;
}

Это дает мне сетку с 4 ячейками в первой строке и 2 ячейками во второй строке. Мне нужно, чтобы в каждой строке было по 3 ячейки, чтобы заполнить все пустые места.

Я бы не стал увеличивать переменную $minimum-cell-width (хотя она исправляет).

См. Следующий код для получения дополнительных кодов и подробных примеров:

https://codepen.io/surjikal/pen/XxxgNx

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
63
1

Ответы 1

Как элементы сетки должны знать, сколько элементов вы хотите в строке?

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

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

Макет работает в ваших меньших контейнерах, потому что ширина этих контейнеров хорошо совпадает с минимальной шириной, которую вы установили на дорожках, чтобы ограничить количество элементов в строке равным числом. Но если вы уменьшите минимальную ширину со 120 пикселей до, скажем, 50 пикселей, вы обнаружите ту же проблему, что и с большими контейнерами.

Чтобы ваш макет работал, вам необходимо определить ширину контейнера (как вы уже сделали) а также ширину элементов. (Вы можете сделать это без изменения переменной минимальной ширины.)

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.container-widest {
  grid-template-columns: repeat(auto-fit, minmax(120px, 25%)); /* new */
  width: 700px;
  background-color: rgba(200, 0, 0, 0.3);
}

.container-wide {
  grid-template-columns: repeat(auto-fit, minmax(120px, 200px));  /* new */
  width: 600px;
  background-color: rgba(200, 0, 0, 0.3);
}

.container-narrow {
  width: 400px;
  background-color: rgba(0, 200, 0, 0.4);
}

.container-narrower {
  width: 300px;
  background-color: rgba(0, 200, 0, 0.4);
}

/* style stuff */
html {
  padding: 20px;
  font-family: monospace;
}

.container {
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 3px;
}

.cell {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom-width: 2px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 26px;
  padding: 40px;
  text-align: center;
  font-weight: 1;
  border-radius: 3px;
}

p {
  text-align: center;
  padding-top: 50px;
}
<p>This should be 4 cells per row, to fill all blank spaces</p>
<div class = "container container-widest">
    <div class = "cell">1</div>
    <div class = "cell">2</div>
    <div class = "cell">3</div>
    <div class = "cell">4</div>
    <div class = "cell">5</div>
    <div class = "cell">6</div>
    <div class = "cell">7</div>
    <div class = "cell">8</div>
</div>

<p>This should be 3 cells per row</p>
<div class = "container container-wide">
    <div class = "cell">1</div>
    <div class = "cell">2</div>
    <div class = "cell">3</div>
    <div class = "cell">4</div>
    <div class = "cell">5</div>
    <div class = "cell">6</div>
</div>

<p>This one works great</p>
<div class = "container container-narrow">
    <div class = "cell">1</div>
    <div class = "cell">2</div>
    <div class = "cell">3</div>
    <div class = "cell">4</div>
    <div class = "cell">5</div>
    <div class = "cell">6</div>
</div>

<p>This also works great!</p>
<div class = "container container-narrower">
    <div class = "cell">1</div>
    <div class = "cell">2</div>
    <div class = "cell">3</div>
    <div class = "cell">4</div>
    <div class = "cell">5</div>
    <div class = "cell">6</div>
</div>

Мне все еще нужно просмотреть ваш ответ, но чтобы ответить на ваш первый вопрос .. Теоретически, алгоритм имеет выбор между упаковкой 3 ячеек в строку или 4 + 2. Оба решения приемлемы на основе ограничений в моем исходном css ( Я думаю, 1-2 ячейки в строке тоже приемлемы ..). Я надеялся, что смогу добавить дополнительное ограничение, которое заставит алгоритм предпочитать метод упаковки из трех ячеек. Я заранее не знаю, сколько ячеек у меня будет, только то, что их будет четное число.

surjikal 24.10.2018 00:38

Пустые места представляют собой незанятые ячейки на существующих дорожках. То, что вы пытаетесь выполнить, не сработает, потому что вы не можете заставить элемент сетки вторгаться в другую дорожку, не установив команду (в отличие от flexbox, где «дорожек» не существует). Вот почему важна точка останова, в которой может произойти оборачивание.

Michael Benjamin 24.10.2018 00:40

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

surjikal 24.10.2018 01:15

Ага. С flex вы столкнетесь с той же проблемой. Элементы сетки / гибкости оборачиваются там, где им подсказывает математика. Если ваша цель отклоняется от математического расчета, вам нужно ввести другое правило.

Michael Benjamin 24.10.2018 01:17

Другие вопросы по теме