2-column CSS Flex/Grid for UL - html

Question

I've spent way too long at work today thinking about this, so I figured I'd ask the internet hive-mind.
I've got a standard <ul> with a number of <li> elements (currently 12 but could vary). I'd like to arrange these into 2 columns of equal width WHILE also not making the <ul> span full block width. The solution also needs to support IE11 unfortunately (no earlier). Any solution needs to also be responsive, so no set non-percentage widths. I've tried a couple different scenarios (you will want to expand snippet to full screen):
Solution 1 (grid):
*{
box-sizing: border-box;
}
div{
display: flex;
justify-content: center;
}
ul{
list-style: none;
margin-top: 0;
margin-bottom: 0;
padding: 0;
display: inline-grid;
grid-template-columns: repeat(2, 1fr);
}
li{
padding: 15px;
}
<div>
<ul>
<li>In maximus viverra scelerisque. Vestibulum dignissim ex non</li>
<li>Sed suscipit, turpis in suscipit consectetur, ante sem.</li>
<li>Ut et mauris et dui gravida fringilla ut.</li>
<li>Nullam iaculis fermentum sodales. Proin commodo eleifend lacus.</li>
<li>Sed molestie, libero at hendrerit sollicitudin, enim nisi.</li>
<li>Mauris a facilisis dolor. Sed pharetra hendrerit dolor.</li>
<li>Sed vitae felis tellus. Quisque sagittis, felis vitae.</li>
<li>Integer et elit metus. Cras congue vestibulum hendrerit.</li>
<li>Fusce suscipit ante sed tristique euismod. Duis quis.</li>
<li>Vestibulum quam felis, fringilla in justo malesuada, tristique.</li>
<li>Integer volutpat quam sed urna iaculis mollis. Maecenas.</li>
<li>Nullam dignissim ipsum vitae finibus dignissim. Nam viverra.</li>
</ul>
</div>
This above solution essentially works perfectly - it arranges the <li>s in 2 columns, the UL is centered in the containing flex div. But of course IE has issues, and while I could use IE prefixes in the old spec, I would still need to manually assign a column/row position for each li which is not possible for a list that could potentially have any number of elements.
Solution 2 (flex):
*{
box-sizing: border-box;
}
div {
display: flex;
justify-content: center;
}
ul {
list-style: none;
margin-top: 0;
margin-bottom: 0;
padding: 0;
display: inline-flex;
flex-wrap: wrap;
}
li {
padding: 15px;
width: 50%;
}
<div>
<ul>
<li>In maximus viverra scelerisque. Vestibulum dignissim ex non</li>
<li>Sed suscipit, turpis in suscipit consectetur, ante sem.</li>
<li>Ut et mauris et dui gravida fringilla ut.</li>
<li>Nullam iaculis fermentum sodales. Proin commodo eleifend lacus.</li>
<li>Sed molestie, libero at hendrerit sollicitudin, enim nisi.</li>
<li>Mauris a facilisis dolor. Sed pharetra hendrerit dolor.</li>
<li>Sed vitae felis tellus. Quisque sagittis, felis vitae.</li>
<li>Integer et elit metus. Cras congue vestibulum hendrerit.</li>
<li>Fusce suscipit ante sed tristique euismod. Duis quis.</li>
<li>Vestibulum quam felis, fringilla in justo malesuada, tristique.</li>
<li>Integer volutpat quam sed urna iaculis mollis. Maecenas.</li>
<li>Nullam dignissim ipsum vitae finibus dignissim. Nam viverra.</li>
</ul>
</div>
While this above solution is technically acceptable (works well enough, including IE11), the issue here is visual appeal. Because the <ul> now spans full width, despite being centered in the containing flex div, the <li>s spaning the 50% with left aligned text leaves a large about of visual white space on the right side of each column (wide screen needed to see extra space).
Solution 3 (tables for IE11):
I'm not going to bother posting a snippet for this one, as it was the least appealing. Essentially it involved targeting IE11 specifically, setting the <ul> to display:table;, setting the <li>s to display:table-cell; float: left; width: 50%; ...long story short, it was a mess that still didn't work visually.
Should I just cut my losses and go with solution 2? I'd really like to get the visual layout of solution 1 if possible... Any ideas?

Answer 1

The display: flex; property will turn the element into a flex container that affects the layout of the direct child elements only, so if it is only on the outer div it is only affecting the layout of the ul that is the direct child. For this reason I added display: flex; to the ul element so the contained child li elements get the flexible layout. A great resource for more info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In order to address the extra white space I added a max-width to the ul less than 100% so the width does not go all the way to the edges, adjust this value as needed. I also changed the padding on the li elements, only padding on the left and right, and added margin-bottom to space them vertically.
Lastly, I recommend you add a class to your div wrapper so you can target everything contextually, otherwise your CSS targeting div will hit every div in the site, can be very problematic.
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
justify-content: center;
}
.wrapper ul {
list-style: none;
margin: 0;
padding: 0;
max-width: 90%; // adjust the width compared to the container
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.wrapper li {
padding: 0 15px; // padding right and left only
margin-bottom: 20px; // vertical spacing between li elements
width: 50%;
}
<div class="wrapper">
<ul>
<li>In maximus viverra scelerisque. Vestibulum dignissim ex non</li>
<li>Sed suscipit, turpis in suscipit consectetur, ante sem.</li>
<li>Ut et mauris et dui gravida fringilla ut.</li>
<li>Nullam iaculis fermentum sodales. Proin commodo eleifend lacus.</li>
<li>Sed molestie, libero at hendrerit sollicitudin, enim nisi.</li>
<li>Mauris a facilisis dolor. Sed pharetra hendrerit dolor.</li>
<li>Sed vitae felis tellus. Quisque sagittis, felis vitae.</li>
<li>Integer et elit metus. Cras congue vestibulum hendrerit.</li>
<li>Fusce suscipit ante sed tristique euismod. Duis quis.</li>
<li>Vestibulum quam felis, fringilla in justo malesuada, tristique.</li>
<li>Integer volutpat quam sed urna iaculis mollis. Maecenas.</li>
<li>Nullam dignissim ipsum vitae finibus dignissim. Nam viverra.</li>
</ul>
</div>