具有响应方块的网格布局

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项带来不一致的结果,可以使用伪添加额外的包装器,或者像这里一样,所以带百分比的元素不是flex/grid项目.

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

小提琴演示 - 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

.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 */
}

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

从规格:

5.1.2.视口百分比长度:对vw,vh,vmin,vmax单位

视口百分比长度相对于初始包含块的大小.当初始包含块的高度或宽度改变时,它们相应地缩放.

• vw unit - 等于初始包含块宽度的1%.
• vh单位 - 等于初始包含块高度的1%.
• vmin单位 - 等于vw或小于vh.
• vmax单位 - 等于vw或大于vh.

Answer 3

您可以使用基于宽度计算填充并padding-top: 100% 直接设置为square 网格项目（网格项目现在是方形的）这一事实。

2019年更新

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

• 为什么百分比填充/边距不适用于 Firefox 和 Edge 中的弹性项目？

现在浏览器（较新版本）之间已达成共识，padding对flex items和grid items具有相同的行为，您可以使用此解决方案。

请参阅下面的演示：

.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;
}

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

Answer 4

您可以使用 CSSaspect-ratio属性在所有现代浏览器中实现此目的。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}

.container div {
  aspect-ratio: 1 / 1;
  
  /* Styles below just for demo */
  background-color: orange;
  color: white;
  font-family: Arial;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
</div>