HTML + CSS pozycjonowanie elementów za pomocą display grid

Question

Witam, mam element ul o takiej strukturze: 

<ul>
 <li class="element_top">element 1</li>
 <li class="element_top">element 2</li>
 <li class="element_top">element 3</li>
 <li class="element_top">element 4</li>
 <li class="element_top">element 5</li>
 <li class="element_bottom">element 6</li>
 <li class="element_bottom">element 7</li>
 <li class="element_bottom">element 8</li>
 <li class="element_bottom">element 9</li>
</ul>

Oraz poddany takiemu stylowaniu:

ul {
	display: grid;
	grid-template-columns: 1fr;
	grid-column-gap: 0;
	grid-template-areas:
		"top"
		"bottom"
}

obiekty z klasami element_top oraz element_bottom

.element_top{
	 grid-area: top;
}
.element_bottom{
	grid-area: bottom;
}

Chciałem uzyskać efekt taki że obiekty z klasą element_top są u góry obok siebie, a te z klasą element_bottom na dole i też obok siebie. Niestety obiekty zamiast znajdować się obok siebie, to nakładają się na siebie. Zakładam że, brakuje jeszcze jakichś parametrów dla obiektu ul lub li. Próbowałem szukać dokładniejszych poradników na temat stosowania pozycjonowania grid, jednak nigdzie nie mogłem znaleźć takiego przykładu jak mój. 

Answer 1

Spróbuj użyć np.: grid-row i zmień zawartość grid-template-columns

[ on-line ]

<ul class="grid-container">
 <li class="element_top">element 1</li>
 <li class="element_top">element 2</li>
 <li class="element_top">element 3</li>
 <li class="element_top">element 4</li>
 <li class="element_top">element 5</li>
 <li class="element_bottom">element 6</li>
 <li class="element_bottom">element 7</li>
 <li class="element_bottom">element 8</li>
 <li class="element_bottom">element 9</li>
</ul>

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto;
  grid-gap: 0;
}

.element_top {
  grid-row: 1;
}
.element_bottom {
  grid-row: 2;
}