How would I go about creating an unordered list that displays 2 list items per line?-CodePudding

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 >
    <li >Heading 1:</li><li>Value 1 </li>
    <li >Heading 1:</li><li>Value 2</li>
    <li >Heading 3:</li>
    <li >Heading 4</li><li>Value 4</li>
    <li >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.

CodePudding user response：

You can use display grid. Something like this:

.item{
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

<ul >
    <li >Heading 1:</li>
    <li>Value 1</li>
    <li >Heading 1:</li>
    <li>Value 2</li>
    <li >Heading 3:</li>
    <li>Value 3</li>
    <li >Heading 4</li>
    <li>Value 4</li>
    <li >Heading 5</li>
    <li>Value 5</li></ul>
</ul>

You can change ul default behaviour, Something like this:

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}