具有响应方块的网格布局

Question

我想创建一个带有响应方块的网格布局。

我觉得我应该能够使用CSS网格布局，但是无法将每个方块的高度设置为等于宽度。

在每个方格之间设置排水沟时也遇到问题。

使用flexbox会更好吗？

目前我的HTML看起来像这样，但会动态，因此可能会添加更多的方块。当然，它需要具有响应性，因此理想情况下使用媒体查询将其折叠为一列。

<div class="square-container">

  <div class="square">
    <div class="content">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

</div>

使用css网格，就我而言

.square-container{
    display: grid;
    grid-template-columns: 30% 30% 30%;
    .square {

    }
}

我能够进一步使用flexbox并且能够使用空格来将正方形与一个漂亮的排水沟对齐，但仍然在努力使高度与每个正方形的宽度相匹配。

我无法找到任何与flexbox或网格相关的示例，但任何示例都会受到赞赏。

由于

Answer 1

padding-bottom技巧是最常用的技巧。

你可以将它与Flexbox和CSS Grid结合使用，并且由于使用百分比进行margin / padding会给flex / grid项带来不一致的结果，可以使用伪添加额外的包装器，或者像这里一样，所以元素包含百分比不是弹性/网格项目。

编辑：注意，有一个update made to the specs.，现在应该在flex / grid项目上使用时给出一致的结果。但请注意，旧版本仍会出现此问题。

注意，如果您要向content元素添加内容，则需要将其置于绝对位置以保持正方形的宽高比。

Fiddle demo - Flexbox

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}

<div class="square-container">

  <div class="square">
    <div class="content">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

</div>

CSS网格版

.square-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  grid-gap: 10px;
}

.square {
  position: relative;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}

<div class="square-container">

  <div class="square">
    <div class="content">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

</div>

Answer 2

尝试使用 视口百分比单位 。

jsFiddle

＆＃13;

＆＃13;

.square-container {
  display: grid;
  grid-template-columns: repeat(3, 30vw);
  grid-template-rows: 30vw;
  grid-gap: 2.5vw;
  padding: 2.5vw;
  background-color: gray;
}

.square {
  background-color: lightgreen;
}

body {
  margin: 0; /* remove default margins */
}

＆＃13;

<div class="square-container">
  <div class="square">
    <div class="content"></div>
  </div>
  <div class="square">
    <div class="content spread"></div>
  </div>
  <div class="square">
    <div class="content column"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

来自规范：

  

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

     

视口百分比长度是相对于的大小   初始包含块。当初始的高度或宽度   包含块被更改，它们会相应缩放。

     

  
• vw unit - 等于初始包含块宽度的1％。
  
• vh单位 - 等于初始包含高度的1％   块。
  
• vmin unit - 等于vw或vh中的较小者。
  
• vmax单位 - 等于vw或vh中的较大者。
  

Answer 3

您可以使用 padding 根据宽度计算的事实，并将padding-top: 100% 直接设置为square 网格项（网格项目现在是正方形）。

2019更新

请注意，对于 flex项以及网格项之前，这并不常用 - 请参阅此答案的评论中链接的帖子：< / p>

• Why doesn't percentage padding / margin work on flex items in Firefox and Edge?

  

既然浏览器（较新版本）之间存在共识，即为{em> flex项和网格项 padding具有相同的行为，您可以使用这个解决方案。

见下面的演示：

＆＃13;

＆＃13;

.square-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  grid-gap: 10px;
}

.square {
  background: cadetblue;
  padding-top: 100%; /* padding trick directly on the grid item */
  box-sizing: border-box;
  position: relative;
}

.square .content { /* absolutely positioned */
  position: absolute;
  top: 0;
  right:0;
  left: 0;
  bottom: 0;
}

＆＃13;

<div class="square-container">
  <div class="square">
    <div class="content"> some content here</div>
  </div>
  <div class="square">
    <div class="content"> some content here</div>
  </div>
  <div class="square">
    <div class="content"> some content here</div>
  </div>
  <div class="square">
    <div class="content"> some content here</div>
  </div>
  <div class="square">
    <div class="content column">some content here and there is a lot of text here</div>
  </div>
  <div class="square">
    <div class="content spread">text</div>
  </div>
  <div class="square">
    <div class="content column">some text here</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

几天来，我一直感到惊讶，到2020年，没有简单的解决方案。我坚信，使用CSS网格，这简直是小菜一碟……Ason提供的Flexbox解决方案是唯一可跨浏览器使用的解决方案。在Stack上，我发现了另外一个使用padding-bottom的CSS网格解决方案：100％，但在Firefox中不起作用（页脚下方有很多空白）。

这是我的问题，我认为这是我最近遇到的所有问题中最简单的解决方案。

Codepen上的CSS Grid解决方案： https://codepen.io/abudimir/pen/ExKqyGp

<div class="square-container">