При помощи Grid сделать список в строку

191

29 августа 2019, 16:10

Не соображу как при помощи Grid сделать список в строку (количество элементов LI неизвестно, генерируется автоматически)

ul { 
  display:grid; 
}

<ul> 
    <li><a href="#">item-1</a></li> 
    <li><a href="#">item-2</a></li> 
    <li><a href="#">item-3</a></li> 
    <li><a href="#">item-4</a></li> 
    <li><a href="#">item-5</a></li> 
</ul>

Answer 1

repeat в общем т.е повторить одну фракцию пять раз

li { 
  list-style: none; 
} 
 
a { 
  text-decoration: none; 
  font-size: 1.4em; 
} 
 
ul { 
  display: grid; 
  grid-template-columns: repeat(5, 1fr); 
}

<ul> 
  <li><a href="">link1</a></li> 
  <li><a href="">link2</a></li> 
  <li><a href="">link3</a></li> 
  <li><a href="">link4</a></li> 
  <li><a href="">link5</a></li> 
</ul>