CSS Grid Flow不同大小的塊

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>添加到您的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>

Answer 2

其實你的代碼的工作方式將與您預期。嘗試在儘可能多行的「大1」區域添加一個大段落，並親自查看輸出。

<div class="item large">了許多新的生產線添加了大量的段落作爲 可能並檢查輸出中</div>

反正你也可以使用這裏提供的代碼 - >https://jsfiddle.net/anoopmnm/dopt5s4y/

或者只是增加值在grid-row: auto/span 2;到grid-row: auto/span 11;在您的樣式表中