Центрирование, перенос столбцов фиксированной ширины с помощью CSS Grid или Flexbox - PullRequest
Новая
       108

Центрирование, перенос столбцов фиксированной ширины с помощью CSS Grid или Flexbox

3 голосов
/ 21 июня 2020

Можно ли с помощью Flexbox или CSS Grid центрировать обтягивающую сетку CSS с элементами сетки фиксированной ширины как на рабочем столе, так и на мобильном устройстве? Я стремлюсь к решению, если возможно, не прибегая к медиа-запросам.

Вот самое близкое к решению, которое я мог бы найти, которое все еще оборачивается с использованием CSS Grid (на основе поиска "CSS grid equal width "и аналогичные запросы):

фрагмент Codepen - 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

Эти добавления помогают центрировать сетку внутри области просмотра, но приводят к некорректной работе упаковки.

Вот моя попытка решения с использованием Flexbox (эффективно, но сетка списка не центрируется в окнах просмотра меньше max-width - чего я бы хотел поверх существующего выравнивания по левому краю):

Фрагмент Codepen - 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>

Вот некоторые из многих потоков переполнения стека, на которые я ссылался перед публикацией:

1 Ответ

1 голос
/ 21 июня 2020

Вы можете попробовать, как показано ниже: 

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