如何在嵌套的 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>