Как в flexbox сделать карточки гибкими в row как в grid?

Question

[Speakermen]

PS tailwindcss Flex Basis

Когда задаю flex-nowrap карточки ведут себя нормально, но не переносятся на следующую позицию
960 - 72(24 * 3 margin) = 888 / 4 cols 222 только ставлю flex-wrap они не помещаются img 240 и другой блок тоже ведёт себя довольно странно и выходит 3 cols Хочу добиться (4 x 25% gap - 24) с flex-wrap, но как сделать равномерное распределение как с flex-nowrap, или grid grid-cols-4?

<div class="container lg:container mx-auto h-16">
   Тут проблема:
    <!--<div class="flex flex-row gap-x-6 gap-y-6 flex-wrap">
        <div class="bg-white basis-3/12">
            <img src="../assets/Artboard-32.png" alt="">
            <div class="p-4 pt-3 leading-none font-normal">
                <h3 class="text-sm text-slate-900"><a
                        href="http://music.flatfull.com/waveme/station/10-freaky-girls/">10 Freaky
                        Girls</a></h3>
                <span class="text-xs text-slate-400">Metro Boomin Feat. 21 Savage</span>
            </div>
        </div>
        <div class="bg-white basis-3/12">
            <img src="../assets/Artboard-32.png" alt="">
            <div class="p-4 pt-3 leading-none font-normal">
                <h3 class="text-sm text-slate-900"><a
                        href="http://music.flatfull.com/waveme/station/10-freaky-girls/">10 Freaky
                        Girls</a></h3>
                <span class="text-xs text-slate-400">Metro Boomin Feat. 21 Savage</span>
            </div>
        </div>
        <div class="bg-white basis-3/12">
            <img src="../assets/Artboard-32.png" alt="">
            <div class="p-4 pt-3 leading-none font-normal">
                <h3 class="text-sm text-slate-900"><a
                        href="http://music.flatfull.com/waveme/station/10-freaky-girls/">10 Freaky
                        Girls</a></h3>
                <span class="text-xs text-slate-400">Metro Boomin Feat. 21 Savage</span>
            </div>
        </div>
        <div class="bg-white basis-3/12">
            <img src="../assets/Artboard-32.png" alt="">
            <div class="p-4 pt-3 leading-none font-normal">
                <h3 class="text-sm text-slate-900"><a
                        href="http://music.flatfull.com/waveme/station/10-freaky-girls/">10 Freaky
                        Girls</a></h3>
                <span class="text-xs text-slate-400">Metro Boomin Feat. 21 Savage</span>
            </div>
        </div>
    </div>-->
    <div class="grid grid-cols-4 gap-x-6 gap-y-6">
        <div class="bg-white">
            <img src="../assets/Artboard-32.png" alt="">
            <div class="p-4 pt-3 leading-none font-normal">
                <h3 class="text-sm text-slate-900 hover:text-orange-40"><a
                        href="http://music.flatfull.com/waveme/station/10-freaky-girls/">10
                        Freaky
                        Girls</a></h3>
                <span class="text-xs text-slate-400">Metro Boomin Feat. 21 Savage</span>
            </div>
        </div>
        <div class="bg-white">
            <img src="../assets/Artboard-32.png" alt="">
            <div class="p-4 pt-3 leading-none font-normal">
                <h3 class="text-sm text-slate-900 hover:text-orange-40"><a
                        href="http://music.flatfull.com/waveme/station/10-freaky-girls/">10
                        Freaky
                        Girls</a></h3>
                <span class="text-xs text-slate-400">Metro Boomin Feat. 21 Savage</span>
            </div>
        </div>
        <div class="bg-white">
            <img src="../assets/Artboard-32.png" alt="">
            <div class="p-4 pt-3 leading-none font-normal">
                <h3 class="text-sm text-slate-900 hover:text-orange-40"><a
                        href="http://music.flatfull.com/waveme/station/10-freaky-girls/">10
                        Freaky
                        Girls</a></h3>
                <span class="text-xs text-slate-400">Metro Boomin Feat. 21 Savage</span>
            </div>
        </div>
        <div class="bg-white">
            <img src="../assets/Artboard-32.png" alt="">
            <div class="p-4 pt-3 leading-none font-normal">
                <h3 class="text-sm text-slate-900 hover:text-orange-40"><a
                        href="http://music.flatfull.com/waveme/station/10-freaky-girls/">10
                        Freaky
                        Girls</a></h3>
                <span class="text-xs text-slate-400">Metro Boomin Feat. 21 Savage</span>
            </div>
        </div>

        <div class="bg-white">
            <img src="../assets/Artboard-32.png" alt="">
            <div class="p-4 pt-3 leading-none font-normal">
                <h3 class="text-sm text-slate-900 hover:text-orange-40"><a
                        href="http://music.flatfull.com/waveme/station/10-freaky-girls/">10
                        Freaky
                        Girls</a></h3>
                <span class="text-xs text-slate-400">Metro Boomin Feat. 21 Savage</span>
            </div>
        </div>
    </div>
</div>

Comments

[Ankhena]

Пока не всё понятно.
Вы хотите, чтобы 4 карточки по 240 поместились в 960 и между ними еще должны быть отступы по 24px?

[Speakermen]

Ankhena, хотелось бы чтобы 222x4 и 24x3 было flex-wrap: wrap; задаю и карточки не помещаются не знаю почему они становятся 240 при flex-wrap: nowrap; они автоматически подстраиваются под 222x4 и 24x3 img max-width:100%
codepen

[Ankhena]

Speakermen, гридами это делать заметно проще.
Флексами вам будет нужен calc для ширины (или basis).

Оформите песочницу с видимой проблемой на codepen.io

[Speakermen]

Ankhena, codepen

[Ankhena]

Speakermen, вы задали flex-basis 25%. 4х25% это уже 100%, а вы ещё хотите отступы.
Вам нужен calc
типа calc(25% - 24px*3/4);

Но я бы, конечно, гридами, потому что вообще не будет проблем с пересчетами при изменениях размеров.

[Speakermen]

Ankhena, спасибо вам огромное HTML Academy. good! Я учусь перехожу с float>flex>grid)