Определение количества строк в сетках CSS - PullRequest
Новая
       5

Определение количества строк в сетках CSS

5 голосов
/ 21 января 2020

У меня слегка гипотетический вопрос:

Если у меня был <ul>, и я хотел бы использовать css сетки для отображения <li> в вертикальном списке, есть ли способ автоматизировать это так, что если число <li> изменилось, число строк будет увеличиваться / уменьшаться автоматически?

Пример: 

ul {
  display: grid;
  grid-template-rows: repeat(NUM, 1fr);
}

<ul>
  <li>item one</li>
  <li>item two</li>
  <li>item three</li>
</ul>

Здесь NUM указывает количество строк в шаблоне, но если бы я добавил еще один <li>, мне бы пришлось go и изменить значение NUM .

Есть ли способ распознать количество дочерних элементов и соответственно автоматически установить количество строк?

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

Ответы [ 2 ]

2 голосов
/ 21 января 2020

Просто определите grid-auto-rows, и вам не нужно знать количество предметов 

ul {
  display: grid;
  grid-auto-rows:1fr;
  margin:10px;
  padding:0;
}
ul li {
  border:1px solid;
  list-style-type:none;
}
<ul>
  <li>item <br>one</li>
  <li>item two</li>
  <li>item three</li>
</ul>

<ul>
  <li>item <br>one</li>
  <li>item two</li>
  <li>item three</li>
  <li>item two</li>
  <li>item three</li>
</ul>

<ul>
  <li>item <br>one</li>
  <li>item two</li>
</ul>

Если элемент сетки расположен в строке или столбце, размер которого явно не определен в строках-шаблонах-сетках или столбцах-шаблонах-сетках, неявные следы сетки созданы, чтобы держать это. Это может произойти либо путем явного позиционирования в строке или столбце, находящемся за пределами диапазона, либо с помощью алгоритма автоматического размещения, создающего дополнительные строки или столбцы. Свойства grid-auto-columns и grid-auto-row указывают размер таких неявно созданных дорожек. ref

0 голосов
/ 21 января 2020

просто попробуйте (grid-template-columns) свойство с автозаполнением и minmax (минимальный размер, который вы хотите дать один элемент, максимальный размер, который вы хотите дать один элемент), используйте fr (дробь), чтобы получить максимальный размер, чтобы получить Эффективно реагирующая сетка. И добавьте повтор для автоматического применения этого свойства. 

ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  }
...