"Creating a 2-column layout for an unordered list using CSS Flex

Question

"Creating a 2-column layout for an unordered list using CSS Flex

After spending far too much time at work today pondering this issue, I've decided to turn to the collective wisdom of the internet.

My dilemma involves a standard <ul> containing multiple <li> elements (currently 12, but this number could vary). I am seeking a way to organize these into 2 columns of equal width without causing the <ul> to take up the entire block width. Additionally, any solution must be compatible with IE11 and be responsive, meaning no fixed percentage widths. Here are a couple of scenarios that I have tried:

Solution 1 (grid):

The above solution works quite well - it arranges the <li>s into 2 columns within a centered <ul> in a flex container. However, issues arise with IE compatibility and the need to manually assign position values for each <li>, which is impossible with variable list lengths.

Solution 2 (flex):

This alternative solution functions adequately and offers IE11 support, but it lacks visual appeal due to the <ul> extending across the full width, leaving excessive white space on the right side of each column on wide screens.

Solution 3 (tables for IE11):

I experimented with targeting IE11 specifically using table display properties, but the resulting layout was visually unpleasing and cumbersome to implement.

Should I settle for Solution 2, or is there a way to achieve the desired visual layout of Solution 1? Any suggestions would be greatly appreciated!

html css flexbox css-grid

Answer 1

Answer №1

The use of the display: flex; property transforms the element into a flex container, impacting only the layout of its direct child elements. Thus, when applied to the outer div, it specifically affects the layout of the directly nested ul. To ensure flexibility in the arrangement of child li elements, I included display: flex; within the ul element. For more comprehensive insights on flexbox, check out this valuable resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

To address any excess white space concerns, I introduced a max-width constraint for the ul element, keeping it under 100% width to prevent extending to the edges; feel free to adjust this value accordingly. Subsequently, alterations were made to the padding of the li items, applying padding exclusively on their left and right sides while also incorporating margin-bottom to create vertical spacing between them.

Lastly, I recommend assigning a class to your div wrapper to facilitate targeted styling adjustments within that context. Failing to do so might lead to unintended consequences where global CSS rules target all div elements across the website, potentially causing conflicts.

* {
    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>

Answer 2

The use of the display: flex; property transforms the element into a flex container, impacting only the layout of its direct child elements. Thus, when applied to the outer div, it specifically affects the layout of the directly nested ul. To ensure flexibility in the arrangement of child li elements, I included display: flex; within the ul element. For more comprehensive insights on flexbox, check out this valuable resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

To address any excess white space concerns, I introduced a max-width constraint for the ul element, keeping it under 100% width to prevent extending to the edges; feel free to adjust this value accordingly. Subsequently, alterations were made to the padding of the li items, applying padding exclusively on their left and right sides while also incorporating margin-bottom to create vertical spacing between them.

Lastly, I recommend assigning a class to your div wrapper to facilitate targeted styling adjustments within that context. Failing to do so might lead to unintended consequences where global CSS rules target all div elements across the website, potentially causing conflicts.

* {
    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>

"Creating a 2-column layout for an unordered list using CSS Flex

Answer №1

Similar questions

Incorporate various style components to enhance the appearance of an item in ExtJS

Unexpected behavior in Bootstrap 4 table column sizing issue detected

Tips for concealing elements beyond div boundaries

Leveraging the (click) event within an HTML template to manage a [hidden] element located in a different template using Angular 2

Creating a form with required fields in Angular and using the ngIf directive

Ways to display notifications when the user is not actively browsing the website?

continuously repeating css text animation

Having difficulty formatting text alignment using CSS

impact on the shape of the region's map

Replacing the yellow autofill background

A space designated for numerous receivers

Having trouble applying styles to a component using forwardRef

What is the best way to position a box in the center using CSS?

What steps can be taken to ensure the CSS/HTML image aspect ratio remains consistent on various monitors?

Ways to divide the vuetify-text-field-label into two lines

Converting HTML to PDF using AngularJS

Unable to expand or collapse rows in ng-table

Obtain the value of a two-handle slider using jQuery

Validation needed for data list option

Changing Image Size in Real Time