使用浮动项目网格避免空白

Posted 2023-03-05

【中文标题】使用浮动项目网格避免空白

【英文标题】：Avoiding empty spaces with floated items grid

【发布时间】：2018-07-05 07:14:06

【问题描述】：

我正在尝试制作一个网格，该网格将容纳 3 个不同大小的容器：多行/4 列网格中的 1x1、1x2 和 2x2。我的目标是有一个网格，我可以在其中填充完美契合的新元素。问题是我使用 float: left 在所有网格元素上，因此当我有一个不在第一列开始的 2x2 元素时，在该 2x2 项目之前会有空格。

section 
  width: 50%;


.item 
  float: left;


img 
  width: 100%;
  vertical-align: middle;


.one 
  width: 25%;


.two 
  width: 50%;


.four 
  width: 50%;
  height: 50%;

<section>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/sss">
    </div>
    <div class="item two">
      <img src="http://via.placeholder.com/400x200/000080">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/000080">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/">  
    </div>
    <div class="item four">
      <img src="http://via.placeholder.com/400x400/ff69b4">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/sss">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/sss">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/000080">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400/000080">
    </div>
    <div class="item one">
      <img src="http://via.placeholder.com/400x400">
    </div>
</section>

【问题讨论】：

你愿意使用 CSS Grid 或 Flexbox 吗？

当然，任何让它工作的东西，同时允许在最后放入物品

***.com/q/44377343/3597276

【参考方案1】：

感谢@Michael_B 对使用这两者的见解，我无法使用 Flex 实现无缝网格，尽管在了解了新的 CSS Grid 几个小时后我管理得很好（它非常好）。它非常灵活，尽管我仍在尝试弄清楚如何使其具有响应性，但在较小的分辨率下，行之间会出现间隙。

~更新~ 通过将minmax() 函数的最大值设置为grid-auto-rows 规则到1fr 单位（覆盖所有可用空间），我设法使网格在所有分辨率下都响应。

/* Assign an element a variable to be used by the 'grid-template-areas' rule */
.a  grid-area: a; 
.b  grid-area: b; 
.c  grid-area: c; 
.d  grid-area: d; 
.e  grid-area: e; 
.f  grid-area: f; 
.g  grid-area: g; 
.h  grid-area: h; 
.i  grid-area: i; 
.j  grid-area: j; 
.k  grid-area: k; 
.l  grid-area: l; 
.m  grid-area: m; 

*  box-sizing: border-box; 

.container 
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  margin: 0 auto;
  max-width: 800px;
  /* Grid properties */
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: minmax(80px, 1fr);
  /* Make a custom grid */
  grid-template-areas: 
    "a a b b c c c c"
    "d d d d c c c c"
    "e e f f f f g g"
    "h h h h i i i i"
    "j j k k l l l l";


img 
  vertical-align: middle;
  width: 100%;

    
div 
  background-color: #ccc;
  color: #d9480f;

<div class="container">
  <div class="a">
    <img src="http://via.placeholder.com/400x400/sss">
  </div>
  <div class="b">
    <img src="http://via.placeholder.com/400x400/000080">
  </div> 
  <div class="c">
    <img src="http://via.placeholder.com/400x400/fff">
  </div>
  <div class="d">
    <img src="http://via.placeholder.com/400x200/ccc">
  </div>
  <div class="e">
    <img src="http://via.placeholder.com/400x400/ccc">
  </div>
  <div class="f">
    <img src="http://via.placeholder.com/400x200/000080">
  </div>
  <div class="g">
    <img src="http://via.placeholder.com/400x400/sss">
  </div>
  <div class="h">
    <img src="http://via.placeholder.com/400x200/ccc">
  </div>
  <div class="i">
    <img src="http://via.placeholder.com/400x200/sss">
  </div>
  <div class="j">
    <img src="http://via.placeholder.com/400x400/sss">
  </div>
  <div class="k">
    <img src="http://via.placeholder.com/400x400/ccc">
  </div>
  <div class="l">
    <img src="http://via.placeholder.com/400x200/fff">
  </div>
</div>