Centering wrapping fixed-width columns with CSS Grid or Flexbox

user_13783899 0
Viewed 208

Would it be possible to center a wrapping CSS grid with fixed-width grid items inside both a desktop and mobile viewport, using Flexbox or CSS Grid? I am aiming toward a solution without resorting to media queries if possible.

Here is the closest I could get to a solution that still wraps using CSS Grid (based on searches for "CSS grid equal width" and similar queries):

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>

In addition to the above snippet, I have also tried:

  • adding display: grid to the html tag
  • adding grid-auto-columns: 180px; and grid-auto-flow: column; to the nav tag

These additions help center the grid inside the viewport, but cause the wrapping to not function properly.

Here is my attempt at a solution using Flexbox (effective, but the list grid doesn't center in viewports smaller than max-width - which I'd desire over the existing left alignment):

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>

Here are some of many Stack Overflow threads that I referenced prior to posting:

flexbox css-grid centering css html
1 Answers

You can try like below:

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>

user_86203330
Related