-2

I wanted to ask how I would go about achieving the results mentioned in the title? This is different to the other answers as those answers don't use the display: grid; styling as mentioned in the answer below:

<ul class="item">
    <li class="headings">Heading 1:</li><li>Value 1 </li>
    <li class="headings">Heading 1:</li><li>Value 2</li>
    <li class="headings">Heading 3:</li>
    <li class="headings">Heading 4</li><li>Value 4</li>
    <li class="headings">Heading 5</li><li>Value 5</li></ul>
</ul>

I know the correct way to accomplish this would be to have a new unordered list for every 2nd list item, but for some reason the car-row outputs all the list items within a single unordered list.

Tim Kruger
  • 863
  • 2
  • 10
  • 26
  • https://stackoverflow.com/questions/14745297/how-to-display-an-unordered-list-in-two-columns – Eliseo Jul 05 '22 at 10:24
  • Does this answer your question? [How to display an unordered list in two columns?](https://stackoverflow.com/questions/14745297/how-to-display-an-unordered-list-in-two-columns) – Jaswinder Kaur Jul 05 '22 at 10:25
  • @JaswinderKaur no it seemed like the `display: grid;` styling mentioned below did the trick. – Tim Kruger Jul 05 '22 at 10:47

1 Answers1

3

You can use display grid. Something like this:

.item{
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
}
<ul class="item">
    <li class="headings">Heading 1:</li>
    <li>Value 1</li>
    <li class="headings">Heading 1:</li>
    <li>Value 2</li>
    <li class="headings">Heading 3:</li>
    <li>Value 3</li>
    <li class="headings">Heading 4</li>
    <li>Value 4</li>
    <li class="headings">Heading 5</li>
    <li>Value 5</li></ul>
</ul>

Or

You can change ul default behaviour, Something like this:

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}
Shahzaib
  • 159
  • 7