CSS网格的砌体布局

Question

最近，我开始在正在处理的应用程序中实现css网格，从那时起，我设法将代码重构为更简洁，更具凝聚力的形式。昨天，我遇到了一个问题，那就是要填充ng，重复重复生成多个具有不同高度的div的“ section”数组所产生的剩余空间。在开始解决问题之前，我以为我已经有了grid-auto-flow: dense;的解决方案，但是事实证明，这种方法的工作方式与我所理解的不同。我无法以任何方式填充圆圈空间而感到困扰。

我当前的网格代码grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));是动态设置列数，但是我准备设置为特定列数（例如2），这样我就可以填充行/列空间。

任何帮助或建议将不胜感激。

Answer 1

没有任何帮助，本地CSS网格就无法真正做到这一点。

我从BalázsSziklai在该主题上的工作中得到了以下示例。列数是动态的，行数也是动态的。不过，它有两个负面影响：（1）这不是“真正的”砌体，因为您永远不会看到行错开，以致行间隙与大块相交（但这也不是您在图形中要求的），并且（ 2）您需要明确告知程序哪些块旨在跨越更多的行/列，这可能是通过在加载数据时在javascript中生成html标记时应用各种类来实现的。

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-gap: 10px;
    grid-auto-rows: minmax(180px, auto);
    grid-auto-flow: dense;
    padding: 10px;
}

.grid-item {
    padding: 1rem;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #929796;
    background-color: #333;
    border-radius: 5px;
    &:nth-child(odd) {
        background-color: #424242;
    }
}

.span-2 {
    grid-column-end: span 2;
    grid-row-end: span 2;
}

.span-3 {
    grid-column-end: span 3;
    grid-row-end: span 4;
}

<div class="grid">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item span-3 grid-item-3">3</div>
    <div class="grid-item grid-item-4">4</div>
    <div class="grid-item span-2 grid-item-5">5</div>
    <div class="grid-item grid-item-6">6</div>
    <div class="grid-item grid-item-7">7</div>
    <div class="grid-item grid-item-8">8</div>
    <div class="grid-item grid-item-9">9</div>
    <div class="grid-item span-2 grid-item-10">10</div>
    <div class="grid-item grid-item-11">11</div>
    <div class="grid-item grid-item-12">12</div>
    <div class="grid-item span-2 grid-item-13">13</div>
    <div class="grid-item grid-item-14">14</div>
    <div class="grid-item grid-item-15">15</div>
    <div class="grid-item grid-item-16">16</div>
    <div class="grid-item span-3 grid-item-17">17</div>
    <div class="grid-item grid-item-18">18</div>
    <div class="grid-item grid-item-19">19</div>
    <div class="grid-item grid-item-20">20</div>
    <div class="grid-item span-2 grid-item-21">21</div>
    <div class="grid-item grid-item-22">22</div>
    <div class="grid-item grid-item-23">23</div>
    <div class="grid-item grid-item-24">24</div>
    <div class="grid-item grid-item-25">25</div>
    <div class="grid-item span-3 grid-item-26">26</div>
    <div class="grid-item grid-item-27">27</div>
    <div class="grid-item grid-item-28">28</div>
    <div class="grid-item grid-item-29">29</div>
    <div class="grid-item grid-item-30">30</div>
    <div class="grid-item grid-item-31">31</div>
    <div class="grid-item grid-item-32">32</div>
    <div class="grid-item grid-item-33">33</div>
    <div class="grid-item grid-item-34">34</div>
    <div class="grid-item grid-item-35">35</div>
    <div class="grid-item grid-item-36">36</div>
    <div class="grid-item grid-item-37">37</div>
    <div class="grid-item grid-item-38">38</div>
    <div class="grid-item grid-item-39">39</div>
    <div class="grid-item span-3 grid-item-40">40</div>
    <div class="grid-item grid-item-41">41</div>
    <div class="grid-item grid-item-42">42</div>
    <div class="grid-item grid-item-43">43</div>
    <div class="grid-item grid-item-44">44</div>
    <div class="grid-item span-3 grid-item-45">45</div>
    <div class="grid-item grid-item-46">46</div>
    <div class="grid-item grid-item-47">47</div>
    <div class="grid-item grid-item-48">48</div>
    <div class="grid-item grid-item-49">49</div>
    <div class="grid-item grid-item-50">50</div>
</div>

但是，如果您仍然要使用JavaScript加载数据，则最好也加入功能更全的砌体布局。阅读本文，因为我非常确定它将包含一个或多个解决方案，您可以根据自己的需要进行工作：https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/