CSS - 具有等边距和固定大小块的响应式网格

我正在尝试突破 CSS 的限制，以复制印刷中常见的网格布局。

要求 ：

1. 块之间以及块与容器边缘之间的边距必须相等。
2. 布局必须具有响应性，并且每行上的块数必须适应窗口的大小。
3. 最后一行必须左对齐
4. 块的宽度/高度是固定的
5. 不使用空的非语义 HTML 元素
6. 纯CSS解决方案，无JS

所以，我的标记如下所示：

<ul>
    <li>
       <img src="thumbnail.jpg">
       <span>Introduction and Curriculum</span>
    </li>
    <li>
       <img src="thumbnail.jpg">
       <span>Equipment and Workspace Prep</span>
    </li>
    ...
</ul>

这是我想要的模型。

您可以使用CSS calc() 函数。虽然它不会阻止使用媒体查询，但它可以计算元素和容器之间的边距 edges.

DEMO

该演示使用：

1. calc()CSS 函数。在这种情况下，IE9+将支持它。您可能想要添加-webkit-某些 webkit 浏览器的前缀。欲了解更多信息，请参阅canIuse.
2. 4 媒体查询更改一行中显示的元素数量以及相应的边距。
3. 内联块元素。这涉及处理空白（在演示中我使用了字体大小技术，但您可以使用其他技术，see here).

解释 ：

媒体查询断点：

它们是根据元素的宽度计算的。由于每个元素是200px我应该选择断点screen width = 400px/600px/800px/1000px但由于媒体查询包含滚动条，因此使用这些值时，元素将没有足够的空间并且彼此重叠。

滚动条在每个浏览器上的宽度并不相同，因此我选择了一个更高的值以确保不会发生重叠。

这是一个example通过“逻辑”媒体查询断点来控制这种行为。

保证金计算：

首先，百分比边距和填充始终根据容器的剩余宽度计算（例外）因此顶部和底部边距/填充的计算与左/右相同。

基本上，边距大小的计算是：

(remaining width (=100%) - the sum of grid elements width) / number of gaps 

But

左侧和顶部间隙是容器的填充，其他间隙是块元素的右侧边距和底部间隙。块的保证金计算必须考虑到这一点，并且除以number of gaps -1.

HTML :

<ul id="container">
    <li class="block">...</li>
    <li class="block">...</li>
    ...
</div>

CSS :

#container{
    font-size:0;    
    padding-top: calc((100% - 1000px)/6);
    padding-left:calc((100% - 1000px)/6);}

.block {
    font-size:20px;
    width: 200px;
    height: 200px;
    display:inline-block;
    margin-right: calc((100% - 1000px)/5);
    margin-bottom: calc((100% - 1000px)/5);
}

@media screen and (max-width: 430px) {
    .block {
        margin: calc(50% - 100px);
    }
}

@media screen and (min-width: 431px) and (max-width: 630px) {
    #container{
        padding-top: calc((100% - 400px)/3);
        padding-left:calc((100% - 400px)/3);
    }
    .block {
        margin-right: calc((100% - 400px)/2);
        margin-bottom: calc((100% - 400px)/2);
    }
}
@media screen and (min-width: 631px) and (max-width: 830px) {
    #container{
        padding-top: calc((100% - 600px)/4);
        padding-left:calc((100% - 600px)/4);
    }
    .block {
        margin-right: calc((100% - 600px)/3);
        margin-bottom: calc((100% - 600px)/3);
    }
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
    #container{
        padding-top: calc((100% - 800px)/5);
        padding-left:calc((100% - 800px)/5);
    }
    .block {
        margin-right: calc((100% - 800px)/4);
        margin-bottom: calc((100% - 800px)/4);
    }
}