CSS trick to display several UL lists with LI elements in multiple columns, depending on the webpage width

Question

For an HTML game website I display several UL lists at the bottom of every page:

<h2>How to play?</h2>

<ul>
    <li><a href="/en/ws/google">Via Google</a></li>
    <li><a href="/en/ws/apple">Via Apple</a></li>
    <li><a href="/en/ws/facebook">Via Facebook</a></li>
    <li><a href="/en/ws/amazon">Via Amazon</a></li>
    <li><a href="/en/ws/huawei">Via Huawei</a></li>
</ul>

Currently the lists are just displayed one above the other:

In some Wordpress themes I can see that the lists are displayed near each other when the webpage is wide enough:

Could someone please recommend a CSS trick for doing it?

It is difficult to understand how Wordpress is doing it and I have also tried searching, but the keywords are too common to find good pointers for my problem.

UPDATE:

I have followed the now deleted (why?) suggestion by Majicman02 (thank you!) and have tried using Flexbox:

#footer {
    display: flex;
    flex-wrap: wrap;
}

<div id="footer">
    <h2>How to play?</h2>

    <ul>
        <li><a href="/en/ws/google">Via Google</a></li>
        <li><a href="/en/ws/apple">Via Apple</a></li>
        <li><a href="/en/ws/facebook">Via Facebook</a></li>
        <li><a href="/en/ws/amazon">Via Amazon</a></li>
        <li><a href="/en/ws/huawei">Via Huawei</a></li>
    </ul>

    <h2>Mobile game version</h2>

    <ul>
        <li><a href="/en/ws/android">For Android</a></li>
        <li><a href="/en/ws/ios">For iOS</a></li>
    </ul>

    <h2>Where to talk?</h2>

    <ul>
        <li><a href="https://facebook.com/groups/12345/">At Facebook</a></li>
    </ul>

    <h2>Other languages</h2>

    <ul>
        <li><a href="/de/ws">My word game (German)</a></li>
        <li><a href="/ru/ws">My word game (Russian)</a></li>
    </ul>

    <h2>Legal documents</h2>

    <ul>
        <li><a href="/en/ws/tos">Terms of service</a></li>
        <li><a href="/en/ws/privacy">Privacy policy</a></li>
        <li><a href="/de/ws/imprint">Impressum</a></li>
        <li><a href="/de/ws/dsgvo">Datenschutzerkl&auml;rung</a></li>
    </ul>
</div>

And the result looks good in the sense that the full webpage width is used.

But how to keep the h2-header above the ul-lists please?

I don't have any CSS for the footer yet. I am in a process of migrating my HTML game from being wrapped in a Wordpress website to a website generated completely by my game servlet and I wonder how to have a simple but multi-columned footer with several UL lists. — Alexander Farber, Aug 17 '21 at 15:31
inspect the code of that wordpress site and you have your answer — Temani Afif, Aug 17 '21 at 15:39
Maybe you want something link column-count? https://www.w3schools.com/cssref/css3_pr_column-count.asp — thetailor.de, Aug 17 '21 at 15:40
@AlexanderFarber - Maybe you can start with this article - https://css-tricks.com/snippets/css/complete-guide-grid/ You can easily align sections using CSS grids. If you are stuck anywhere, let me know. — Nitin, Aug 18 '21 at 10:39

Alexander Farber · Accepted Answer · 2021-08-18T11:10:43.137

Ok, I have got my multi-columned webpage footer working by using flex-wrap property of flexbox.

Also, I had to wrap my H2-headers and UL-lists by a DIV to prevent them from breaking apart:

#footer {
    display: flex;
    flex-wrap: wrap;
}

#footer > div {
    padding: 8px;
}

<div id="footer">
    <div>
        <h2>How to play?</h2>

        <ul>
            <li><a href="/en/ws/google">Via Google</a></li>
            <li><a href="/en/ws/apple">Via Apple</a></li>
            <li><a href="/en/ws/facebook">Via Facebook</a></li>
            <li><a href="/en/ws/amazon">Via Amazon</a></li>
            <li><a href="/en/ws/huawei">Via Huawei</a></li>
        </ul>
    </div>

    <div>
        <h2>Mobile game version</h2>

        <ul>
            <li><a href="/en/ws/android">For Android</a></li>
            <li><a href="/en/ws/ios">For iOS</a></li>
        </ul>
    </div>

    <div>
        <h2>Where to talk?</h2>

        <ul>
            <li><a href="https://facebook.com/groups/12345/">At Facebook</a></li>
        </ul>
    </div>

    <div>
        <h2>Other languages</h2>

        <ul>
            <li><a href="/de/ws">My word game (German)</a></li>
            <li><a href="/ru/ws">My word game (Russian)</a></li>
        </ul>
    </div>

    <div>
        <h2>Legal documents</h2>

        <ul>
            <li><a href="/en/ws/tos">Terms of service</a></li>
            <li><a href="/en/ws/privacy">Privacy policy</a></li>
            <li><a href="/de/ws/imprint">Impressum</a></li>
            <li><a href="/de/ws/dsgvo">Datenschutzerkl&auml;rung</a></li>
        </ul>
    </div>
</div>

Also, I have added some padding around those #footer children DIV elements.

CSS trick to display several UL lists with LI elements in multiple columns, depending on the webpage width

1 Answers1