使用 CSS 网格或 Flexbox 居中环绕固定宽度的列

Question

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

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

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>

除了上面的代码片段，我也尝试过：

将 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 线程中的一些：

How to create centered CSS grid with equal width columns?

Answer 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>

使用 CSS 网格或 Flexbox 居中环绕固定宽度的列

Centering wrapping fixed-width columns with CSS Grid or Flexbox

html

css

centering

flexbox

css-grid