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

问题描述

我试图推动CSS的限制来复制打印中的常见网格布局。要求：

1. 块之间和块和容器边缘之间的边距必须相等。


2. 布局必须具有响应性，


3. 最后一行必须左对齐


4. 每一行的宽度/高度必须与窗口的大小匹配。固定


5. 不使用空的非语义HTML元素


6. 纯CSS解决方案，无JS

所以，我的标记看起来像这样：

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

这里是一个模拟我要去的地方。

解决方案

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

DEMO

此演示使用：

1. calc（） CSS函数。在这方面，它将得到IE9 +的支持。您可能想为某些webkit浏览器添加 -webkit - 前缀。有关详情，请参阅 canIuse 。


2. 4个媒体查询可更改一行中显示的元素数量和相应的边距。


3. inline-block 元素。这涉及到处理白色空间（在演示中我使用了字体大小技术，但你可以使用另一个，请参阅此处）。

---

说明：

媒体查询中断点：

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

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

以下是示例这种行为与逻辑媒体查询断点。

保证金计算：

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

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

 （剩余宽度（= 100％） - 网格元素宽度的总和）/间隙数
  

但

左侧和顶部间隙是从容器填充，是块元素上的边缘右侧和底部。块的边际计算必须考虑到这一点，并且划分是由差距数-1

c。

---

HTML：

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

  #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屏幕和（min-width：431px）和（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）; 
} 
} 
  

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