如何在嵌套的 CSS 网格列中均匀间隔项目？

Question

https://jsfiddle.net/tnr24g6j/5/

在 Google.com 的简单重现中，我试图将顶部导航栏隔开，以便关于、存储、Gmail 和图像位于它们自己的容器中。 我认为justify-items:center; 在容器 class 上导致了问题，但我无法修复它。

这是我试图实现的图像示例： https://ibb.co/QXzv5vd 。

HTML：

<div class="container">

<div class = "nav-container">
<nav class = "nav-container-grid">
<a class = "nested-a">About</a>
<a class = "nested-b">Store</a>
<a class = "nested-c">Gmail</a>
<a class = "nested-d">Images</a>
</nav>
</div>

<div id ="image-container">
<img src='https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png' alt='Google'>
</div>

<div class="button-container">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>

<div class="search-container">
<input type="search" placeholder="Search">
</div>

</div>

CSS：

.container {
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: 1fr 2fr 1fr 1fr;
  justify-items: center;
}
.nav-container {
  grid-row: 1;
}

.nav-container-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.nav-container-grid a {
    border: 2px solid #000000;
    align-content: right;
}

.image-container {
  grid-row: 2; 
}
.search-container {
  grid-row: 3;
}

.button-container {
  grid-row: 4;
}

.nested-a {
  grid-column-start: 1;
  grid-row-start: 1;
}
.nested-b{
  grid-column-start: 2;
  grid-row-start: 1;
}
.nested-c{
  grid-column-start: 3;
  grid-row-start: 1;
}
.nested-d{
  grid-column-start:4;
  grid-row-start: 1;
}

Answer 1

您已将.nav-container-grid设置为分成 4 个相等的列，这是正确的，并且它正在工作......问题是它得到 4 个相等的nav-container列，但正如您所注意到的，当您应用justify-items:center ，调整列的大小以适应最大列的内容。

要解决此问题，您可以使.nav-container-grid的父级宽度为 100%：

.nav-container { grid-row: 1; width: 100%; }

工作示例：

 .container { display: grid; grid-template-columns: 1; grid-template-rows: 1fr 2fr 1fr 1fr; justify-items: center; }.nav-container { grid-row: 1; width: 100%; }.nav-container-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }.nav-container-grid a { border: 2px solid #000000; align-content: right; }.image-container { grid-row: 2; }.search-container { grid-row: 3; }.button-container { grid-row: 4; }.nested-a { grid-column-start: 1; grid-row-start: 1; }.nested-b { grid-column-start: 2; grid-row-start: 1; }.nested-c { grid-column-start: 3; grid-row-start: 1; }.nested-d { grid-column-start: 4; grid-row-start: 1; }

 <div class="container"> <div class="nav-container"> <nav class="nav-container-grid"> <a class="nested-a">About</a> <a class="nested-b">Store</a> <a class="nested-c">Gmail</a> <a class="nested-d">Images</a> </nav> </div> <div id="image-container"> <img src='https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png' alt='Google'> </div> <div class="button-container"> <button>Google Search</button> <button>I'm Feeling Lucky</button> </div> <div class="search-container"> <input type="search" placeholder="Search"> </div> </div>