CSS Grid Flow Блоки разного размера [дубликаты]

Можно ли создать сетку CSS, которая позволяет размещать блоки контента разного размера, которые не имеют фиксированных начальных позиций, а другие блоки перемещаются вокруг?

вот мой тест

HTML

<div class="grid">

  <div class="item">Small 1</div>
  <div class="item">Small 2</div>
  <div class="item large">Large 1</div>
  <div class="item large">Large 2</div>

  <div class="item">Small 3</div>
  <div class="item">Small 4</div>
  <div class="item">Small 5</div>
  <div class="item">Small 6</div>

  <div class="item">Small 7</div>
  <div class="item">Small 8</div>
  <div class="item">Small 9</div>
  <div class="item">Small 10</div>

  <div class="item">Small 11</div>
  <div class="item">Small 12</div>
  <div class="item">Small 13</div>

</div>

CSS

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

body {
  padding: 5em;
}

.grid { 
  display: grid; 
  grid-template-columns: 25% 25% 25% 25%; 
  grid-gap: 1em 1em;
  grid-auto-flow: row dense;
}

.item {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0.25em;
  padding: 2em;
}

.large {
  background: rgba(255, 0, 0, 0.25);
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}

Скрипт: https://jsfiddle.net/bLjzscLs/

Ожидается: ИЗОБРАЖЕНИЕ

Фактически: ИЗОБРАЖЕНИЕ


html css responsive-design css-grid grid
person dai.hop    schedule 20.06.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Конечно вы можете! Просто добавьте height: <insert value that's above 100px here> в свой CSS под .large и найдите правильные значения для достижения ожидаемого результата.

Пример:

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

body {
  padding: 5em;
}

.grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-gap: 1em 1em;
  grid-auto-flow: row dense;
}

.item {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0.25em;
  padding: 2em;
}

.large {
  background: rgba(255, 0, 0, 0.25);
  grid-column: auto / span 2;
  grid-row: auto / span 2;
  height: 200px;
}
<div class="grid">

  <div class="item">Small 1</div>
  <div class="item">Small 2</div>
  <div class="item large">Large 1</div>
  <div class="item large">Large 2</div>

  <div class="item">Small 3</div>
  <div class="item">Small 4</div>
  <div class="item">Small 5</div>
  <div class="item">Small 6</div>

  <div class="item">Small 7</div>
  <div class="item">Small 8</div>
  <div class="item">Small 9</div>
  <div class="item">Small 10</div>

  <div class="item">Small 11</div>
  <div class="item">Small 12</div>
  <div class="item">Small 13</div>

</div>

person PointR    schedule 20.06.2017
comment
Спасибо за Ваш ответ. Я интерпретирую это как переход от динамического макета к фиксированному макету при установке высоты. Это правильно? - person dai.hop; 20.06.2017
comment
Это правильно. Надеюсь, это не проблема. - person PointR; 20.06.2017

arrow_upward
0
arrow_downward

На самом деле ваш код будет работать так, как вы ожидали. Попробуйте добавить большой абзац в область «большой 1» с максимально возможным количеством строк и сами посмотрите на результат.

<div class="item large">Добавьте большой абзац с максимально возможным количеством новых строк и проверьте вывод</div>

В любом случае вы также можете использовать приведенный здесь код -> https://jsfiddle.net/anoopmnm/dopt5s4y/

Или просто увеличьте значение с grid-row: auto / span 2; до grid-row: auto / span 11; в таблице стилей.

person Anoop Mayampilly Muraleedharan    schedule 20.06.2017
comment
Спасибо, Декстер - я не уверен, почему ваш ответ работает. Насколько я понимаю, изменение диапазона с 2 строк на 11 строк приведет к тому, что этот блок будет занимать 11 строк. Вы можете уточнить? - person dai.hop; 20.06.2017