انتخاب درست بین Flexbox و Grid

عرض پنجره را تغییر دهید؛ در فضای عریض، پنج کارت را در دو چیدمان مقایسه کنید.

فلکس؛ تقسیم مستقل فضای هر خط

کارت 1
کارت 2
کارت 3
کارت 4
کارت 5

گرید؛ ستون های مشترک بین ردیف ها

کارت 1
کارت 2
کارت 3
کارت 4
کارت 5

پروژه ترکیبی

دوره CSS

متن بلندتر این کارت، تفاوت ارتفاع محتوا را نشان می دهد. شبکه بیرونی ستون های مشترک دارد و فلکس داخلی لینک ها را به انتهای کارت می برد.

تمرین مستقل

این مجموعه را به شبکه منعطف با حداقل پیشنهادی 220px تبدیل کنید؛ tools باید گروه فلکس چندخطی با gap برابر 12px باشد.

فعال کردن پاسخ

پس از تلاش مستقل، solution.css را بعد از style.css در head لینک کنید. راهنمای کامل در README.txt است.