CSS сетка минимальный промежуток 3, и если объект класса является только объектом в строке сетки, заполните все элементы сетки в строке

Question

Я использую сетку CSS для разработки своего веб-приложения. Я хочу определить, что класс должен иметь минимальный grid-column интервал из 3 кадров и должен охватывать всю строку сетки, если соответствующий объект класса является единственным в соответствующем (в данном случае последней строке).

Определение сетки

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, auto));
  grid-template-rows: 1fr min-content;
  grid-gap: 50px;

}

Соответствующие определения

.overalldata {
  grid-column: auto / span 3;
}

.clustergraph {
  grid-column: auto / span 6;
  justify-items: center;
}

.userinfoboard {
  grid-column: auto / span 3;
  justify-items: center;
  align-self: center;;
}

Мой браузер на всю ширину допускает 19 столбцов. Если я уменьшу размер окна, чтобы разрешить только 11 столбцов, объект класса userinfoboard должен охватывать всю ширину окна, поскольку это единственный объект в строке сетки.

Как мне это сделать?

Я попытался ответить на вопрос , который кажется близким к моей проблеме , но в нем отсутствует характеристика PSEUDO: min-span: span 3:

.userinfoboard {
  grid-column: 1 / -1;
  justify-items: center;
  align-self: center;;
}

Большое спасибо!

Answer 1

Вы можете использовать flexbox, манипулируя flex-basis и max-width (также принимая во внимание водосток между элементами):

• для создания разрыва сетки вы можете применить поле к элементам изгиба и применить отрицательное поле для контейнера,

• добавить flex-grow: 1 ко всем гибким элементам и установить calc(n * var(--column) + 2 * var(--gutter)) на n столбцов,

• ограничить overalldata и clusterdata с ростом , указав значение max-width, такое же как flex-basis.

Вы можете видеть, что userinfoboard теперь будет охватывать минимум три столбца - см. Демонстрацию ниже:

.wrapper {
  overflow: hidden;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  --column: 100px; /* size of one column */
  --gutter: 20px; /* size of gap between columns */
  margin: -10px; /* remove space between container and items */
}

.grid > * {
  background: lightblue;
  border: 1px solid cadetblue;
  height: 50px;
  margin: 10px;
  flex-grow: 1; /* grow items */
}

.overalldata { /* span three columns */
  flex-basis: calc(3 * var(--column) + 2 * var(--gutter));
  max-width: calc(3 * var(--column) + 2 * var(--gutter));
}

.clustergraph { /* span six columns */
  flex-basis: calc(6 * var(--column) + 5 * var(--gutter));
  max-width: calc(6 * var(--column) + 5 * var(--gutter));
}

.userinfoboard { /* span miniumum three columns */
  background: beige;
  flex-basis: calc(3 * var(--column));
}

<div class="wrapper">
  <div class="grid">
    <div class="overalldata"></div>
    <div class="userinfoboard"></div>
    <div class="clustergraph"></div>
    <div class="overalldata"></div>
    <div class="userinfoboard"></div>
    <div class="clustergraph"></div>
    <div class="userinfoboard"></div>
  </div>
</div>