How to have all links listed side-by-side with at most two text rows for each link, and if not possible then list them line-by-line?

Question

I'm using Fresh, TailwindCSS and daisyUI component to build a small height footer, with some modification of mine:

import IconSphere from "https://deno.land/x/[email protected]/tsx/sphere.tsx"
import IconBrandFacebook from "https://deno.land/x/[email protected]/tsx/brand-facebook.tsx"
import IconBrandDiscord from "https://deno.land/x/[email protected]/tsx/brand-discord.tsx"

export default function Footer() {
    return (
        <footer class="footer items-center p-4 bg-neutral text-neutral-content">
            <aside class="items-center grid-flow-col gap-8">
                <span class='text-2xl italic font-mono font-bold tracking-wide'>Trấn Kỳ</span>
                        <a class="link link-hover">Trấn Kỳ là gì?</a>
                        <a class="link link-hover">Lý do viết Trấn Kỳ</a>
                        <a class="link link-hover">Kế hoạch phát triển Trấn Kỳ</a>
                        <a class="link link-hover">Tích hợp Trấn Kỳ vào hệ thống của bạn</a>
                        <a class="link link-hover">Các buổi đáp ứng nhu cầu tự học lập trình</a>
            </aside> 
            <nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
                <IconSphere class="w-6 h-6" />
                <IconBrandDiscord class="w-6 h-6" />
                <IconBrandFacebook class="w-6 h-6" />           
            </nav>
        </footer>
    )
}

(Tailwind Playground)

On large screen it's perfect:

On medium screen, when the text is at most 2 rows, it's good as well:

However in small screen I don't want the text to squish like this:

In the <aside> element if I remove the grid-flow-col gap-8 classes and only use items-center then it works as expected on mobile:

I try this code:

<aside class="items-center md:grid-flow-col md:gap-8">

But then it preserves the layout for small screen to medium and large screens.

In short I want to build a footer that:

• List all links are listed side-by-side, with at most two text rows for each link
• If that's not possible then list them line-by-line

Is there a way to achieve that?

Answer 1

you can try do this :

<footer className='text-neutral-content flex xl:items-center justify-between bg-neutral-300 p-4'>
            <aside
                className='grid items-center gap-5 md:grid-cols-1
                lg:grid-cols-[minmax(min-content,max-content)_minmax(min-content,max-content)_minmax(min-content,max-content)_minmax(min-content,max-content)_minmax(min-content,max-content)_minmax(min-content,max-content)]'
            >
                <span className='font-mono text-2xl font-bold italic tracking-wide'>
                    Trấn Kỳ
                </span>
                <a className='link link-hover'>Trấn Kỳ là gì?</a>
                <a className='link link-hover'>Lý do viết Trấn Kỳ</a>
                <a className='link link-hover'>Kế hoạch phát triển Trấn Kỳ</a>
                <a className='link link-hover'>
                    Tích hợp Trấn Kỳ vào hệ thống của bạn
                </a>
                <a className='link link-hover'>
                    Các buổi đáp ứng nhu cầu tự học lập trình
                </a>
            </aside>
            <nav className='flex h-fit items-center gap-4 '>
                <FiInstagram className='h-6 w-6 ' />
                <FiTrello className='h-6 w-6 ' />
                <FiWatch className='h-6 w-6 ' />
            </nav>
        </footer>