使用 CSS Grid 或 Flexbox 居中环绕固定宽度的列答案

【问题标题】：Centering wrapping fixed-width columns with CSS Grid or Flexbox使用 CSS Grid 或 Flexbox 居中环绕固定宽度的列
【发布时间】：2020-10-11 02:19:58
【问题描述】：

是否可以使用 Flexbox 或 CSS Grid 在桌面和移动视口中将带有固定宽度网格项的包装 CSS 网格居中？如果可能，我的目标是在不诉诸媒体查询的情况下找到解决方案。

这是我能得到的最接近的仍然使用 CSS Grid 包装的解决方案（基于对“CSS 网格等宽”和类似查询的搜索）：

Codepen snippet - CSS Grid

html {
  height: 100%;
  margin: auto;
}

body {
  margin: 20px;
  place-self: center;
}

nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, 180px);
  grid-gap: 20px;
  max-width: 800px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

    <div class="container">
      <nav>
        <ul>
          <li>Link A</li>
        </ul>
        <ul>
          <li>Link B</li>
        </ul>
        <ul>
          <li>Link C</li>
        </ul>
        <ul>
          <li>Link D</li>
        </ul>
        <ul>
          <li>Link E</li>
        </ul>
      </nav>
    </div>

除了上面的sn-p，我也试过了：

将display: grid 添加到html 标记
将grid-auto-columns: 180px; 和grid-auto-flow: column; 添加到nav 标记

这些添加有助于使网格在视口内居中，但会导致环绕无法正常工作。

这是我尝试使用 Flexbox 的解决方案（有效，但列表网格不会在小于最大宽度的视口中居中 - 我希望在现有的左对齐上）：

Codepen snippet - Flexbox

html {
  display: flex;
  place-content: center;
  height: 100%;
  margin: 0;
}

body {
  margin: 20px;
  place-self: center;
}

nav {
  display: flex;
  flex-flow: row wrap;
  min-width: 280px;
  max-width: 800px;
  justify-content: start;
  align-content: center;
}

ul {
  list-style-type: none;
  margin: 0 20px 20px 0;
  padding: 0;
  width: 180px;

    <div class="container">
      <nav>
        <ul>
          <li>Link A</li>
        </ul>
        <ul>
          <li>Link B</li>
        </ul>
        <ul>
          <li>Link C</li>
        </ul>
        <ul>
          <li>Link D</li>
        </ul>
        <ul>
          <li>Link E</li>
        </ul>
      </nav>
    </div>

以下是我在发布之前引用的许多 Stack Overflow 线程中的一些：

【问题讨论】：

对齐内容：居中；在你的第一个 sn-p 的导航上？
将justify-content: center 添加到第一个sn-p 的nav 会在导航左侧创建一个看似随机的网格间隙。
别忘了你已经应用了一个最大宽度，缩小屏幕尺寸你会看到 justify-content:center 的效果
第一个 sn-p 的包装按原样工作 - 我的目标是使网格在视口中居中（就像在第二个 sn-p 中一样）。在第一个 sn-p 之后，我尝试进行一些修复来实现这一点 - 但它们要么将网格转换为列（使用 display: 属性），要么破坏包装（使用 grid-[...] 属性）。跨度>

标签： html css flexbox css-grid centering

【解决方案1】：

您可以尝试如下：

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, 180px);
  grid-gap: 20px;
  max-width: 800px;
  justify-content: center;
  margin: auto;
  width: 100%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  outline:1px solid green;
}

<nav>
  <ul>
    <li>Link A</li>
  </ul>
  <ul>
    <li>Link B</li>
  </ul>
  <ul>
    <li>Link C</li>
  </ul>
  <ul>
    <li>Link D</li>
  </ul>
  <ul>
    <li>Link E</li>
  </ul>
</nav>

【讨论】：