Question

CSS grid layout有没有办法让商品高度与商品宽度相匹配，确保商品是正方形的？

e.g。我们可以将宽度和高度两者设为“网格容器宽度的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

<强>段：

＆＃13;

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

＆＃13;

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

＆＃13;

CSS中的方形项目

1 个答案: