آیتم‌های Grid
آیتم‌های Grid (Grid Items) عناصر فردی داخل یک Grid Container در CSS هستند که ساختار و چینش محتوای صفحه وب را تعیین می‌کنند. این آیتم‌ها اهمیت زیادی دارند زیرا با کنترل دقیق آن‌ها می‌توان محتوا را به صورت منظم، هماهنگ و پاسخگو نمایش داد؛ همانند ساخت یک خانه که هر اتاق کارکرد و جایگاه مشخص خود را دارد. در یک فروشگاه آنلاین (online shop)، آیتم‌های Grid برای نمایش محصولات در ردیف‌ها و ستون‌های منظم استفاده می‌شوند، در سایت خبری (news website) مقالات، تصاویر و تبلیغات با Grid Itemها سازماندهی می‌شوند، در وبلاگ شخصی (personal blog) پست‌ها و تصاویر به شکل منظم مرتب می‌شوند و در پرتال‌های دولتی (government portal) محتوا و بخش‌های مختلف سایت با نظم و ترتیب مناسب نمایش داده می‌شوند.
در این آموزش شما خواهید آموخت که چگونه با استفاده از ویژگی‌هایی مانند grid-column، grid-row، justify-self و align-self هر آیتم را به صورت دقیق در جایگاه دلخواه قرار دهید و اندازه و موقعیت آن را مدیریت کنید. همچنین یاد می‌گیرید چگونه آیتم‌های Grid را به شکل پاسخگو (responsive) طراحی کنید تا روی دستگاه‌های مختلف به درستی نمایش داده شوند. کار با Grid Items مانند چیدمان اتاق یا سازماندهی یک کتابخانه است: هر آیتم جایگاه مشخص خود را دارد و چینش صحیح باعث افزایش کارایی و زیبایی صفحه وب می‌شود. پس از مطالعه این آموزش، قادر خواهید بود طرح‌های پیچیده و قابل نگهداری برای پروژه‌های واقعی ایجاد کنید.
مثال پایه
css.container {
display: grid; /* تعریف کانتینر به عنوان Grid */
grid-template-columns: repeat(3, 1fr); /* سه ستون با عرض برابر */
grid-template-rows: 100px 200px; /* دو ردیف با ارتفاع متفاوت */
gap: 10px; /* فاصله بین آیتم‌ها */
}
.item1 { grid-column: 1 / 3; /* اشغال دو ستون اول */ }
.item2 { grid-row: 2 / 3; /* قرار گرفتن در ردیف دوم */ }در این مثال، با استفاده از display: grid کانتینر به یک Grid تبدیل شده است که پایه هر ساختار CSS Grid محسوب می‌شود. ویژگی grid-template-columns با دستور repeat(3, 1fr) سه ستون با عرض مساوی ایجاد می‌کند، که 1fr بیانگر یک قسمت از فضای موجود است. grid-template-rows دو ردیف با ارتفاع متفاوت تعریف می‌کند و gap فاصله بین آیتم‌ها را مشخص می‌کند، مشابه فاصله دادن بین مبلمان در یک اتاق.
آیتم .item1 با grid-column: 1 / 3 دو ستون اول را اشغال می‌کند و .item2 با grid-row: 2 / 3 در ردیف دوم قرار می‌گیرد. این ویژگی‌ها به توسعه‌دهندگان اجازه می‌دهند هر آیتم را دقیقاً در مکان و اندازه دلخواه خود قرار دهند. برای مبتدیان، درک تفاوت بین شماره ردیف/ستون و استفاده از span اهمیت دارد؛ می‌توان خطوط Grid را مانند قفسه‌های یک کتابخانه تصور کرد تا محدوده‌ی هر آیتم بهتر قابل فهم باشد.
مثال کاربردی
css.shop-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* ستون‌های انعطاف‌پذیر */
grid-auto-rows: 150px; /* ارتفاع پیش‌فرض ردیف‌ها */
gap: 15px;
}
.product { background-color: #f0f0f0; padding: 10px; } /* استایل بصری */
.product.featured { grid-column: span 2; grid-row: span 2; } /* برجسته کردن محصولات ویژه */در این مثال پیشرفته، از auto-fit و minmax برای ایجاد ستون‌های انعطاف‌پذیر استفاده شده که با عرض صفحه نمایش تغییر می‌کنند؛ این یک نمونه از طراحی موبایل فرست (mobile-first) است. grid-auto-rows ارتفاع پیش‌فرض ردیف‌ها را تعیین می‌کند تا ساختار آیتم‌ها یکنواخت باشد. ویژگی gap فاصله مناسب بین آیتم‌ها را فراهم می‌کند.
هر محصول با .product دارای پس‌زمینه و padding است تا از نظر بصری متمایز شود. محصولات ویژه با استفاده از grid-column: span 2 و grid-row: span 2 چند ستون و ردیف را اشغال می‌کنند و برجسته می‌شوند. این تکنیک مناسب فروشگاه آنلاین برای نمایش محصولات مهم، وبلاگ برای مقالات ویژه یا سایت خبری برای محتوای برجسته است. توانایی گسترش آیتم‌ها در چند ستون و ردیف، یکی از مهارت‌های پیشرفته برای ایجاد چینش‌های پویا و سلسله‌مراتبی است.
بهترین شیوه‌ها شامل طراحی mobile-first برای اطمینان از عملکرد صحیح در همه دستگاه‌ها، بهینه‌سازی عملکرد با جلوگیری از Nestingهای اضافی و سلکتورهای پیچیده، کدنویسی تمیز و Semantic و ساخت Gridهای مدولار برای نگهداری آسان است.
اشتباهات رایج شامل تضاد specificity که باعث اعمال نشدن استایل‌ها می‌شود، طراحی پاسخگو ضعیف که منجر به بهم ریختگی آیتم‌ها می‌شود، overrideهای بیش از حد که کد را ناخوانا می‌کند و غفلت از grid-gap که ساختار را فشرده نشان می‌دهد. برای دیباگینگ، از ابزارهای توسعه مرورگر برای بررسی خطوط Grid و spanها استفاده کنید و با رنگ‌های پس‌زمینه موقت، چینش را نمایش دهید. توصیه عملی این است که طرح‌ها را مرحله‌به‌مرحله ایجاد کنید، همانند چیدمان اتاق به صورت مرحله‌ای برای رسیدن به یک طراحی منسجم.
📊 مرجع سریع
| Property/Method | Description | Example |
|---|---|---|
| grid-column | تعیین ستون‌های اشغال شده توسط آیتم | grid-column: 1 / 3; |
| grid-row | تعیین ردیف‌های اشغال شده توسط آیتم | grid-row: 2 / 4; |
| justify-self | تراز افقی آیتم در سلول | justify-self: center; |
| align-self | تراز عمودی آیتم در سلول | align-self: end; |
| grid-area | تعیین موقعیت و اندازه آیتم در یک ویژگی | grid-area: 1 / 1 / 3 / 3; |
| gap | فاصله بین آیتم‌ها | gap: 10px; |
خلاصه این که، آیتم‌های Grid (Grid Items) عناصر اساسی برای ساختارهای پیشرفته CSS Grid هستند. با ویژگی‌هایی مانند grid-column، grid-row، justify-self و align-self می‌توان موقعیت، اندازه و تراز هر آیتم را دقیقاً کنترل کرد. این مهارت‌ها با ساختار HTML و تعاملات JavaScript برای محتوای پویا مرتبط هستند. نکات کلیدی شامل اهمیت طراحی پاسخگو، ساختار مدولار و کدنویسی تمیز است. گام‌های بعدی شامل یادگیری grid-template-areas، auto-fill، minmax و ترکیب Grid و Flexbox برای ساختارهای هیبریدی است. تمرین مستمر با پروژه‌های واقعی مانند فروشگاه آنلاین، وبلاگ شخصی و سایت خبری، درک شما را تقویت و مهارت‌های طراحی و عملکرد را بهبود می‌بخشد.
🧠 دانش خود را بیازمایید
آزمون دانش شما
درک خود از این موضوع را با سوالات کاربردی بسنجید.
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود