حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود
آموزش CSS از صفر؛ طراحی صفحه با Flexbox و Grid

پروژه CSS؛ رفع شبکه سه کارت پروژه با Grid

پروژه نهایی CSS؛ صفحه شخصی با Flexbox و Grid · 0٪

فهرست پروژه‌ها فرصت خوبیه که Grid رو در یک کاربرد واقعی جمع کنیم. سه کارت هم‌ردیف باید ستون‌های برابر داشته باشن و فاصله‌شون با یک قانون روی والد مدیریت بشه. هر کارت هم می‌تونه عنوان و توضیح خودش رو داشته باشه، بدون اینکه طول کوتاه متن تعیین‌کننده عرض ستون باشه. مقدارهای fr به فضای مشترک شبکه تکیه می‌کنن.

مثال حل‌شده فهرست دو مقاله رو در دو ستون برابر می‌چینه. توی پروژه سه کارت داریم، اما کد اولیه فقط دو ستون تعریف کرده و کارت سوم به ردیف بعد افتاده. خطای اصلی رو با تغییر تعداد ستون‌ها حل کن، نه با جابه‌جایی HTML یا کوچک‌کردن دستی کارت سوم. عرض ثابت ۴۸۰ و دو فاصله دوازده پیکسلی یعنی ۴۵۶ پیکسل برای سه ستون باقی می‌مونه؛ سهم هر ستون ۱۵۲ پیکسله. این حساب ساده کمک می‌کنه نتیجه computed style رو بفهمی. گوشه و فاصله داخلی هر کارت رو هم حفظ کن تا اصلاح شبکه ظاهر جزء رو خراب نکنه.

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

<div class="articles"><article>آشنایی با متن</article><article>راهنمای تصویر</article></div>
<style>.articles { display:grid; width:360px; grid-template-columns:repeat(2,1fr); gap:12px; }</style>

حالا نوبت توئه: ظرف #projects با کلاس .projects باید display:grid، width:480px، grid-template-columns:152px 152px 152px و gap:12px داشته باشد. سه اندازه پیکسلی را جداگانه بنویس، بدون fr یا repeat. سه article.project را با متن‌های آماده نگه دار؛ هر کارت padding:12px و border-radius:8px بگیرد. دو ستون فعلی را به سه ستون تبدیل کن.

فعالیت شما

ظرف #projects با کلاس .projects باید display:grid، width:480px، grid-template-columns:152px 152px 152px و gap:12px داشته باشد. سه اندازه پیکسلی را جداگانه بنویس، بدون fr یا repeat. سه article.project را با متن‌های آماده نگه دار؛ هر کارت padding:12px و border-radius:8px بگیرد. دو ستون فعلی را به سه ستون تبدیل کن.

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

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

برای انجام فعالیت وارد شوید

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

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

<!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>
<section id="projects" class="projects"><article class="project"><h2>کارت معرفی</h2><p>اولین تمرین من</p></article><article class="project"><h2>فرم ساده</h2><p>فیلدهای مرتب</p></article><article class="project"><h2>فهرست کتاب</h2><p>چیدمان شبکه‌ای</p></article></section>
</body>
</html>

ظاهر صفحه (CSS)

body{margin:0;padding:16px;font-family:Tahoma,Arial,sans-serif;direction:rtl;color:#1f2937;background:#f3f4f6}*{box-sizing:content-box}
.projects{display:grid;width:480px;grid-template-columns:152px 152px;gap:12px}.project{padding:12px;border-radius:8px;background:white;box-sizing:border-box}.project h2{font-size:18px}