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

Question

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

这是我能得到的最接近解决方案的方法，它仍然使用 CSS Grid 进行包装(基于对“CSS grid equal width”和类似查询的搜索):

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>

除了上面的代码片段，我还尝试过:

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

这些添加有助于使网格在视口(viewport)内居中，但会导致环绕功能无法正常运行。

---

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

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?

• CSS grid equal size 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>