اول مسئله چیدمان را مشخص کنید
قبل از نوشتن CSS، مشخص کنید چه چیزهایی باید در یک ردیف هم‌تراز باشند و کدام بخش‌ها با کم‌شدن فضا باید زیر هم بروند. یک چیدمان خوب با محتوای کوتاه و بلند کار می‌کند. اگر فقط متن نمونه کوتاه را امتحان کنید، احتمالاً خطا را وقتی می‌بینید که محتوای واقعی وارد شود.
در این درس سه کارت را با Grid می‌چینیم. Flexbox برای بسیاری از ردیف‌ها و ستون‌های تک‌بعدی مناسب است؛ Grid برای کنترل شبکه دوبعدی مفید است. هیچ‌کدام جای معنا و ترتیب درست HTML را نمی‌گیرند.
عرض واقعی یک جعبه
در مدل پیش‌فرض، width می‌تواند فقط عرض محتوا باشد و padding و border به آن اضافه شوند. با box-sizing:border-box، اندازه تعیین‌شده این بخش‌ها را هم در بر می‌گیرد. این انتخاب فهم اندازه‌ها را ساده می‌کند، اما همچنان باید عرض والد، فاصله‌ها و حداقل اندازه محتوا را بررسی کنید.
در Grid و Flexbox، متن یا کد بلند ممکن است نگذارد فرزند از حداقل اندازه محتوایش کوچک‌تر شود. min-width:0 روی فرزند مناسب و overflow:auto در محفظه کد، دو ابزار متفاوت‌اند: اولی اجازه کوچک‌شدن می‌دهد و دومی محل اسکرول را مشخص می‌کند. پنهان‌کردن سرریز کل صفحه راه‌حل ریشه‌ای نیست.
چیدمان را در مرورگر امتحان کنیم
چیدمان واکنش‌گرا با Grid
تعداد ستون‌ها و فاصله را تغییر دهید؛ پیش‌نمایش در همین صفحه به‌روز می‌شود.
<!doctype html>
<html lang="fa" dir="rtl">
<head><meta charset="utf-8"><link rel="stylesheet" href="layout.css"></head>
<body>
<main class="cards">
<article><h2>HTML</h2><p>ساختار صفحه</p></article>
<article><h2>CSS</h2><p>ظاهر و چیدمان</p></article>
<article><h2>JavaScript</h2><p>رفتار صفحه</p></article>
</main>
</body>
</html>یک راهنمایی می‌خواهم
display: grid را روی والد کارت‌ها قرار دهید.
راهنمایی بیشتر
برای حفظ خوانایی در موبایل، از auto-fit و minmax استفاده کنید.
در layout.css، مقدار حداقل عرض کارت را تغییر دهید. وقتی عرض کم می‌شود، کارت‌ها باید به ردیف بعد بروند. سپس یک کلمه بلند یا چند جمله به کارت اضافه کنید. اگر ظاهر خراب شد، ابتدا اندازه والد و محدودیت فرزند را ببینید؛ اضافه‌کردن marginهای تصادفی معمولاً مشکل را فقط پنهان می‌کند.
هم‌ترازی را قابل بررسی کنید
- لبه شروع عنوان و متن‌های مرتبط را روی یک خط مشخص نگه دارید.
- اندازه آیکن را ثابت و ستون متن را منعطف کنید.
- برای یک کنترل، label و ورودی را در یک گروه نگه دارید.
- متن انگلیسی، ایمیل و کد را با جهت مناسب ایزوله کنید.
- در موبایل، ستون‌بندی را دوباره طراحی کنید؛ فقط فاصله دسکتاپ را کوچک نکنید.
ادامه مطالعه
بعد از اینکه این مثال را بدون کمک ساختید، چیدمان یک فرم را امتحان کنید: دو ورودی کنار هم در دسکتاپ و یک ستون در موبایل. رفتار فوکوس و متن خطا را هم وارد طرح کنید. چیدمان در حالت خالی و حالت خطا باید به اندازه حالت ایده‌آل روشن باشد.