CSS - 具有相等边距和固定大小块的响应式网格 [英] CSS - Responsive grid with equal margins and fixed size blocks

问题描述

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

要求:

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

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

<li><img src="thumbnail.jpg"><span>简介和课程</span><li><img src="thumbnail.jpg"><span>设备和工作区准备</span>...

这是我要实现的目标的模型.

解决方案

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

演示

这个演示使用:

1. calc() CSS 函数.在这种情况下，它将得到 IE9+ 的支持.您可能希望为某些 webkit 浏览器添加 -webkit- 前缀.有关详细信息，请参阅 canIuse.
2. 4 次媒体查询，以相应地更改一行中显示的元素数量和边距.
3. inline-block 元素.这涉及处理空白(在演示中我使用了字体大小技术，但您可以使用另一种技术，见这里).

<小时>

说明:

媒体查询断点:

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

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

这是带有逻辑"媒体查询断点的这种行为的示例.

保证金计算:

首先，百分比边距和填充总是根据容器的剩余宽度计算(例外)，所以顶部和底部边距/填充与左/右的计算相同.

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

(剩余宽度(=100%)-网格元素宽度的总和)/间隙数

但是

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

<小时>

HTML :

<li class="block">...</li><li class="block">...</li>...

CSS :

#container{字体大小:0;padding-top: calc((100% - 1000px)/6);padding-left:calc((100% - 1000px)/6);}.堵塞 {字体大小:20px；宽度:200px；高度:200px；显示:内联块；右边距:calc((100% - 1000px)/5);底边距:calc((100% - 1000px)/5);}@media 屏幕和(最大宽度:430px){.堵塞 {边距:计算(50% - 100px)；}}@media screen and (min-width: 431px) and (max-width: 630px) {#容器{padding-top: calc((100% - 400px)/3);padding-left:calc((100% - 400px)/3);}.堵塞 {右边距:calc((100% - 400px)/2);margin-bottom: calc((100% - 400px)/2);}}@media screen and (min-width: 631px) and (max-width: 830px) {#容器{padding-top: calc((100% - 600px)/4);padding-left:calc((100% - 600px)/4);}.堵塞 {右边距:calc((100% - 600px)/3);margin-bottom: calc((100% - 600px)/3);}}@media screen and (min-width: 831px) and (max-width: 1030px) {#容器{padding-top: calc((100% - 800px)/5);padding-left:calc((100% - 800px)/5);}.堵塞 {右边距:calc((100% - 800px)/4);margin-bottom: calc((100% - 800px)/4);}}

I'm trying to push the limits of CSS to replicate what would be a common grid-layout in print.

Requirements :

1. Margins between blocks and between blocks and edge of the container must be equal.
2. The layout must be responsive and the number of blocks on each row must adapt to the size of the window.
3. The last row must be left aligned
4. the width/height of the blocks is fixed
5. no use of empty non-semantic HTML elements
6. pure CSS solution, no JS

So, I have markup that looks like this:

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

Here is a mock-up of what I'm going for.

解决方案

You can use the CSS calc() function. Although it won't prevent from using media queries, It can calculate the margin between elements and container edges.

DEMO

This demo uses :

1. calc() CSS function. In this context, it will be supported by IE9+. You might want to add the -webkit- prefix for some webkit browsers. for more info, see canIuse.
2. 4 media queries to change the number of elements displayed in one row and the margins accordingly.
3. inline-block elements. This involves dealing with the white space (in the demo I used the font-size technique but you may use an other one, see here).

---

Explanation :

Media query break points :

They are calculated according to the width of the elements. As each element is 200px wide I should have chosen break points at screen width = 400px/600px/800px/1000px but as media queries include the scrollbar, with those values, the elements would not have enough space and overlap each other.

Scrollbars don't have the same width on each browser so I chose a higher value to be sure that the overlapping doesn't occur.

Here is an example of this behaviour with "logical" media query break points.

Margin calculation :

First of all percent margins and padding are always calculated according to the remaining width of the container (exception) so the top and bottom margins / paddings have the same calculation as the left/right ones.

Basically, the calculation of the size of margins is :

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

But

Left and top gaps are padding from the container and the other gaps are margin right and bottom on the block element. The margin calculation for the blocks must take that into account and the division is by the 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);
    }
}

这篇关于CSS - 具有相等边距和固定大小块的响应式网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！