Question

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

要求：

块之间以及块之间和容器边缘之间的边距必须相等。
布局必须是响应式的，并且每行上的块数必须适应窗口的大小。
最后一行必须左对齐
块的宽度/高度是固定的
不使用空的非语义HTML元素
纯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>

这是我想要的模型。

grid layout with equal margins

Answer 1

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

DEMO

此演示使用：

calc（） CSS功能。在这种情况下，IE9 +将支持它。您可能希望为某些webkit浏览器添加-webkit-前缀。有关详细信息，请参阅canIuse。
4次媒体查询，以相应地更改一行中显示的元素数量和边距。
内嵌块元素。这涉及处理空白区域（在演示中我使用了字体大小的技术，但你可以使用另一个，see here）。

说明：

媒体查询断点：

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

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

此行为的example具有“逻辑”媒体查询断点。

保证金计算：

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

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

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

<强>但是

左侧和顶部间隙是从容器填充的，其他间隙是块元素右侧和底部的边距。块的边际计算必须考虑到这一点，并且除以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);
    }
}

Answer 2

Nth-child和各个断点处的实现可能是最佳实践方法和最轻量级的解决方案。

还有一些其他选项，例如 1.使用jQuery测量屏幕宽度，并在不同的断点处分配样式 2.使用负边距为容器分配类，因此您无需触及实际边距

...等

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

2 个答案:

DEMO

说明：