پیش‌بینی ستون‌های CSS Grid؛ تکرار خانه‌ها در ردیف بعد

grid-template-columns فهرست ستون‌های شبکه است. هر اندازه‌ای که توی این فهرست می‌نویسی یک ستون صریح می‌سازه. وقتی تعداد آیتم‌ها از ظرفیت یک ردیف بیشتر بشه، مرورگر به‌صورت معمول ردیف بعدی رو ایجاد می‌کنه. لازم نیست برای هر ردیف یک div جدا بنویسی و همین ویژگی باعث می‌شه تعداد کارت‌ها راحت‌تر تغییر کنه.

در مثال، دو ستون و پنج آیتم داریم؛ دو ردیف کامل و یک خانه در ردیف سوم ساخته می‌شه. سؤال اصلی یک ستون بیشتر داره و باید تعداد ردیف‌های اشغال‌شده رو حساب کنی. خطای رایج اشتباه‌گرفتن تعداد ستون‌ها با تعداد ردیف‌هاست. اول ببین در هر ردیف چند خانه وجود داره، بعد آیتم‌ها رو به همان تعداد گروه‌بندی کن. در این سؤال هیچ آیتمی چند ستون نمی‌گیره و هیچ جایگذاری دستی یا grid-auto-flow خاصی نداریم. جهت rtl شروع افقی ردیف رو تغییر می‌ده اما تعداد خانه‌های قابل استفاده در هر ردیف رو عوض نمی‌کنه.

✍️ مثال حل‌شده:

<div class="two"><i>۱</i><i>۲</i><i>۳</i><i>۴</i><i>۵</i></div>
<style>.two { display:grid; grid-template-columns:80px 80px; }</style>
<!-- سه ردیف اشغال می‌شود. -->

حالا نوبت توئه: در شبکه .three پنج آیتم و سه ستون ۱۰۰ پیکسلی داریم. بدون span یا جایگذاری دستی، چند ردیف اشغال می‌شود و ردیف آخر چند آیتم دارد؟ ترتیب عادی شبکه و جهت rtl برقرار است؛ همه آیتم‌ها فقط یک خانه می‌گیرند.

فعالیت شما

در شبکه .three پنج آیتم و سه ستون ۱۰۰ پیکسلی داریم. بدون span یا جایگذاری دستی، چند ردیف اشغال می‌شود و ردیف آخر چند آیتم دارد؟ ترتیب عادی شبکه و جهت rtl برقرار است؛ همه آیتم‌ها فقط یک خانه می‌گیرند.

مطالعهٔ این گام برای همه آزاد است

برای پاسخ‌دادن، بررسی پاسخ، ثبت پیشرفت و استفاده از دستیار باید شرایط شرکت در فعالیت‌ها را داشته باشید.

برای انجام فعالیت‌ها ابتدا این دوره‌های پیش‌نیاز را تکمیل کنید:

<!doctype html> <html lang="fa" dir="rtl"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>تمرین CSS</title></head> <body> <div class="three"><div>۱</div><div>۲</div><div>۳</div><div>۴</div><div>۵</div></div> </body> </html>

فعالیت شما

مطالعهٔ این گام برای همه آزاد است

کد اولیهٔ فعالیت

ظاهر صفحه (CSS)

گزینه‌های پیش‌بینی خروجی