CSS网格流程不同大小的块

Question

是否有可能创建一个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/

预期：

实际值：

Answer 1

当然可以！只需将height: <insert value that's above 100px here>添加到.large下的CSS中，然后找到正确的值即可达到预期效果。

示例：

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

实际上，您的代码将按照您的预期运行。尝试在尽可能多行的“大1”区域中添加一个大段落，然后自己查看输出。

  

<div class="item large"> 添加一个包含许多新行的大段落   可以查看输出 </div>

无论如何，你也可以使用这里提供的代码 - ＆gt; https://jsfiddle.net/anoopmnm/dopt5s4y/

或者只是将样式表中的值从grid-row: auto / span 2;增加到grid-row: auto / span 11;