CSS 中的响应式广场

Question

CSS grid layout 是否有任何方法可以使项目高度与项目宽度相匹配，确保项目是方形的？

例如我们可以使宽度和高度都为“网格容器宽度的 25%”吗？

Answer 1

当然可以！

CSS:

.wrapper{ display: grid;  grid-template-columns: repeat(4, 1fr);}
.wrapper > div { border: 1px solid black;position:relative;}
.wrapper > div:before {display: table; padding-top: 100%; content: '';}
.content{position: absolute;top:0; left:0; width:100%;height:100%;display:flex; justify-content:center; align-items:center;}

HTML:

<div class="wrapper">
  <div><div class="content">1</div></div>
  <div><div class="content">2</div></div>
  <div><div class="content">3</div></div>
  <div><div class="content">4</div></div>
</div>

生产中的示例：http://www.montblancnaturalresort.com

片段:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.wrapper>div {
  border: 1px solid black;
  position: relative;
}

.wrapper>div:before {
  display: table;
  padding-top: 100%;
  content: '';
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="wrapper">
  <div>
    <div class="content">1</div>
  </div>
  <div>
    <div class="content">2</div>
  </div>
  <div>
    <div class="content">3</div>
  </div>
  <div>
    <div class="content">4</div>
  </div>
</div>

Answer 2

虽然已经回答了。但是自从提出这个问题以来，CSS 中有多个更新。使用新属性制作正方形太容易了。使用 aspect-ratio 属性，您可以在矩形、圆形、正方形或更多形状中构建响应形状。

:root {
  --square: 800px;
  --background: teal;
}
.square {
    background: var(--background);
    width: 100%;
    max-width: var(--square);
    height: auto;
    aspect-ratio: 1/1;
}

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

CSS 中的响应式广场

Responsive Square in CSS

css

responsive

aspect-ratio

css-grid