css - 具有响应方块的网格布局




css3 flexbox (2)

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

我觉得我应该能够使用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或网格相关的示例,但任何示例都将受到赞赏。

谢谢


尝试使用 视口百分比单位

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。 视口百分比长度: vwvhvminvmax 单位

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

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

您可以使用以下事实:根据宽度计算 填充 并设置 padding-top: 100% 直接 square 网格项 (网格项目现在是方形)。

2019年更新

请注意,对于 flex项目 以及之前的 网格项目 ,此操作不常用 - 请参阅此答案的注释中链接的帖子:

现在浏览器(较新版本)之间存在共识,即对 flex项目 网格项的 padding 具有相同的行为,您可以使用此解决方案。

见下面的演示:

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





css-grid