Question

给出一个CSS网格，我希望在这里有两行两列（请参见代码段）。

如何在无需专门设置宽度的情况下将所有项目保持相同的宽度？

是否有css-grid属性使所有网格项目的宽度保持相同？

.container {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.item {
  min-width: 140px;
  height: 96px;
  padding: 8px;
  font-weight: bold;
  font-size: 17px;
  line-height: 24px;
  border: 1px solid #589BFF;
  border-radius: 12px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">ConstantineConstantine PattersonPatterson</div>
</div>

Answer 1

使用1fr代替auto。

新的fr单位占广告资源中可用空间的一小部分网格容器^ref

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.item {
  min-width: 140px;
  height: 96px;
  padding: 8px;
  font-weight: bold;
  font-size: 17px;
  line-height: 24px;
  border: 1px solid #589BFF;
  border-radius: 12px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

body {
 margin:0;
}

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">ConstantineConstantine PattersonPatterson</div>
</div>

给定2x2的网格，如何使所有项目的宽度相同？

1 个答案: