Выбор начального столбца и строки для серии элементов сетки

Если у меня это ниже, все данные будут перекрываться потому что я сказал ему перейти к тому же столбцу и строке. Как я могу заставить его начинаться со столбца и строки, которые я хочу, и «расти»?

Если я удалю строку, она пойдет вниз по странице, как и ожидалось. Но что, если я хочу, чтобы он начинался с ряда 1/3, 5/12 и т. д.? Вы можете это сделать?

.mygrid {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
  border: 5px solid red;
}

.content {
  grid-column: col-start 4 / span 7;
  grid-row: 1 / 3;
}
<div class="mygrid">
  <div class="content">test1</div>
  <div class="content">test2</div>
  <div class="content">test3</div>
  <div class="content">test41</div>
  <div class="content">test51</div>
</div>


css css-grid
person johnny    schedule 02.05.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете установить этот стиль только для первого контента.

.mygrid {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
  border: 5px solid red;
  grid-auto-rows: 20px;
}

.content {
  grid-column: col-start 4 / span 7;
  grid-row: span 2;
}

.content:first-child {
  grid-row: 1 / 3;
}
<div class="mygrid">
  <div class="content">test1</div>
  <div class="content">test2</div>
  <div class="content">test3</div>
  <div class="content">test41</div>
  <div class="content">test51</div>
</div>

person vals    schedule 02.05.2018
comment
Я бы просто добавил align-self: flex-end, чтобы объединить содержимое. jsfiddle.net/u3h3pwt5 - person Michael Benjamin; 03.05.2018
comment
@Michael_B Внезапно я понял, что, вероятно, ОП хочет, чтобы все элементы имели span 2. И тогда это выглядит хорошо без необходимости align-self. Но, просто пытаюсь угадать идею ОП здесь - person vals; 03.05.2018
comment
У меня сложилось впечатление, что элементы контента должны иметь отступ по вертикали (с пустыми строками), как они уже есть по горизонтали (с пустыми столбцами). - person Michael Benjamin; 03.05.2018
comment
@Michael_B Да, я понял вашу идею и собирался отредактировать свой ответ, но потом у меня был другой. Только ОП точно знает :-) - person vals; 03.05.2018

arrow_upward
1
arrow_downward

Я не думаю, что существует чистое решение CSS Grid для такого поведения, но все же есть чистое и простое решение CSS.

Используйте псевдоэлемент.

В макете сетки (как и в макете flex) псевдоэлементы в контейнере считаются элементами. Поэтому вставьте псевдо, который будет охватывать пустые строки.

В приведенном ниже примере ваши элементы контента начинаются с строки 6. Нет необходимости изменять правило столбца.

.mygrid {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
  border: 5px solid red;
}

.content {
  grid-column: col-start 4 / span 7;
  /* grid-row: 1 / 3; */
}

.mygrid::before {
  content: "";
  grid-row: 1 / span 5;
  grid-column: col-start 4 / span 7;
}
<div class="mygrid">
  <div class="content">test1</div>
  <div class="content">test2</div>
  <div class="content">test3</div>
  <div class="content">test41</div>
  <div class="content">test51</div>
</div>

person Michael Benjamin    schedule 02.05.2018