борется с сеткой CSS

Question

Я хотел бы выровнять по горизонтали на одной строке набор элементов div класса a в пределах container div.

Почему не работает приведенный ниже код CSS?

.a {
  border: 1px solid black;
}

#container {
  display:grid;
  grid-auto-columns: minmax(10px, 35px);
  grid-template-rows:1fr;
}

Я создал jsFiddle для него. Я ожидал, что div с 1 по 6 все будут на одной линии, но я получаю следующий результат:

Answer 1

Вам необходимо изменить поток по умолчанию ^ref на столбец:

.a {
  border: 1px solid black;
}

#container {
  display: grid;
  grid-auto-columns: minmax(10px, 35px);
  grid-template-rows: 1fr;
  grid-auto-flow:column; /* added */
}

<div id="container">
  <div class="a">
    1
  </div>
  <div class="a">
    2
  </div>
  <div class="a">
    3
  </div>
  <div class="a">
    4
  </div>
  <div class="a">
    5
  </div>
  <div class="a">
    6
  </div>
</div>

Или определите столбец шаблона, как показано ниже:

.a {
  border: 1px solid black;
}

#container {
  display: grid;
  grid-template-columns:repeat(auto-fill, minmax(10px, 35px));
  grid-template-rows: 1fr;
}

<div id="container">
  <div class="a">
    1
  </div>
  <div class="a">
    2
  </div>
  <div class="a">
    3
  </div>
  <div class="a">
    4
  </div>
  <div class="a">
    5
  </div>
  <div class="a">
    6
  </div>
</div>

Answer 2

Попробуйте следующий код:

CSS:

#container {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    grid-gap: 1rem;
}

Примечание: его выравнивание по горизонтали на одной линии.