具有响应正方形的网格布局

  • Z时代
  • 2024-01-10
  • 分类：问答

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

我觉得我应该可以使用CSS Grid布局来做到这一点，但是在将每个正方形的高度设置为等于宽度时遇到麻烦。

在每个正方形之间设置水槽时也遇到麻烦。

使用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或grid 完成此操作的任何示例，但任何示例也将不胜感激。

回答：

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

您可以将其与Flexbox和CSS Grid结合使用，由于对利润/填充使用百分比会导致弹性/网格项目的结果不一致，因此可以添加一个额外的包装器，或者在此处使用伪类，因此带有百分比的元素

不会弹性/网格项目。

编辑：请注意，对规格进行了更新。，现在在弹性/网格项目上使用时应能提供一致的结果。但是请注意，该问题

在较旧的版本上仍然会发生。

请注意，如果要向content元素添加内容，则它必须是绝对位置，以保持正方形的纵横比。

.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 Grid version

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

以上是 具有响应正方形的网格布局 的全部内容， 来源链接： utcz.com/qa/406936.html

回到顶部