درس 36 از دوره آموزش HTML و CSS ارومیا دیزاین
چند کارت خدمات دارید و می خواهید ستون های ردیف دوم دقیقاً زیر ستون های ردیف اول بمانند. با تغییر عرض صفحه، تعداد ستون ها باید کم شود و متن هیچ کارتی از صفحه بیرون نزند. CSS Grid در چنین موقعیتی به شما اجازه می دهد ردیف و ستون را با هم تعریف کنید. در این درس، یک شبکه فارسی می سازیم و تفاوت آن را با چیدمان Flexbox می بینیم.
پروژه و پاسخ تمرین: دانلود ZIP پروژه درس 36؛ شامل index.html، style.css، solution.css و راهنمای آزمایش است. ZIP را استخراج و فایل HTML را باز کنید؛ پروژه بدون اینترنت و نصب اجرا می شود.
CSS Grid چیست و چه تفاوتی با Flexbox دارد؟
Grid ابزار چیدمان دو بعدی است؛ اندازه ستون ها و ارتباط ردیف ها را در یک شبکه مشترک کنترل می کنیم. در درس Flexbox دیدیم که هر خط فلکس فضای خودش را مستقل تقسیم می کند. در گرید، کارت های چند ردیف می توانند روی ستون های مشترک بنشینند. هر دو روش مفیدند و حتی می توانیم در یک صفحه از هر دو استفاده کنیم.
برای منو یا گروه دکمه ها که بیشتر روی یک مسیر تنظیم می شوند، Flexbox اغلب ساده است. برای فهرست محصول و خدمات با ستون های مشترک، Grid مناسب است. این تقسیم بندی یک قانون اجباری نیست؛ معیار، ارتباط مورد نیاز اجزای صفحه است. برای شروع، شبکه کارت ها را با Grid می سازیم و داخل هر کارت، لینک پایانی را با Flexbox تنظیم می کنیم.
ساخت اولین شبکه؛ قواعد را روی والد بنویسید
<div class="cards"> <article class="card">کارت اول</article> <article class="card">کارت دوم</article> <article class="card">کارت سوم</article> </div>
.cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
با display: grid، فرزندان مستقیم cards آیتم گرید می شوند. سه ستون تعریف کرده ایم و مرورگر کارت ها را به ترتیب در خانه ها قرار می دهد. عنوان و پاراگراف داخل هر کارت خودکار عضو شبکه بیرونی نیستند. اگر کلاسی را روی عنصر اشتباه بگذارید، نتیجه متفاوت می شود؛ انتخابگرهای CSS و رابطه والد و فرزند را مرور کنید.
نوشتن display: grid به تنهایی سه ستون ایجاد نمی کند؛ تعریف ستون لازم است. همچنین Grid ساختار معنایی HTML را جایگزین نمی کند. کارت مستقل می تواند article باشد و مجموعه کارت ها در section با عنوان مناسب قرار بگیرد. برای انتخاب تگ ها، درس ساختار معنایی HTML راهنمای مناسبی است.
ستون، ردیف، خانه و خط شبکه را بشناسید
ستون یک مسیر عمودی و ردیف یک مسیر افقی در شیوه نوشتن معمول این پروژه است. محل برخورد ردیف و ستون یک خانه می سازد. مرز مسیرها را خط شبکه می نامیم؛ سه ستون، چهار خط مرزی دارند. لازم نیست برای هر خط یک عنصر HTML بسازید. خطوط بخشی از مدل چیدمان CSS هستند و ابزار توسعه مرورگر می تواند آن ها را روی صفحه نشان دهد.
در صفحه افقی فارسی با dir برابر rtl، خط شماره اول ستون ها از سمت راست شروع می شود. شماره خط با شماره کارت یکی نیست: کارت اول ممکن است چند ستون را بپوشاند. ترتیب نوشتن HTML را منطقی نگه دارید؛ جابه جایی دیداری نباید باعث شود مسیر Tab با انتظار کاربر ناسازگار شود.
واحد fr؛ تقسیم فضای باقی مانده
.layout {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
fr سهمی از فضای قابل تقسیم شبکه را بیان می کند. در نمونه ساده بالا و وقتی حداقل اندازه محتوا مانع نشود، ستون دوم دو سهم و ستون اول یک سهم می گیرد. مرورگر ابتدا مواردی مانند فاصله ستون ها و اندازه های ثابت را در محاسبه وارد می کند؛ fr را با درصد عرض کل والد یکسان تصور نکنید. برای مقایسه با px و درصد، درس واحدهای اندازه گیری CSS را ببینید.
نوشتن سه ستون 33 درصدی همراه gap می تواند مجموع عرض و فاصله ها را از فضای والد بیشتر کند. سهم های fr برای تقسیم فضای باقی مانده مناسب هستند. با این حال، fr به تنهایی تضمین نمی کند که رشته بسیار بلند یا حداقل اندازه خودکار محتوا هرگز باعث سرریز نشود؛ در ادامه، حداقل اندازه را هم کنترل می کنیم.
repeat؛ ستون های تکراری را کوتاه بنویسید
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.card { min-width: 0; }
.card p { overflow-wrap: anywhere; }
repeat با عدد ثابت، الگوی ستون را همان تعداد تکرار می کند. این نمونه سه ستون هم سهم دارد. minmax حد پایین و بالا را تعیین می کند؛ حد پایین صفر اجازه می دهد مسیر از حداقل مبتنی بر محتوای بلند کوچک تر شود. min-width: 0 روی کارت نیز محدودیت خودکار خود آیتم را کاهش می دهد. رشته بدون فاصله همچنان به قانون شکستن متن نیاز دارد.
این سه ستون در صفحه خیلی باریک هم سه ستون می مانند و کارت ها ممکن است بیش از حد تنگ شوند. پس این مثال برای فهم تعریف صریح ستون است، نه نسخه نهایی پروژه. برای تفاوت شکستن رشته، اسکرول و برش، درس overflow در CSS را مرور کنید. پنهان کردن سرریز کل صفحه، راه حل عمومی مشکل اندازه گذاری نیست.
شبکه منعطف با auto-fit و minmax
.cards {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 20px;
}
این قانون نسخه اصلی پروژه است. auto-fit تعداد ستون هایی را می سازد که در فضای موجود جا می شوند. حد پایین هر مسیر، کوچک ترِ عرض والد و 240px است؛ بنابراین وقتی خود والد از 240px باریک تر شود، حد پایین آن را مجبور به سرریز نمی کند. حد بالا 1fr فضای باقی مانده را میان ستون های موجود تقسیم می کند. این روش به محتوای کارت و عرض والد وابسته است، نه نام دستگاه.
اگر فقط minmax(240px, 1fr) بنویسید، در والد باریک تر از 240px ممکن است سرریز ایجاد کنید. شکل min در این پروژه همین حالت را پوشش می دهد. این قاعده نیاز به تمام media query ها را حذف نمی کند؛ بعضی طراحی ها به تغییر مستقل اندازه متن، ترتیب بخش ها یا فاصله ها نیاز دارند. در این درس، تمرکز روی تغییر خودکار تعداد ستون هاست.
auto-fit و auto-fill چه تفاوتی دارند؟
هر دو برای تکرار خودکار مسیرها کاربرد دارند. auto-fill جای ستون های خالی قابل ایجاد را نگه می دارد؛ auto-fit بعد از جای گذاری آیتم ها، مسیرهای خالی را جمع می کند تا مسیرهای باقی مانده بتوانند فضای بیشتری بگیرند. تفاوت وقتی روشن می شود که تعداد آیتم ها از ظرفیت عرض موجود کمتر باشد. در پروژه، دو کارت نگه دارید و پنجره را عریض کنید؛ سپس دو مقدار را مقایسه کنید.
یک نکته مهم: خالی بودن خانه ای در آخرین ردیف الزاماً به معنی خالی بودن کل ستون نیست. اگر پنج کارت در شبکه سه ستونی داشته باشید، ستون سوم در ردیف اول کارت دارد؛ پس تنها بودن یا کم بودن کارت های آخرین ردیف باعث نمی شود آن ها مثل فلکس تمام عرض ردیف را بگیرند. این رفتار به هماهنگی ستون های شبکه کمک می کند.
gap فاصله خانه هاست؛ padding فاصله لبه ها
.cards {
gap: 24px 16px;
padding: 20px;
}
در gap دو مقداری، مقدار اول فاصله ردیف ها و مقدار دوم فاصله ستون هاست. gap فاصله بین مسیرها را می سازد؛ padding فاصله محتوا تا لبه داخلی والد را. برای تغییر فاصله اطراف کل مجموعه هم می توانید margin والد را بررسی کنید. درس مدل جعبه CSS کمک می کند این سه فاصله را با هم اشتباه نگیرید.
گسترش یک بخش از خط اول تا آخر
.lines {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.lines .wide {
grid-column: 1 / -1;
}
در بخش lines پروژه، آیتم wide تمام عرض شبکه صریح را می گیرد. 1 شماره خط شروع و -1 آخرین خط شبکه صریح است. این دستور به معنی «از کارت اول تا کارت آخر» نیست. اگر بعدها ستون های ضمنی بیرون شبکه صریح بسازید، -1 به آخرین خط تعریف صریح اشاره می کند؛ برای همین در این تمرین ستون اضافی ایجاد نمی کنیم.
این نوع امتداد برای عنوان یک گروه یا بخش توضیح مناسب است. از آن برای جابه جا کردن بی دلیل ترتیب محتوا استفاده نکنید. در صفحه فارسی، شروع خط ستون از راست است، اما امتداد از 1 تا -1 همچنان همه ستون های صریح را پوشش می دهد. فعال کردن Grid overlay در Inspect ارتباط شماره خط و محدوده عنصر را روشن می کند.
ردیف های خودکار و تراز کارت ها
.cards { align-items: stretch; }
.card {
display: flex;
flex-direction: column;
}
.card a {
margin-block-start: auto;
align-self: flex-start;
}
اگر تعداد کارت ها بیشتر از ظرفیت یک ردیف باشد، مرورگر ردیف های ضمنی بعدی را ایجاد می کند. در نمونه، ارتفاع هر ردیف با محتوای آن سازگار می شود و کارت های همان ردیف کشیده می شوند. ارتفاع تمام ردیف های شبکه الزاماً برابر نیست. با Flexbox داخل کارت و margin خودکار، لینک را به انتهای فضای موجود می بریم؛ این ترکیب نشان می دهد Grid و Flexbox رقیب انحصاری یکدیگر نیستند.
برای ظاهر کارت، از کادر و گوشه گرد CSS کمک می گیریم. اندازه فونت و فاصله سطر مناسب نیز در درس تایپوگرافی CSS توضیح داده شده است. چیدمان درست نباید با کوچک کردن غیرضروری نوشته یا حذف متن به دست بیاید.
عیب یابی CSS Grid در مرورگر
اگر ستون ها ایجاد نشده اند، اول display و کلاس والد را بررسی کنید؛ سپس مطمئن شوید article ها فرزند مستقیم همان والد هستند. اگر یک عنصر اضافی مثل div دور تمام کارت ها بگذارید، همان div یک آیتم شبکه می شود و کارت های داخلی خودکار وارد شبکه بیرونی نمی شوند. تعداد خطوط و اندازه مسیرها را با ابزار Grid در پنل Layout ببینید.
برای اسکرول افقی ناخواسته، عرض ثابت فرزند، محتوای بدون فاصله، حد پایین minmax و اندازه تصویر را بررسی کنید. اگر قانون جدید اجرا نشده، در درس آبشار و اولویت CSS روش تشخیص قانون غالب را مرور کنید. سپس پنجره را باریک کنید و ببینید کدام عنصر از محدوده والد بیرون می زند؛ تغییر هم زمان چند ویژگی، پیدا کردن علت را دشوار می کند.
تمرین مستقل درس 36 و پاسخ
سه کارت بخش practice در حالت اولیه زیر هم هستند. آن ها را به شبکه ای تبدیل کنید که حداقل پیشنهادی ستون آن 220px باشد، در والد باریک به یک ستون برسد و فاصله کارت ها 16px بماند. margin های اولیه کارت های تمرین را هم صفر کنید تا فاصله فقط از gap بیاید. ابتدا پاسخ خودتان را بنویسید و سپس با نمونه زیر مقایسه کنید.
.practice {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: 16px;
}
.practice > article { min-width: 0; margin: 0; overflow-wrap: anywhere; }
فایل solution.css همین پاسخ را دارد و از ابتدا فعال نیست. برای فعال کردن، لینک زیر را پس از style.css در head اضافه کنید. راهنما توضیح می دهد چگونه تعداد کارت ها را تغییر دهید، تفاوت auto-fit و auto-fill را ببینید و ترتیب لینک ها را با Tab آزمایش کنید.
<link rel="stylesheet" href="solution.css">
در پایان، صفحه را در عرض های 320، 768 و 1280 پیکسل ببینید. متن یک کارت را بلند کنید و کارت ششم را اضافه کنید؛ محتوا باید باقی بماند، ستون ها با فضای موجود سازگار شوند و هیچ لینک ضروری پنهان نشود. برای نشانه فوکوس، درس focus-visible را مرور کنید.
دانلود پروژه کامل، راهنما و پاسخ تمرین درس 36
پرسش های متداول
آیا Grid جای Flexbox را می گیرد؟
خیر؛ می توانید شبکه بیرونی را با Grid و اجزای داخل کارت را با Flexbox تنظیم کنید.
چرا display: grid سه ستون نمی سازد؟
باید الگوی ستون ها را با grid-template-columns تعریف کنید؛ display فقط روش چیدمان را فعال می کند.
آیا 1fr همیشه مساوی درصد مشخصی از والد است؟
خیر؛ تقسیم سهم به فضای قابل تقسیم، فاصله ها، سایر مسیرها و محدودیت محتوای شبکه بستگی دارد.
چرا کارت آخر همه عرض ردیف را نمی گیرد؟
در Grid، ستون های مشترک میان ردیف ها برقرار می مانند؛ یک خانه خالی در ردیف آخر، الزاماً ستون خالی نیست.
آیا پروژه پاسخ تمرین هم دارد؟
بله؛ solution.css و راهنمای فعال کردن آن همراه HTML و CSS اصلی داخل ZIP هستند.
برای مطالعه فنی بیشتر، مشخصات رسمی CSS Grid در W3C را ببینید. در درس 37؛ ساخت چیدمان چندستونی با Grid، سربرگ، محتوا، ستون کناری و پاورقی را در یک ساختار کامل صفحه کنار هم قرار می دهیم.
بدون دیدگاه