Принудительно начать новый ряд с сеток css - PullRequest
Новая
       31

Принудительно начать новый ряд с сеток css

0 голосов
/ 27 января 2020

Рассмотрим ситуацию, которая, на мой взгляд, является довольно распространенным сценарием:

У меня есть сетка css с 10 столбцами. В некоторых строках я хочу отображать содержимое в двух столбцах, или в пяти столбцах, или, может быть, во всех 10. Поведение по умолчанию, по-видимому, состоит в том, чтобы передавать столбцы для заполнения строки, так что если бы я хотел получить строку с 6 столбцами содержимого, а затем новая строка с 7 столбцами содержимого, на самом деле это будет просто поток, так что у меня будет строка с 10 столбцами содержимого, а затем под следующей строкой будет 3 столбца содержимого.

Как Могу ли я вставить прерыватель, чтобы 7 столбцов контента начинались со следующей строки, чтобы результирующая сетка была:

Row 1: 6 cols of content, 4 empty cols

Row 2: 7 cols of content, 3 empty cols

Обратите внимание: мне известно о свойстве grid-row-start, но я хочу, чтобы оно было динамическим c, я не хочу настраивать это свойство вручную при добавлении / удалении содержимого. Мне также известно, что я могу открыть новый div с display: grid для каждой новой строки, но, опять же, мне кажется, что я смогу достичь этого макета без любого из вышеперечисленных решений.

Каков наилучший практический способ сделать это?

1 Ответ

0 голосов
/ 27 января 2020

Я нашел способ достичь этого сейчас.

Укажите начальный номер столбца на уровне ячеек столбца, которым вы хотите стать первым столбцом новой строки.

Пример: 

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  background-color: grey;
}

.single-col {
  padding: 1em;
  background-color: orange;
  border: black solid 1px;
}

.new-row {
  grid-column-start: 1;
}
<div class="container">
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>

  <div class="single-col new-row">One Col - new row</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>

</div>
...