Question

我有一个CSS网格容器，其中有3个孩子，所有孩子的宽度都不同。我希望两个侧面的孩子在容器的两个侧面，中间一个孩子在中间。

我尝试将第一个设置为justify-self: start，将中间一个设置为justify-self: center;，最后一个设置为justify-self: end;，但是它并没有居中，只是将空格分开均匀地

.container {
	display: grid;
	grid-template-columns: auto auto auto;
	height: 100px;
}
.first {
	justify-self: start;
	background-color: red;
	width: 50px;
}
.middle {
	justify-self: center;
	background-color: green;
	width: 70px;
}
.last {
	justify-self: end;
	background-color: blue;
	width: 200px;
}

<div class="container">
  <div class="first"></div>
  <div class="middle">Center me</div>
  <div class="last"></div>
</div>

我想念什么吗？这不可能吗？

Answer 1

您可以将网格用于外部元素，并使用绝对位置将中间的网格居中，如下所示进行变换：

.container {
  display: grid;
  grid-template-columns: auto auto;
  height: 100px;
  position:relative;
  width:100%;
}
.first {
  justify-self: start;
  background-color: red;
  width: 50px;
}
.middle {
  background-color: green;
  width: 70px;
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  height:100%;
}
.last {
  justify-self: end;
  background-color: blue;
  width: 200px;
}

<div class="container">
  <div class="first"></div>
  <div class="middle">Center me</div>
  <div class="last"></div>
</div>

但是请注意，使用此方法可以使元素重叠。

Answer 2

使用1fr代替auto，因为您明确定义了元素的宽度

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 100px;
  /* The center */
  padding-bottom: 5px;
  background: linear-gradient(black, black) bottom center/5px 5px no-repeat;
}

.first {
  justify-self: start;
  background-color: red;
  width: 50px;
}

.middle {
  justify-self: center;
  background-color: green;
  width: 70px;
}

.last {
  justify-self: end;
  background-color: blue;
  width: 200px;
}

<div class="container">
  <div class="first"></div>
  <div class="middle">Center me</div>
  <div class="last"></div>
</div>

居中栅格子项，与同胞宽度无关

2 个答案: