مقدمه CSS Grid
مقدمه CSS Grid یک سیستم قدرتمند برای طراحی و چینش عناصر در صفحات وب است که امکان سازماندهی محتوا به صورت خطوط و ستون‌ها را فراهم می‌کند. می‌توان آن را مانند ساخت یک خانه تصور کرد: ابتدا طرح کلی اتاق‌ها (Lines و Columns) را مشخص می‌کنید و سپس وسایل (محتوا) را در آن‌ها قرار می‌دهید. CSS Grid برای ایجاد طراحی‌های منظم و انعطاف‌پذیر ایده‌آل است و می‌توان از آن در فروشگاه‌های آنلاین، سایت‌های خبری، وبلاگ‌های شخصی یا پرتال‌های دولتی استفاده کرد.
در این آموزش، شما یاد می‌گیرید چگونه یک شبکه (Grid) پایه ایجاد کنید، ستون‌ها و ردیف‌ها را تعریف کنید، فاصله بین عناصر را کنترل کنید و طراحی‌های ساده و قابل فهم بسازید. این آموزش مانند مرتب کردن یک کتابخانه یا تزئین یک اتاق عمل می‌کند و کمک می‌کند صفحات وب شما منظم، زیبا و قابل نگهداری باشند. پس از اتمام این درس، قادر خواهید بود طرح‌های پایه‌ای برای پروژه‌های واقعی بسازید و آماده یادگیری مفاهیم پیشرفته‌تر مانند شبکه‌های پاسخگو و تعامل با JavaScript شوید.
مثال پایه
css.container {
display: grid; /* فعال کردن طرح‌بندی شبکه */
grid-template-columns: 100px 100px 100px; /* سه ستون */
grid-template-rows: 50px 50px 50px; /* سه ردیف */
gap: 10px; /* فاصله بین عناصر */
}
.item {
background-color: lightgreen; /* رنگ پس‌زمینه برای دیده شدن */
text-align: center; /* تراز کردن متن در مرکز */
}در این مثال پایه، با استفاده از display: grid کانتینر به شبکه تبدیل شده است. ویژگی grid-template-columns سه ستون با عرض 100px ایجاد می‌کند و grid-template-rows سه ردیف با ارتفاع 50px می‌سازد. ویژگی gap فاصله 10px بین هر عنصر ایجاد می‌کند که باعث می‌شود طراحی واضح و خوانا باشد، مانند فاصله مناسب بین وسایل در یک اتاق.
کلاس .item برای هر عنصر رنگ پس‌زمینه و تراز کردن متن را تنظیم می‌کند تا ساختار شبکه مشخص شود. ممکن است مبتدیان بپرسند چرا از واحدهای پیکسلی ثابت استفاده شده است؛ این کار برای ساده‌سازی و قابل فهم بودن مثال است. در پروژه‌های واقعی، استفاده از واحدهای انعطاف‌پذیر مانند fr یا درصد باعث طراحی پاسخگو می‌شود. این ساختار پایه می‌تواند برای نمایش محصولات فروشگاه، مطالب وبلاگ یا اخبار سایت خبری به کار رود.
مثال کاربردی
css.shop-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* سه ستون مساوی */
grid-auto-rows: 200px; /* ارتفاع ردیف‌ها به طور خودکار */
gap: 20px;
}
.shop-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 15px;
}در این مثال کاربردی، با repeat(3, 1fr) سه ستون با عرض مساوی ایجاد شده است که هر ستون یک بخش از فضای موجود را می‌گیرد و این باعث می‌شود شبکه پاسخگو باشد. grid-auto-rows ارتفاع هر ردیف را 200px تنظیم می‌کند تا همه عناصر هم‌اندازه باشند. gap با مقدار 20px فاصله بین عناصر را مشخص می‌کند.
هر shop-item دارای پس‌زمینه روشن، حاشیه و padding است تا عناصر به خوبی جدا شوند. این طراحی برای فروشگاه آنلاین، وبلاگ یا گالری محصولات مناسب است. CSS Grid امکان تغییر آسان تعداد ستون‌ها یا ارتفاع ردیف‌ها را بدون دستکاری هر عنصر جداگانه فراهم می‌کند، مانند سازماندهی قفسه‌های کتابخانه که می‌توانند بدون جابجایی تمام کتاب‌ها تنظیم شوند.
بهترین روش‌ها:
- استفاده از Mobile-First برای طراحی ابتدا برای صفحه کوچک و سپس بزرگتر.
- استفاده از واحدهای انعطاف‌پذیر (fr) به جای پیکسل ثابت.
- نگهداری کد CSS تمیز و قابل مدیریت.
-
تست طراحی در دستگاه‌های مختلف برای اطمینان از پاسخگویی.
اشتباهات رایج: -
استفاده بیش از حد از اندازه‌های ثابت که باعث rigid شدن شبکه می‌شود.
- نادیده گرفتن طراحی پاسخگو.
- Override کردن بیش از حد ویژگی‌ها که مدیریت را دشوار می‌کند.
نکات دیباگ: با استفاده از ابزارهای توسعه مرورگر خطوط شبکه و فاصله‌ها را بررسی کنید و با محتوای واقعی تست کنید تا طراحی خوانا و کاربردی باشد.
📊 مرجع سریع
| Property/Method | Description | Example |
|---|---|---|
| display | فعال کردن شبکه | display: grid; |
| grid-template-columns | تعریف ستون‌ها | grid-template-columns: 100px 200px; |
| grid-template-rows | تعریف ردیف‌ها | grid-template-rows: 50px 50px; |
| gap | فاصله بین عناصر | gap: 10px; |
| repeat | تکرار ستون یا ردیف | grid-template-columns: repeat(3, 1fr); |
| grid-auto-rows | ارتفاع خودکار ردیف‌ها | grid-auto-rows: 150px; |
خلاصه: CSS Grid ابزار مهمی برای ایجاد طراحی‌های منظم، انعطاف‌پذیر و جذاب است. با دانستن ویژگی‌های اصلی مانند grid-template-columns، grid-template-rows، gap و repeat می‌توانید شبکه‌های مناسب برای فروشگاه آنلاین، وبلاگ، سایت خبری یا پرتال‌های دولتی بسازید. CSS Grid با ساختار HTML مرتبط است و می‌توان آن را با JavaScript برای طراحی‌های پویا ترکیب کرد. مراحل بعدی می‌تواند یادگیری grid-template-areas، align-items و justify-content باشد. تمرین مستمر با مثال‌های واقعی باعث تسلط بیشتر و طراحی حرفه‌ای‌تر می‌شود.
🧠 دانش خود را بیازمایید
آزمون دانش شما
درک خود از این موضوع را با سوالات کاربردی بسنجید.
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود