我正在尝试在CSS中使用网格布局在一个div（容器）中放置三个框。只有一排。 Box 1将保持在左侧附近，box3将在右侧附近，并且box2在中间。另外，所有框都应垂直居中。
这是我的代码，但是我无法按照我的描述进行。
.statusBar{
border: 1px solid #999;
display: grid;
grid-template-columns: 50px 1fr 50px 1fr 50px;
grid-column-gap: auto;
}
.statusBar > div{
border: 1px solid #000;
} <div class='statusBar'>
<div>1</div>
<div>2</div>
<div>3</div>
</div>如果每个小盒子的尺寸都在自动填充的范围内，则最好不要使盒子粘在边缘上。例如10px空格。
任何想法如何使其起作用？
提前感谢。
您可以使用grid-gap和place-self]进行类似的操作
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 50px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1, .item2, .item3 {
place-self: center;
}
.item1, .item3 {
width: 200px;
}
.item2 {
width: 100px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
</body>
</html>我希望这会有所帮助！ ：）
像这样使用容器和子div上的justify属性：
您可以为此使用Flex，这是它如何工作的示例。也可以将左右div设置为百分比宽度或硬px宽度。并且中心将弯曲以仍然以10px的边距填充空间。