Блог

Главная - Вопросы по программированию - CSS — сетка с ячейками соотношения сторон для заполнения высоты

CSS — сетка с ячейками соотношения сторон для заполнения высоты

#html #css #css-grid #aspect-ratio

Вопрос:

Я хочу создать сетку css с фиксированным размером (28×20), которая заполняет всю доступную высоту, сохраняя при этом одинаковое соотношение сторон ячеек (1/1).

См. Упрощенный пример ниже. В идеале эта сетка 3×3 заполняла бы высоту и имела бы пустое пространство с правой стороны, но вместо этого она заполняет ширину и создает вертикальную полосу прокрутки.

Это должно работать только в последних сборках chromium (приложение Electron)

Предложения?

 .ctnr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1px;
  height: 100%;
  overflow:hidden;
}


.cell {
  background: orange;
  aspect-ratio:1;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
} 
 <div class="ctnr">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>

Комментарии:

1. Если вы хотите, чтобы ваша сетка была ориентирована на столбцы, используйте grid-auto-flow: column;

2. не нарушит ли это требование к фиксированным размерам? Например, если я применю его к приведенному выше примеру вместо шаблонов сетки, он выложит все 9 квадратов в один столбец

3. Это не замена шаблонам сетки, но их следует добавить в дополнение к уже имеющимся стилям. Тем не менее, это не решает вашу проблему с размером

Ответ №1:

используйте grid-template-columns: repeat( auto-fit, minmax(250px, 300px) ); и распределяйте ценности в соответствии с вашими потребностями

Комментарии:

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

2. вы пробовали уменьшить минимальное значение и увеличить максимальное значение?

Ответ №2:

Я попробовал несколько идей. Мое решение, вероятно, не идеально, но, возможно, оно вам поможет. Вы можете использовать vh в своей сетке в качестве основы для определения размеров. Поэтому, если нам нужно 3 квадрата на столбец, мы можем установить 33vh для столбцов и строк. Также добавьте grid-auto-flow: column; , чтобы сделать его ориентированным на столбец.

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 100vh;
  display: grid;
  gap: 1px;
  /* Maybe use something like calc(100vh / 3 - 1px) for more precise calculation */
  grid-template-columns: repeat(auto-fill, 33vh);
  grid-template-rows: repeat(auto-fill, 33vh);
  grid-auto-flow: column;
}

.cell {
  background-color: #121212;
} 
 <div class="container">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>
Метки: