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

Question

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

我觉得我应该可以使用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 完成此操作的任何示例，但任何示例也将不胜感激。

Answer 1

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>