html - 由于其中的文本，我的 css 网格框宽度不相等

Question

你好，根据文本输入，我的网格框不相等，即如果我在每个框中插入一个数字，宽度将相等，但是具有不同的字长会使每个框的宽度不相等。请帮忙

/*Grid Buttons*/

.grid-container {
  width: auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto auto auto;
  background-color: #ffffff;
  position: relative;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-top: 30px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  background-repeat: no-repeat;
  border-image-width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 180px;
}

.grid-item img {
  display: inline-block;
  background-size: 100%;
}

<div class="grid-container">
  <div class="grid-item">Workshops</div>
  <div class="grid-item">Classes</div>
  <div class="grid-item">Out Of School</div>
  <div class="grid-item">Our Teachers</div>
  <div class="grid-item">Our Kids</div>
  <div class="grid-item">Twinkle Parties</div>

Answer 1

您需要将 grid-template-columns: auto auto auto 替换为 grid-template-columns: 1fr 1fr 1fr

查看 MDN 文档以获取有关 grid-template-columns 的更多信息.

/*Grid Buttons*/

.grid-container {
  width: auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: #ffffff;
  position: relative;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-top: 30px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  background-repeat: no-repeat;
  border-image-width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 180px;
}

.grid-item img {
  display: inline-block;
  background-size: 100%;
}

<div class="grid-container">
  <div class="grid-item">Workshops</div>
  <div class="grid-item">Classes</div>
  <div class="grid-item">Out Of School</div>
  <div class="grid-item">Our Teachers</div>
  <div class="grid-item">Our Kids</div>
  <div class="grid-item">Twinkle Parties</div>