CSS Сетка: Как мне поместить все в один ряд? - PullRequest
Новая
       47

CSS Сетка: Как мне поместить все в один ряд?

0 голосов
/ 13 апреля 2020

Я пытаюсь использовать сетку больше, но я не могу понять, что должно быть простым вопросом. Как поместить все элементы в одну строку?

То есть я хочу эмулировать макет flex для одной строки.

Я знаю, что могу использовать grid-template-columns: 1fr 1fr 1fr 1fr; в приведенном ниже примере, но я не хочу указывать определенное количество столбцов c. 

div#flex {
  display: flex;
  flex-direction: row; /* I know that’s not necessary */
}
div#flex>button {
  flex: 1;
}

div#grid {
  display: grid;
  grid-template-rows: 1fr;
}
div#grid>button {

}
<div id="flex">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
  <button>Four</button>
</div>

<div id="grid">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
  <button>Four</button>
</div>

1 Ответ

0 голосов
/ 13 апреля 2020

Вы можете просто добавить grid-auto-flow: column; вместо: https://stackblitz.com/edit/angular-9midxc

CSS: 

div#flex {
  display: flex;
  flex-direction: row; /* I know that’s not necessary */
}
div#flex>button {
  flex: 1;
}

div#grid {
  display: grid;
   grid-auto-flow: column; 
}
div#grid>button {

}

HTML: 

<div id="flex">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
  <button>Four</button>
</div>

<div id="grid">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
  <button>Four</button>
</div>
...