آموزش CSS Grid پروژه محور: ساخت چیدمان‌های مدرن از صفر تا صد
آیا از دست و پنجه نرم کردن با float، inline-block یا حتی محدودیت‌های Flexbox برای ساخت چیدمان‌های پیچیده وب خسته شده‌اید؟ خبر خوب این است که **CSS Grid Layout** آمده تا انقلابی در نحوه طراحی صفحات وب ایجاد کند!
به راهنمای جامع و **پروژه محور آموزش CSS Grid** وبلاگ ویرچوال لرن خوش آمدید! در این مقاله عمیق (بیش از ۴۰۰۰ کلمه)، قصد داریم شما را از سطح کاملاً مبتدی به نقطه‌ای برسانیم که بتوانید با اطمینان کامل، چیدمان‌های (Layouts) مدرن، واکنشگرا (Responsive) و پیچیده را با استفاده از قدرت شگفت‌انگیز **CSS Grid** پیاده‌سازی کنید. هدف ما فقط یادگیری تئوری نیست؛ ما با هم یک **پروژه عملی و جذاب** (مثلاً ساخت یک گالری عکس پیشرفته یا چیدمان یک صفحه وبلاگ کامل) را قدم به قدم خواهیم ساخت تا تمام مفاهیم را در عمل ببینید و تجربه کنید.
این راهنما برای **برنامه‌نویسان تازه‌کار** که به تازگی با HTML و CSS آشنا شده‌اند و همچنین **طراحان وب** که می‌خواهند مهارت‌های خود در زمینه چیدمان (Layout) را به‌روز و حرفه‌ای‌تر کنند، ایده‌آل است. ما تمام **مفاهیم کلیدی CSS Grid**، از اصول اولیه گرفته تا تکنیک‌های پیشرفته‌تر مانند grid-template-areas، توابع minmax() و repeat()، و نحوه ترکیب هوشمندانه Grid با Flexbox را پوشش خواهیم داد. در پایان این آموزش، شما قادر خواهید بود:
- سیستم گرید (Grid System) خودتان را با CSS خالص بسازید.
- چیدمان‌های پیچیده دو بعدی را به سادگی پیاده کنید.
- وب‌سایت‌های کاملاً واکنشگرا با کنترل دقیق بر روی نقاط شکست (Breakpoints) طراحی کنید.
- کدهای CSS خواناتر، کوتاه‌تر و قابل نگهداری‌تر برای بخش چیدمان بنویسید.
- تفاوت‌ها و موارد استفاده بهینه CSS Grid و Flexbox را درک کنید.
پس اگر آماده‌اید تا قدرت واقعی چیدمان در CSS را کشف کنید و پروژه‌های چشم‌نوازی بسازید، با ما همراه باشید! بیایید سفر **یادگیری CSS Grid** را با هم آغاز کنیم.
پیش‌نیازهای این آموزش CSS Grid:
- **دانش پایه HTML و CSS:** شما باید با تگ‌های اصلی HTML و مفاهیم پایه‌ای CSS مانند سلکتورها، ویژگی‌ها (Properties)، مقادیر و مدل باکس (Box Model) آشنا باشید. اگر نیاز به مرور یا یادگیری این موارد دارید، مقاله جامع ما را از دست ندهید:HTML و CSS: دروازه ورود به دنیای طراحی وب | راهنمای جامع برای شروع در ایران.
- همچنین گذراندن دورهآموزش HTML & CSS ساخت سایت واکنشگرامی‌تواند یک پایه بسیار قوی برای این آموزش فراهم کند.
- **ویرایشگر کد (Code Editor):** هر ویرایشگر کدی مانند VS Code، Sublime Text، Atom یا ... که با آن راحت هستید.
- **مرورگر وب مدرن:** مرورگرهایی مانند Google Chrome، Firefox، Edge یا Safari که از CSS Grid به خوبی پشتیبانی می‌کنند (تقریباً تمام نسخه‌های اخیر).
- **اشتیاق به یادگیری:** مهم‌ترین پیش‌نیاز! :)
⭐پروژه عملی ما: ساخت گالری تصاویر پیشرفته و واکنش‌گرایادگیری CSS Grid از طریق ساخت یک پروژه واقعی
یادگیری CSS Grid از طریق ساخت یک پروژه واقعی
بهترین راه برای یادگیری عمیق CSS Grid، استفاده از آن در یک پروژه واقعی است. در این آموزش، ما قصد داریم یک **گالری تصاویر (Photo Gallery)** مدرن و کاملاً واکنشگرا را با هم بسازیم. این پروژه به ما امکان می‌دهد تا تقریباً تمام جنبه‌های مهم CSS Grid را پوشش دهیم.
تصور کنید گالری‌ای داریم که در دستگاه‌های دسکتاپ به شکلی زیبا و چند ستونه نمایش داده می‌شود، برخی تصاویر فضای بیشتری را اشغال می‌کنند (مثلاً دو ستون یا دو ردیف) و در دستگاه‌های موبایل، چیدمان به صورت تک ستونه و قابل اسکرول تغییر می‌کند. همه اینها را با CSS Grid به سادگی پیاده خواهیم کرد!
ابتدا ساختار اولیه HTML گالری را آماده می‌کنیم و سپس مرحله به مرحله، با استفاده از ویژگی‌های مختلف CSS Grid، به آن جان می‌بخشیم.
ساختار اولیه HTML برای گالری تصاویر (index.html):
1<!DOCTYPE html>
2<html lang="fa" dir="rtl">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>گالری تصاویر با CSS Grid</title>
8 <link rel="stylesheet" href="style.css">
9</head>
10
11<body>
12 <header class="main-header p-5 bg-primary-600 text-white text-center shadow-md">
13 <h1 class="text-2xl font-bold">گالری تصاویر من با CSS Grid</h1>
14 </header>
15
16 <main class="container mx-auto my-8 p-4">
17 <div class="gallery-grid">
18 <figure class="gallery-item item-1">
19 <img src="https://picsum.photos/id/237/500">
20 <figcaption>منظره زیبا</figcaption>
21 </figure>
22 <figure class="gallery-item item-2">
23 <img src="https://picsum.photos/id/137/500" >
24 <figcaption>منظره زیبا</figcaption>
25 </figure>
26 <figure class="gallery-item item-3">
27 <img src="https://picsum.photos/id/227/500" >
28 <figcaption>منظره زیبا</figcaption>
29 </figure>
30 <figure class="gallery-item item-4">
31 <img src="https://picsum.photos/id/233/500" >
32 <figcaption>منظره زیبا</figcaption>
33 </figure>
34 <figure class="gallery-item item-5">
35 <img src="https://picsum.photos/id/437/500" >
36 <figcaption>منظره زیبا</figcaption>
37 </figure>
38 <figure class="gallery-item item-6">
39 <img src="https://picsum.photos/id/277/500" >
40 <figcaption>منظره زیبا</figcaption>
41 </figure>
42 <figure class="gallery-item item-7">
43 <img src="https://picsum.photos/id/236/500">
44 <figcaption>منظره زیبا</figcaption>
45 </figure>
46 <figure class="gallery-item item-8">
47 <img src="https://picsum.photos/id/17/500">
48 <figcaption>منظره زیبا</figcaption>
49 </figure>
50 {/* Add more items as needed */}
51 </div>
52 </main>
53
54 <footer class="main-footer p-4 bg-gray-800 text-gray-300 text-center text-sm">
55 <p>ساخته شده با ❤️ و CSS Grid در <a href="https://vc-virtual-learn.com/"
56 class="text-primary-400 hover:underline">Virtual Learn</a></p>
57 </footer>
58</body>
59
60</html>فایل style.css را نیز ایجاد کنید. (فعلاً خالی باشد). تصاویر نمونه را در پوشه images قرار دهید یا از تصاویر خودتان استفاده کنید. کلاس‌های item-1, item-2, ... بعداً برای استایل‌دهی خاص یا قرارگیری در گرید استفاده می‌شوند.
مقداری CSS اولیه برای ریست و استایل‌های پایه در style.css:
1/* Basic Reset & Box Sizing */
2*,
3*::before,
4*::after {
5 margin: 0;
6 padding: 0;
7 box-sizing: border-box;
8}
9
10body {
11 font-family: 'Vazirmatn', sans-serif;
12 /* یا هر فونت فارسی مناسب دیگر */
13 line-height: 1.6;
14 background-color: #f8f9fa;
15 /* Light gray background */
16 color: #333;
17 /* Dark text */
18}
19
20
21@media (prefers-color-scheme: dark) {
22 body {
23 background-color: #1a202c;
24 /* Dark background */
25 color: #cbd5e0;
26
27 }
28
29 .main-header {
30 background-color: #2d3748;
31 }
32
33 .main-footer {
34 background-color: #171923;
35 }
36}
37
38*/ img {
39 display: block;
40 /* Remove extra space below images */
41 max-width: 100%;
42 width: 100%;
43 /* Make images responsive by default */
44 height: 100%;
45 object-fit: cover;
46 object-position: center;
47 /* Ensure images cover their container */
48}
49
50
51
52/* Gallery Item basic styling */
53.gallery-item {
54 background-color: #fff;
55 /* White background for items */
56 border: 1px solid #e2e8f0;
57 /* Light border */
58 border-radius: 8px;
59 /* Rounded corners */
60 overflow: hidden;
61 /* Clip image overflow */
62 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
63 /* Subtle shadow */
64 transition: transform 0.3s ease, box-shadow 0.3s ease;
65 /* Smooth hover effect */
66}
67
68.gallery-item figcaption {
69 padding: 10px;
70 text-align: center;
71 font-size: 0.9em;
72 color: #555;
73 background-color: #f8f9fa; /* Slightly different background for caption */
74}
75
76.gallery-item:hover {
77 transform: translateY(-5px);
78 /* Lift item on hover */
79 box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
80 /* Stronger shadow on hover */
81}
82
83
84/* Simple Container - (Alternative to Tailwind's container if not using Tailwind for layout) */
85.container {
86 max-width: 1200px;
87 /* Max width */
88 margin-left: auto;
89 margin-right: auto;
90 padding-left: 1rem;
91 /* 16px */
92 padding-right: 1rem;
93 /* 16px */
94}
95
96/* Basic styling (already provided in Tailwind) */
97.p-5 {
98 padding: 1.25rem;
99}
100
101.p-4 {
102 padding: 1rem;
103}
104
105.my-8 {
106 margin-top: 2rem;
107 margin-bottom: 2rem;
108}
109
110.mx-auto {
111 margin-left: auto;
112 margin-right: auto;
113}
114
115.text-center {
116 text-align: center;
117}
118
119.bg-primary-600 {
120 background-color: #0052cc;
121}
122
123/* Adjust primary color */
124.text-white {
125 color: #fff;
126}
127
128.shadow-md {
129 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
130}
131
132.text-2xl {
133 font-size: 1.5rem;
134}
135
136.font-bold {
137 font-weight: 700;
138}
139
140.bg-gray-800 {
141 background-color: #2d3748;
142}
143
144.text-gray-300 {
145 color: #d1d5db;
146}
147
148.text-sm {
149 font-size: 0.875rem;
150}
151
152.text-primary-400 {
153 color: #3b82f6;
154}
155
156/* Adjust primary color */
157.hover:underline:hover {
158 text-decoration: underline;
159}
160
161/* --- End of basic setup CSS --- */
162
163/* === CSS GRID STYLES WILL GO HERE === */
164
165۱مفاهیم بنیادین CSS Grid: خطوط، ترک‌ها، سلول‌ها و نواحیدرک اجزای سازنده یک چیدمان Grid
درک اجزای سازنده یک چیدمان Grid
قبل از اینکه شیرجه بزنیم در کدنویسی پروژه، حیاتی است که با چند **مفهوم و واژه کلیدی در CSS Grid** آشنا شویم. این مفاهیم اساس درک نحوه کار Grid را تشکیل می‌دهند.
- ۱. نگهدارنده گرید (Grid Container):
- المان والد مستقیمی که ویژگی display: grid; یا display: inline-grid; روی آن اعمال می‌شود. تمام آیتم‌های فرزند مستقیم این المان، تبدیل به آیتم‌های گرید (Grid Items) می‌شوند. در پروژه ما، div.gallery-grid نقش Grid Container را خواهد داشت.
- ۲. آیتم گرید (Grid Item):
- فرزندان مستقیم یک Grid Container. در پروژه ما، هر figure.gallery-item یک Grid Item است. توجه کنید که فقط فرزندان مستقیم تبدیل به آیتم گرید می‌شوند، نوه‌ها و نتیجه‌ها نه.
- ۳. خطوط گرید (Grid Lines):
- خطوط افقی و عمودی که ساختار گرید را تشکیل می‌دهند و ترک‌ها (Tracks) را از هم جدا می‌کنند. این خطوط شماره‌گذاری می‌شوند (از ۱ شروع می‌شود) و می‌توان از آن‌ها برای قرار دادن آیتم‌ها استفاده کرد. خطوط افقی، ردیف‌ها را و خطوط عمودی، ستون‌ها را می‌سازند.
- ۴. ترک گرید (Grid Track):
- فضای بین دو خط گرید مجاور. ما ترک‌های ستونی (Column Tracks) و ترک‌های ردیفی (Row Tracks) داریم. شما با ویژگی‌هایی مانند grid-template-columns و grid-template-rows اندازه این ترک‌ها را مشخص می‌کنید.
- ۵. سلول گرید (Grid Cell):
- کوچکترین واحد در گرید، فضایی که توسط تقاطع یک ترک ردیفی و یک ترک ستونی ایجاد می‌شود (مانند یک سلول در جدول). هر آیتم گرید به صورت پیش‌فرض یک سلول را اشغال می‌کند.
- ۶. ناحیه گرید (Grid Area):
- یک فضای مستطیلی دلخواه در گرید که می‌تواند یک یا چند سلول را شامل شود. نواحی توسط خطوط گرید محدود می‌شوند و می‌توان با استفاده از ویژگی grid-template-areas به آن‌ها نام داد و آیتم‌ها را در آن نواحی قرار داد.
درک این مفاهیم به شما کمک می‌کند تا در ادامه، زمانی که با ویژگی‌های مختلف CSS Grid کار می‌کنیم، بدانید دقیقاً چه اتفاقی در حال رخ دادن است.
CSS Grid در مقابل Flexbox: یک توضیح کوتاه
یک سوال رایج این است که تفاوت اصلی **CSS Grid** و **Flexbox** چیست و چه زمانی باید از کدام استفاده کرد؟ به طور خلاصه:
- **Flexbox (Flexible Box Layout):** اصولاً برای چیدمان آیتم‌ها در **یک بُعد** طراحی شده است - یا به صورت یک ردیف یا به صورت یک ستون. Flexbox برای تراز کردن (Alignment) آیتم‌ها و توزیع فضا بین آن‌ها در آن بُعدِ خاص، فوق‌العاده است. عالی برای کامپوننت‌ها مانند نوبار (Navbar)، کارت‌ها (Cards) و یا هر جایی که نیاز به چیدمان خطی دارید. (آموزش کامل Flexbox را اینجا بخوانید)
- **CSS Grid Layout:** برای چیدمان آیتم‌ها در **دو بُعد** (ردیف‌ها و ستون‌ها به صورت همزمان) طراحی شده است. Grid به شما کنترل کامل بر روی ساختار کلی صفحه و نحوه قرارگیری المان‌های بزرگ در کنار هم می‌دهد. ایده‌آل برای چیدمان کلی صفحه (Page Layout)، ساختارهای جدولی پیچیده و هر جایی که نیاز به کنترل دقیق بر روی هر دو محور افقی و عمودی دارید.
اغلب بهترین رویکرد، استفاده ترکیبی از هر دو است. می‌توانید از Grid برای چیدمان کلی صفحه استفاده کنید و سپس از Flexbox برای چینش آیتم‌ها در *داخل* یک سلول یا ناحیه Grid بهره ببرید. ما در ادامه این آموزش به این موضوع نیز اشاره خواهیم کرد.
۲گام ۱: تبدیل نگهدارنده گالری به Grid Containerاستفاده از display: grid برای شروع کار
استفاده از display: grid برای شروع کار
اولین قدم برای فعال کردن قابلیت‌های **CSS Grid**، انتخاب المان نگهدارنده (Container) آیتم‌های گالری و اعمال ویژگی display: grid; به آن است. در پروژه ما، این المان دارای کلاس gallery-grid است.
کد زیر را به فایل style.css خود اضافه کنید:
افزودن display: grid به نگهدارنده گالری در style.css:
1/* === CSS GRID STYLES WILL GO HERE === */
2
3.gallery-grid {
4display: grid; /* Magic starts here! */
5}
6
7/* --- End of Step 1 --- */با افزودن این یک خط، المان .gallery-grid حالا یک Grid Container است و تمام فرزندان مستقیم آن (figure.gallery-item) تبدیل به Grid Items شده‌اند.
اگر صفحه را در مرورگر باز کنید، احتمالاً تغییر محسوسی نخواهید دید! چرا؟ چون ما هنوز هیچ ستون یا ردیفی تعریف نکرده‌ایم. به صورت پیش‌فرض، Grid یک ستون ایجاد می‌کند و تمام آیتم‌ها را زیر هم در آن ستون قرار می‌دهد (شبیه به display: block). در گام بعدی، ستون‌های گالری خود را تعریف خواهیم کرد.
مرورگرهای مدرن (مانند Firefox و Chrome) ابزارهای فوق‌العاده‌ای برای بازرسی (Inspect) و خطایابی (Debug) چیدمان‌های Grid دارند. در پنل Elements/Inspector، کنار المانی که display: grid دارد، معمولاً یک آیکون یا گزینه برای فعال کردن Grid Overlay وجود دارد. با فعال کردن آن، می‌توانید خطوط گرید، شماره ترک‌ها و... را به صورت بصری روی صفحه ببینید. این ابزار در طول یادگیری بسیار کمک‌کننده است!
۳گام ۲: تعریف ستون‌ها با grid-template-columns و واحد frایجاد یک گرید چند ستونه واکنشگرا
ایجاد یک گرید چند ستونه واکنشگرا
حالا که Grid Container را داریم، وقت آن است که ساختار ستون‌های گالری را مشخص کنیم. برای این کار از ویژگی grid-template-columns استفاده می‌کنیم. این ویژگی به ما امکان می‌دهد تعداد و اندازه هر ستون را تعریف کنیم.
یکی از قدرتمندترین واحدهایی که می‌توانید در CSS Grid استفاده کنید، واحد **fr** (Fraction Unit - واحد کسری) است. واحد fr نشان‌دهنده یک **بخش از فضای موجود** در Grid Container است. این واحد به طور خودکار فضا را بین ستون‌ها (یا ردیف‌ها) تقسیم می‌کند و ایجاد چیدمان‌های واکنشگرا را بسیار آسان می‌سازد.
بیایید گالری خود را به گونه‌ای تعریف کنیم که ۳ ستون با عرض برابر داشته باشد. هر ستون یک بخش (۱fr) از فضای افقی موجود را اشغال خواهد کرد.
تعریف سه ستون برابر با grid-template-columns و واحد fr در style.css:
1.gallery-grid {
2display: grid;
3grid-template-columns: 1fr 1fr 1fr; /* سه ستون با عرض برابر */
4
5/* می‌توانید از تابع repeat() برای کوتاه‌تر کردن کد استفاده کنید: */
6/* grid-template-columns: repeat(3, 1fr); */
7}
8
9/* --- End of Step 2 --- */حالا اگر صفحه را رفرش کنید، خواهید دید که آیتم‌های گالری به صورت خودکار در یک گرید ۳ ستونه مرتب شده‌اند! CSS Grid به طور خودکار ردیف‌های لازم را نیز ایجاد می‌کند (این ردیف‌ها، ترک‌های ضمنی یا Implicit Tracks نامیده می‌شوند که بعداً به آن‌ها خواهیم پرداخت).
- **واحد fr:** این واحد فقط در CSS Grid کار می‌کند و به مرورگر می‌گوید که فضای *باقیمانده* در کانتینر را (پس از در نظر گرفتن ستون‌ها/ردیف‌هایی با اندازه‌های ثابت مانند پیکسل یا درصد) بین ترک‌های fr تقسیم کند. مثلاً 1fr 2fr یعنی ستون دوم دو برابر ستون اول عرض داشته باشد.
- **تابع repeat(count, track-list):** راهی بسیار مفید برای تکرار یک الگو در تعریف ترک‌ها است. repeat(3, 1fr) دقیقاً معادل 1fr 1fr 1fr است. برای گریدهای با تعداد ستون زیاد، این تابع کد شما را بسیار تمیزتر می‌کند. می‌توانید الگوهای پیچیده‌تری را نیز تکرار کنید، مثلاً repeat(4, 1fr 2fr) چهار جفت ستون (اولی یک بخش، دومی دو بخش) ایجاد می‌کند.
۴گام ۳: افزودن فاصله بین آیتم‌ها با gapایجاد فضای تنفس (Gutter) در گرید
ایجاد فضای تنفس (Gutter) در گرید
در حال حاضر، آیتم‌های گالری دقیقاً به هم چسبیده‌اند. برای ایجاد فضای خالی (Gutter) بین ردیف‌ها و ستون‌ها، از ویژگی gap (یا ویژگی‌های قدیمی‌تر grid-gap, grid-row-gap, grid-column-gap) استفاده می‌کنیم.
ویژگی gap یک shorthand (کوتاه‌نویسی) است که به شما امکان می‌دهد فاصله بین ردیف‌ها و ستون‌ها را به صورت همزمان یا جداگانه تنظیم کنید.
- gap: 20px; : فاصله ۲۰ پیکسلی هم بین ردیف‌ها و هم بین ستون‌ها.
- gap: 30px 15px; : فاصله ۳۰ پیکسلی بین ردیف‌ها و ۱۵ پیکسلی بین ستون‌ها.
بیایید یک فاصله یکسان 1rem (معادل 16px در تنظیمات پیش‌فرض) بین آیتم‌های گالری خود اضافه کنیم.
افزودن gap به Grid Container در style.css:
1.gallery-grid {
2display: grid;
3grid-template-columns: repeat(3, 1fr);
4gap: 1rem; /* افزودن فاصله 16px بین ردیف‌ها و ستون‌ها */
5
6/* ویژگی‌های قدیمی‌تر (هنوز کار می‌کنند اما gap جدیدتر و توصیه شده است): */
7/* grid-gap: 1rem; */
8/* grid-row-gap: 1rem; */
9/* grid-column-gap: 1rem; */
10}
11
12/* --- End of Step 3 --- */عالی شد! حالا بین تمام آیتم‌های گالری یک فاصله منظم و زیبا وجود دارد که خوانایی و ظاهر کلی گالری را بهبود می‌بخشد.
۵گام ۴: کنترل ارتفاع ردیف‌ها با grid-template-rows یا grid-auto-rowsتنظیم ارتفاع ردیف‌های صریح و ضمنی
تنظیم ارتفاع ردیف‌های صریح و ضمنی
تا اینجا، ما فقط ستون‌ها را به صراحت تعریف کرده‌ایم (grid-template-columns). ارتفاع ردیف‌ها به صورت خودکار توسط محتوای داخل آیتم‌ها (در اینجا، ارتفاع تصاویر و کپشن‌ها) تعیین می‌شود. این ردیف‌ها، **ردیف‌های ضمنی (Implicit Rows)** نامیده می‌شوند.
ما دو راه اصلی برای کنترل ارتفاع ردیف‌ها داریم:
- **grid-template-rows**: برای تعریف ارتفاع ردیف‌هایی که **به صراحت** می‌خواهید ایجاد کنید (Explicit Rows). مشابه grid-template-columns کار می‌کند.
- **grid-auto-rows**: برای تعیین ارتفاع پیش‌فرض برای تمام ردیف‌هایی که به صورت **ضمنی** (Implicitly) توسط Grid ایجاد می‌شوند (یعنی زمانی که تعداد آیتم‌ها بیشتر از تعداد سلول‌های تعریف شده در ردیف‌های صریح باشد).
در پروژه گالری ما، احتمالاً نمی‌دانیم دقیقاً چند ردیف خواهیم داشت (چون ممکن است تصاویر بیشتری اضافه شود). بنابراین، استفاده از grid-auto-rows منطقی‌تر است تا ارتفاع یکسانی برای تمام ردیف‌های ایجاد شده (چه الان و چه در آینده) تعریف کنیم.
بیایید ارتفاع هر ردیف را طوری تنظیم کنیم که حدوداً 300px باشد تا تصاویر به خوبی نمایش داده شوند. (البته تصاویر با object-fit: cover خودشان را تطبیق می‌دهند).
تنظیم ارتفاع ردیف‌های ضمنی با grid-auto-rows در style.css:
1.gallery-grid {
2display: grid;
3grid-template-columns: repeat(3, 1fr);
4gap: 1rem;
5grid-auto-rows: 300px; /* ارتفاع پیش‌فرض ردیف‌های ضمنی */
6
7/* اگر می‌خواستیم مثلا ۲ ردیف اول را صریحا تعریف کنیم: */
8/* grid-template-rows: 250px 400px; */
9/* grid-auto-rows: 200px; */ /* ردیف سوم به بعد ۲۰۰ پیکسل ارتفاع خواهند داشت */
10}
11
12/* --- End of Step 4 --- */حالا تمام ردیف‌های گالری (که به صورت خودکار ایجاد شده‌اند) ارتفاع تقریباً یکسانی (۳۰۰ پیکسل) خواهند داشت، که به ساختار منظم‌تری منجر می‌شود.
۶گام ۵: قرار دادن آیتم‌ها و گسترش (Span) روی سلول‌هاکنترل دقیق محل قرارگیری آیتم‌ها با grid-column و grid-row
کنترل دقیق محل قرارگیری آیتم‌ها با grid-column و grid-row
تا الان، تمام آیتم‌های گالری به صورت خودکار در سلول‌های موجود قرار گرفته‌اند (Auto Placement). اما قدرت واقعی CSS Grid زمانی مشخص می‌شود که بخواهیم آیتم‌های خاصی را در مکان‌های دلخواه قرار دهیم یا آن‌ها را روی چندین ستون یا ردیف **گسترش دهیم (Span)**.
برای این کار، از ویژگی‌های grid-column-start, grid-column-end, grid-row-start, و grid-row-end استفاده می‌کنیم. این ویژگی‌ها شماره خطوط گرید را به عنوان مقدار می‌پذیرند. به یاد بیاورید که خطوط از ۱ شروع می‌شوند.
همچنین می‌توان از **shorthand** های grid-column: start / end; و grid-row: start / end; استفاده کرد.
یک روش دیگر برای تعیین گسترش، استفاده از کلمه کلیدی span است. برای مثال، grid-column: span 2; به آیتم می‌گوید که روی دو ترک ستونی گسترش پیدا کند.
بیایید چند آیتم را در گالری خود به صورت دستی قرار دهیم و گسترش دهیم تا گالری جذاب‌تری داشته باشیم:
- آیتم اول (.item-1) را روی دو ستون اول گسترش دهیم.
- آیتم چهارم (.item-4) را روی دو ردیف گسترش دهیم.
- آیتم پنجم (.item-5) را روی دو ستون (ستون دوم و سوم) گسترش دهیم.
اعمال استایل برای قرارگیری و گسترش آیتم‌ها در style.css:
1/* Previous Grid Styles... */
2
3.gallery-grid {
4display: grid;
5grid-template-columns: repeat(3, 1fr);
6gap: 1rem;
7grid-auto-rows: 300px; /* Using auto-rows for flexibility */
8}
9
10/* --- Item Placement & Spanning --- */
11
12.gallery-item.item-1 {
13grid-column-start: 1;
14grid-column-end: 3; /* Span across column line 1 to 3 (covers 2 tracks) */
15/* Shorthand: grid-column: 1 / 3; */
16/* Using span: grid-column: span 2; (Starts at the first available column) */
17}
18
19.gallery-item.item-4 {
20grid-row-start: 2; /* Explicitly start on row line 2 */
21grid-row-end: 4; /* Span across row line 2 to 4 (covers 2 tracks) */
22/* Shorthand: grid-row: 2 / 4; */
23/* Using span: grid-row: span 2; (Starts at the current auto-placed row) */
24
25/* Let's also make it span 1 column starting from the 3rd column */
26grid-column-start: 3;
27grid-column-end: 4;
28/* Shorthand: grid-column: 3 / 4; */
29}
30
31.gallery-item.item-5 {
32grid-column-start: 1; /* Start at column 1 */
33grid-column-end: 3; /* Span across columns 1 and 2 */
34/* Shorthand: grid-column: 1 / 3; */
35/* Using span: grid-column: span 2; */
36
37/* We might need to explicitly set its row if auto-placement is not desired */
38/* grid-row-start: 3; */ /* Example: place it starting on row line 3 */
39}
40
41/* Optional: Explicit placement for another item to fill a gap */
42/* .gallery-item.item-7 {
43grid-column: 2 / 3;
44grid-row: 2 / 3;
45} */
46
47
48/* --- End of Step 5 --- */حالا مشاهده می‌کنید که چیدمان گالری بسیار پویاتر شده است. آیتم ۱ فضای دو ستون را اشغال کرده، آیتم ۴ بلندتر شده و روی دو ردیف کشیده شده و آیتم ۵ نیز پهن‌تر شده است. توجه کنید که الگوریتم Auto Placement سعی می‌کند بقیه آیتم‌ها را در فضاهای خالی باقیمانده قرار دهد، که گاهی ممکن است منجر به ایجاد فضاهای خالی ناخواسته شود. روش grid-template-areas که در گام بعدی می‌بینیم، کنترل بیشتری بر این موضوع به ما می‌دهد.
۷گام ۶: قدرت بصری grid-template-areas برای چیدمانتعریف نواحی نام‌گذاری شده و قرار دادن آیتم‌ها در آن‌ها
تعریف نواحی نام‌گذاری شده و قرار دادن آیتم‌ها در آن‌ها
یکی از خواناترین و قدرتمندترین روش‌ها برای تعریف چیدمان‌های پیچیده در CSS Grid، استفاده از ویژگی grid-template-areas است. این روش به شما امکان می‌دهد تا به صورت بصری، ساختار گرید خود را با استفاده از نام‌های دلخواه برای نواحی (Areas) تعریف کنید.
مراحل کار با grid-template-areas به این صورت است:
- **تعریف نام نواحی برای آیتم‌ها:** به هر آیتم گریدی که می‌خواهید در ناحیه خاصی قرار گیرد، با استفاده از ویژگی grid-area یک نام اختصاص دهید (مثلاً: grid-area: header;, grid-area: main-image;).
- **تعریف قالب نواحی در کانتینر:** در Grid Container، با استفاده از grid-template-areas، یک قالب متنی بسازید که نشان‌دهنده چیدمان بصری گرید است. هر رشته (String) در این قالب نشان‌دهنده یک ردیف است و نام‌های نواحی (که در مرحله ۱ تعریف کردید) با فاصله از هم جدا می‌شوند تا ستون‌ها را بسازند.
- برای گسترش یک ناحیه روی چند سلول، نام آن ناحیه را در سلول‌های مجاور تکرار کنید.
- برای نشان دادن یک سلول خالی، از نقطه (.) استفاده کنید.
- (اختیاری ولی معمولاً لازم) تعداد و اندازه ستون‌ها و ردیف‌ها را با grid-template-columns و grid-template-rows (یا grid-auto-rows) مشخص کنید تا با ساختار grid-template-areas شما مطابقت داشته باشد.
بیایید چیدمان گالری قبلی را با استفاده از grid-template-areas بازسازی کنیم. فرض کنید می‌خواهیم چیدمان زیر را داشته باشیم (در حالت دسکتاپ با ۳ ستون):
+------------+------------+------------+
| item-1 | item-1 | item-2 |
+------------+------------+------------+
| item-3 | item-4 | item-4 |
+------------+------------+------------+
| item-5 | item-5 | item-6 |
+------------+------------+------------+
| item-7 | item-8 | . |
+------------+------------+------------+
بازسازی چیدمان گالری با grid-template-areas در style.css:
1/* Remove or comment out previous item placement rules (Step 5) */
2/*
3.gallery-item.item-1 { ... }
4.gallery-item.item-4 { ... }
5.gallery-item.item-5 { ... }
6*/
7
8/* === Assign grid-area names to items === */
9.gallery-item.item-1 { grid-area: item1; }
10.gallery-item.item-2 { grid-area: item2; }
11.gallery-item.item-3 { grid-area: item3; }
12.gallery-item.item-4 { grid-area: item4; }
13.gallery-item.item-5 { grid-area: item5; }
14.gallery-item.item-6 { grid-area: item6; }
15.gallery-item.item-7 { grid-area: item7; }
16.gallery-item.item-8 { grid-area: item8; }
17
18
19/* === Define the grid structure using areas in the container === */
20.gallery-grid {
21display: grid;
22gap: 1rem;
23
24/* Define column tracks (must match the areas structure) */
25grid-template-columns: repeat(3, 1fr);
26
27/* Define row heights (can be explicit or auto) */
28/* Let's try explicit rows matching the areas structure */
29grid-template-rows: 300px 250px 300px 250px; /* 4 rows */
30/* Or use grid-auto-rows if row count might change */
31/* grid-auto-rows: minmax(250px, auto); */
32
33/* Define the visual template */
34grid-template-areas:
35"item1 item1 item2" /* Row 1 */
36"item3 item4 item4" /* Row 2 */
37"item5 item5 item6" /* Row 3 */
38"item7 item8 ."; /* Row 4 (last cell is empty) */
39}
40
41
42/* Make sure images within specific areas behave well */
43.gallery-item.item-4 {
44/* Maybe ensure the tall image fits well */
45/* height: 100%; */ /* This depends on grid-template-rows */
46}
47
48
49/* --- End of Step 6 --- */اکنون، با استفاده از grid-template-areas، چیدمان ما بسیار خواناتر و مدیریت آن آسان‌تر شده است. دقیقاً همان چیدمانی که در دیاگرام متنی بالا نشان دادیم، پیاده‌سازی شده است. مزیت بزرگ این روش، قابلیت تغییر آسان چیدمان (به خصوص در حالت واکنشگرا) با تغییر دادن قالب grid-template-areas است.
هنگام استفاده از grid-template-areas، قالب تعریف شده باید یک مستطیل کامل باشد. یعنی تمام ردیف‌ها باید تعداد ستون‌های یکسانی داشته باشند. همچنین، هر ناحیه نام‌گذاری شده باید یک ناحیه مستطیلی واحد را اشغال کند (نمی‌توانید یک ناحیه L شکل بسازید).
۸گام ۷: واکنشگرا کردن گرید با Media Queriesتغییر چیدمان گرید در اندازه‌های مختلف صفحه
تغییر چیدمان گرید در اندازه‌های مختلف صفحه
یکی از بزرگترین مزایای **CSS Grid** (به خصوص در ترکیب با grid-template-areas)، سهولت در ایجاد **چیدمان‌های واکنشگرا (Responsive)** است. ما می‌توانیم با استفاده از Media Queries، ساختار گرید (تعداد ستون‌ها، قالب نواحی و ...) را در نقاط شکست (Breakpoints) مختلف تغییر دهیم.
بیایید گالری خود را به صورت زیر واکنشگرا کنیم:
- **موبایل (مثلاً تا 640px):** نمایش تک ستونه. تمام آیتم‌ها زیر هم قرار گیرند.
- **تبلت (مثلاً از 641px تا 1024px):** نمایش دو ستونه با یک چیدمان متفاوت با استفاده از grid-template-areas.
- **دسکتاپ (مثلاً از 1025px به بالا):** نمایش سه ستونه، همان چیدمانی که در گام قبل با grid-template-areas ساختیم.
ما از رویکرد Mobile-First استفاده می‌کنیم، یعنی ابتدا استایل‌های پایه برای موبایل را می‌نویسیم و سپس با min-width در Media Query، استایل‌ها را برای صفحات بزرگتر بازنویسی (Override) می‌کنیم.
پیاده‌سازی واکنش‌گرایی با Media Queries در style.css:
1/* Mobile First Styles (Default) */
2.gallery-grid {
3display: grid;
4gap: 1rem;
5/* Single column by default */
6grid-template-columns: 1fr;
7/* No areas needed for single column, items stack naturally */
8grid-template-areas: none; /* Reset areas */
9grid-auto-rows: auto; /* Let content determine height on mobile */
10}
11
12/* Reset individual item areas for mobile */
13.gallery-item.item-1,
14.gallery-item.item-2,
15.gallery-item.item-3,
16.gallery-item.item-4,
17.gallery-item.item-5,
18.gallery-item.item-6,
19.gallery-item.item-7,
20.gallery-item.item-8 {
21grid-area: auto; /* Let them auto-place */
22}
23
24
25/* Tablet Styles (e.g., min-width: 641px) */
26@media (min-width: 641px) {
27.gallery-grid {
28/* Two columns for tablet */
29grid-template-columns: repeat(2, 1fr);
30grid-auto-rows: 280px; /* Adjust row height for tablet */
31
32/* Define a different layout for tablet */
33grid-template-areas:
34 "item1 item2"
35 "item3 item2" /* item2 spans two rows */
36 "item4 item5"
37 "item6 item5" /* item5 spans two rows */
38 "item7 item8";
39}
40
41/* Assign areas for tablet layout */
42/* Note: Names MUST match the areas defined above */
43.gallery-item.item-1 { grid-area: item1; }
44.gallery-item.item-2 { grid-area: item2; }
45.gallery-item.item-3 { grid-area: item3; }
46.gallery-item.item-4 { grid-area: item4; }
47.gallery-item.item-5 { grid-area: item5; }
48.gallery-item.item-6 { grid-area: item6; }
49.gallery-item.item-7 { grid-area: item7; }
50.gallery-item.item-8 { grid-area: item8; }
51}
52
53
54/* Desktop Styles (e.g., min-width: 1025px) */
55@media (min-width: 1025px) {
56.gallery-grid {
57/* Three columns for desktop */
58grid-template-columns: repeat(3, 1fr);
59grid-template-rows: 300px 250px 300px 250px; /* Explicit rows */
60grid-auto-rows: 0; /* Prevent implicit rows if possible */
61
62/* Revert to the original desktop layout */
63grid-template-areas:
64 "item1 item1 item2"
65 "item3 item4 item4"
66 "item5 item5 item6"
67 "item7 item8 .";
68}
69/* Areas are already assigned, no need to re-assign if names are the same */
70}
71
72
73/* --- End of Step 7 --- */حالا با تغییر اندازه پنجره مرورگر (یا با استفاده از ابزار Responsive Design Mode در DevTools)، می‌توانید ببینید که چیدمان گالری به زیبایی در نقاط شکست مختلف تغییر می‌کند. این قدرت **واکنش‌گرایی ذاتی CSS Grid** است!
۹ گام ۸: ترازبندی آیتم‌ها و محتوا در گریداستفاده از align-items, justify-items, align-content, justify-content
استفاده از align-items, justify-items, align-content, justify-content
CSS Grid کنترل فوق‌العاده‌ای بر روی **ترازبندی (Alignment)** آیتم‌ها در داخل سلول‌هایشان و همچنین ترازبندی خودِ گرید در داخل کانتینر (اگر فضای اضافی وجود داشته باشد) به ما می‌دهد. این ویژگی‌ها بسیار شبیه به ویژگی‌های ترازبندی در Flexbox هستند.
چهار ویژگی اصلی ترازبندی در Grid عبارتند از:
- ۱. justify-items (در Container):
- ترازبندی **افقی** تمام آیتم‌ها را در *داخل* سلول‌های گریدشان کنترل می‌کند. مقادیر رایج: start, end, center, stretch (پیش‌فرض).
- ۲. align-items (در Container):
- ترازبندی **عمودی** تمام آیتم‌ها را در *داخل* سلول‌های گریدشان کنترل می‌کند. مقادیر رایج: start, end, center, stretch (پیش‌فرض), baseline.
- ۳. justify-content (در Container):
- ترازبندی **افقی** *کلِ گرید* را در *داخل* کانتینر کنترل می‌کند (فقط زمانی کاربرد دارد که اندازه کل گرید کوچکتر از عرض کانتینر باشد). مقادیر رایج: start, end, center, space-around, space-between, space-evenly.
- ۴. align-content (در Container):
- ترازبندی **عمودی** *کلِ گرید* را در *داخل* کانتینر کنترل می‌کند (فقط زمانی کاربرد دارد که اندازه کل گرید کوچکتر از ارتفاع کانتینر باشد). مقادیر مشابه justify-content.
همچنین می‌توانید با استفاده از ویژگی‌های justify-self و align-self بر روی **یک آیتم خاص**، ترازبندی پیش‌فرض تعیین شده توسط justify-items و align-items را بازنویسی کنید.
در پروژه گالری ما، چون آیتم‌ها به صورت پیش‌فرض (stretch) تمام فضای سلول خود را پر می‌کنند، شاید justify-items و align-items تأثیر بصری زیادی نداشته باشند، مگر اینکه آیتم‌ها اندازه ذاتی (intrinsic size) داشته باشند یا اندازه‌شان را کوچکتر کنیم. اما بیایید برای مثال، تمام آیتم‌ها را در مرکز سلول‌هایشان (هم افقی و هم عمودی) قرار دهیم.
اعمال ترازبندی مرکزی برای آیتم‌ها در style.css:
1/* Apply to the container */
2.gallery-grid {
3/* ... previous styles ... */
4justify-items: center; /* Center items horizontally within their cell */
5align-items: center; /* Center items vertically within their cell */
6
7/* Optional: If grid itself is smaller than container */
8/* align-content: center; */
9/* justify-content: center; */
10}
11
12/* Optional: Override for a specific item */
13.gallery-item.item-2 {
14justify-self: start; /* Align item 2 to the start horizontally */
15align-self: end; /* Align item 2 to the end vertically */
16}
17
18
19/* --- End of Step 8 --- */با اعمال این کد، خواهید دید که آیتم‌ها دیگر تمام فضای سلول خود را پر نمی‌کنند و در مرکز آن قرار می‌گیرند (به جز آیتم ۲ که به صورت جداگانه ترازبندی شده است). این می‌تواند برای ایجاد افکت‌های بصری خاص مفید باشد. (در عمل برای گالری تصاویر، معمولاً stretch پیش‌فرض مناسب‌تر است، مگر اینکه بخواهید تصاویر اندازه اصلی خود را حفظ کنند).
۱۰ گام ۹: توابع قدرتمند minmax() و repeat() (با auto-fit/auto-fill)ایجاد گریدهای انعطاف‌پذیر و خودکار
ایجاد گریدهای انعطاف‌پذیر و خودکار
CSS Grid توابع داخلی بسیار مفیدی را ارائه می‌دهد که به شما کمک می‌کنند گریدهای پیچیده‌تر و انعطاف‌پذیرتری بسازید. دو مورد از پرکاربردترین آن‌ها minmax() و repeat() (با قابلیت‌های بیشتر) هستند.
- ۱. تابع minmax(min, max):
- به شما امکان می‌دهد یک محدوده اندازه برای یک ترک (ردیف یا ستون) تعریف کنید. ترک می‌تواند تا مقدار max بزرگ شود، اما هرگز کوچکتر از min نخواهد شد. این برای ایجاد انعطاف‌پذیری عالی است. مثال: grid-template-columns: minmax(150px, 1fr); (ستون حداقل ۱۵۰ پیکسل عرض دارد، اما می‌تواند بزرگتر شود تا فضای خالی را پر کند).
- ۲. تابع repeat(count, track-list) با auto-fit و auto-fill:
- ما قبلاً از repeat(3, 1fr) استفاده کردیم. اما می‌توان به جای تعداد (count)، از کلمات کلیدی auto-fit یا auto-fill استفاده کرد. این به Grid می‌گوید که **تا جایی که ممکن است** ستون‌هایی با الگوی مشخص شده (track-list) را در فضای موجود جا دهد.
- **auto-fill**: تا جایی که ممکن است ستون ایجاد می‌کند، حتی اگر خالی بمانند.
- **auto-fit**: شبیه auto-fill است، اما اگر ستون‌های ایجاد شده خالی باشند، آن‌ها را "جمع می‌کند" (collapse می‌کند) تا فضای خالی از بین برود و ستون‌های پر شده باقیمانده فضا را اشغال کنند. auto-fit معمولاً برای چیدمان‌های واکنشگرا بسیار کاربردی‌تر است.
بیایید تعریف ستون‌های گالری خود را (در حالت دسکتاپ) با استفاده از این تکنیک بازنویسی کنیم تا به صورت خودکار تعداد ستون‌ها بر اساس فضای موجود تنظیم شود، اما حداقل عرض هر آیتم حفظ شود. (توجه: این ممکن است با grid-template-areas پیچیده شود، بنابراین یا باید grid-template-areas را حذف کنیم یا فقط در حالتی که از آن استفاده نمی‌کنیم (مثلاً موبایل یا تبلت) این روش را به کار ببریم).
برای سادگی، بیایید grid-template-areas را در حالت دسکتاپ کامنت کنیم و این تکنیک جدید را امتحان کنیم:
استفاده از repeat(auto-fit, minmax(...)) برای ستون‌های واکنشگرا در style.css (بخش دسکتاپ):
1/* Inside Desktop Styles (@media (min-width: 1025px)) */
2@media (min-width: 1025px) {
3.gallery-grid {
4/* Replace previous column/row/area definitions */
5grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
6grid-auto-rows: 300px; /* Keep consistent row height if desired */
7grid-template-areas: none; /* Disable areas when using auto-fit columns */
8
9 /* Reset grid-area on items if they were set previously */
10 & > .gallery-item {
11 grid-area: auto; /* Allow auto-placement */
12 /* Reset specific spanning if needed, or handle it differently */
13 }
14}
15}
16
17/* Make sure mobile and tablet styles also reset areas or adjust accordingly */
18/* Example: Mobile */
19/* .gallery-grid { ... grid-template-areas: none; } */
20/* .gallery-grid > .gallery-item { grid-area: auto; } */
21
22/* Example: Tablet */
23/* @media (min-width: 641px) { ... grid-template-areas: ... (or none if using auto-fit here too) } */
24
25
26/* --- End of Step 9 --- */حالا اگر در حالت دسکتاپ اندازه پنجره را تغییر دهید، می‌بینید که تعداد ستون‌ها به صورت خودکار تنظیم می‌شود تا آیتم‌ها همیشه حداقل ۲۸۰ پیکسل عرض داشته باشند و فضای اضافی بین آن‌ها تقسیم شود. این یک راه بسیار مدرن و کارآمد برای ایجاد چیدمان‌های مایع (fluid) و واکنشگرا است، بدون نیاز به تعریف نقاط شکست متعدد فقط برای تغییر تعداد ستون‌ها!
🏁جمع‌بندی پروژه گالری و نکات پیشرفته‌ترنگاهی به آنچه ساختیم و قدم‌های بعدی
نگاهی به آنچه ساختیم و قدم‌های بعدی
تبریک می‌گویم! شما با موفقیت یک گالری تصاویر کاملاً واکنشگرا را با استفاده از قدرت **CSS Grid** از صفر ساختید. در طول این پروژه، ما مفاهیم اساسی مانند تعریف کانتینر و آیتم‌های گرید، ایجاد ستون‌ها و ردیف‌ها با واحدهای مختلف (به‌ویژه fr)، افزودن فاصله‌ها (gap)، کنترل ارتفاع ردیف‌ها، قرار دادن و گسترش آیتم‌ها به صورت دستی، استفاده از grid-template-areas برای چیدمان بصری، پیاده‌سازی واکنش‌گرایی با Media Queries، و در نهایت استفاده از توابع پیشرفته minmax() و repeat() با auto-fit را یاد گرفتیم.
مشاهده کد نهایی CSS پروژه (style.css)
1/* === Basic Reset & Base Styles === */
2*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
3body { font-family: 'Vazirmatn', sans-serif; line-height: 1.6; background-color: #f8f9fa; color: #333; }
4/* Optional Dark Mode */
5/* @media (prefers-color-scheme: dark) { body { background-color: #1a202c; color: #cbd5e0; } ... } */
6img { display: block; max-width: 100%; width: 100%; height: 100%; object-fit: cover;object-position: center; }
7.gallery-item figcaption {padding: 10px;text-align: center;font-size: 0.9em;color: #555;background-color: #f8f9fa; /* Slightly different background for caption */}
8.gallery-item { background-color: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }
9.gallery-item:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); }
10.container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
11/* Basic Tailwind-like utilities used in HTML */
12.p-5 { padding: 1.25rem; } .p-4 { padding: 1rem; } .my-8 { margin-top: 2rem; margin-bottom: 2rem; } .mx-auto { margin-left: auto; margin-right: auto; } .text-center { text-align: center; } .bg-primary-600 { background-color: #0052cc; } .text-white { color: #fff; } .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .text-2xl { font-size: 1.5rem; } .font-bold { font-weight: 700; } .bg-gray-800 { background-color: #2d3748; } .text-gray-300 { color: #d1d5db; } .text-sm { font-size: 0.875rem; } .text-primary-400 { color: #3b82f6; } .hover\:underline:hover { text-decoration: underline; }
13/* === End of Base Styles === */
14
15
16/* === CSS GRID STYLES === */
17
18/* Mobile First Styles (Default) */
19.gallery-grid {
20display: grid;
21gap: 1rem;
22grid-template-columns: 1fr; /* Single column */
23grid-template-areas: none; /* Reset areas */
24grid-auto-rows: auto; /* Auto height */
25}
26/* Reset individual item areas for mobile */
27.gallery-grid > .gallery-item {
28grid-area: auto;
29}
30
31/* Tablet Styles (e.g., min-width: 641px) */
32@media (min-width: 641px) {
33.gallery-grid {
34/* Two columns for tablet */
35grid-template-columns: repeat(2, 1fr);
36grid-auto-rows: 280px;
37
38/* Using template areas for tablet layout */
39grid-template-areas:
40 "item1 item2"
41 "item3 item2"
42 "item4 item5"
43 "item6 item5"
44 "item7 item8";
45}
46/* Assign areas for tablet layout */
47.gallery-item.item-1 { grid-area: item1; }
48.gallery-item.item-2 { grid-area: item2; }
49.gallery-item.item-3 { grid-area: item3; }
50.gallery-item.item-4 { grid-area: item4; }
51.gallery-item.item-5 { grid-area: item5; }
52.gallery-item.item-6 { grid-area: item6; }
53.gallery-item.item-7 { grid-area: item7; }
54.gallery-item.item-8 { grid-area: item8; }
55}
56
57/* Desktop Styles (e.g., min-width: 1025px) - Using auto-fit example */
58@media (min-width: 1025px) {
59.gallery-grid {
60/* Using auto-fit for responsive columns */
61grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
62grid-auto-rows: 300px;
63grid-template-areas: none; /* Disable areas when using auto-fit */
64}
65/* Reset grid-area on items for auto-placement */
66.gallery-grid > .gallery-item {
67 grid-area: auto;
68}
69/* Example: Make item 1 span two columns even with auto-fit */
70/* .gallery-item.item-1 { grid-column: span 2; } */
71/* .gallery-item.item-4 { grid-row: span 2; } */
72}
73
74/* Optional Alignment (Uncomment to test) */
75/*
76.gallery-grid {
77justify-items: center;
78align-items: center;
79}
80.gallery-item.item-2 {
81justify-self: start;
82align-self: end;
83}
84*/
85**نکات پیشرفته‌تر و قدم‌های بعدی:**
- **ترتیب آیتم‌ها (order):** می‌توانید ترتیب بصری آیتم‌ها را با ویژگی order (مشابه Flexbox) تغییر دهید، بدون اینکه نیاز به تغییر HTML داشته باشید.
- **خطوط نام‌گذاری شده (Named Lines):** به جای استفاده از شماره خطوط، می‌توانید به خطوط گرید نام دهید (مثلاً [col-start]، [content-end]) و از این نام‌ها برای قرار دادن آیتم‌ها استفاده کنید که خوانایی را افزایش می‌دهد.
- **زیرگرید (Subgrid):** یک قابلیت نسبتاً جدید که به آیتم‌های گرید اجازه می‌دهد تا ساختار گریدِ والد خود را به ارث ببرند یا بخشی از آن را برای چیدمان داخلی خود استفاده کنند. (پشتیبانی مرورگرها در حال افزایش است).
- **ترکیب با Flexbox:** همانطور که اشاره شد، برای چیدمان داخلی آیتم‌های گرید (مثلاً تراز کردن کپشن در پایین تصویر)، Flexbox همچنان یک انتخاب عالی است.
- **انیمیشن و Transition:** می‌توان ویژگی‌های Grid (مانند اندازه ترک‌ها یا gap) را انیمیت کرد، اگرچه پشتیبانی و عملکرد آن ممکن است به اندازه انیمیشن transform روان نباشد.
بهترین راه برای تسلط کامل، تمرین مداوم است. سعی کنید چیدمان وب‌سایت‌های مورد علاقه خود را با CSS Grid بازسازی کنید یا پروژه‌های کوچک دیگری برای خود تعریف کنید.
سوالات متداول درباره آموزش CSS Grid
- تفاوت اصلی CSS Grid و Flexbox چیست؟ چه زمانی از کدام استفاده کنیم؟
- به طور خلاصه: Flexbox برای چیدمان **یک بعدی** (ردیف یا ستون) عالی است، در حالی که CSS Grid برای چیدمان **دو بعدی** (ردیف‌ها و ستون‌ها با هم) طراحی شده. از Grid برای ساختار کلی صفحه و از Flexbox برای تراز کردن آیتم‌ها درون یک کامپوننت یا یک سلول Grid استفاده کنید. آن‌ها مکمل یکدیگرند. ([جزئیات بیشتر در متن مقاله])
- واحد fr دقیقاً چگونه کار می‌کند؟
- واحد fr (Fraction) نشان‌دهنده بخشی از **فضای موجود** در کانتینر گرید است. اگر سه ستون 1fr 1fr 1fr داشته باشید، هر کدام یک سوم فضای افقی موجود را اشغال می‌کنند. اگر 1fr 2fr داشته باشید، ستون دوم دو برابر ستون اول فضا می‌گیرد. این باعث می‌شود ترک‌ها به صورت انعطاف‌پذیر و متناسب با فضای کلی، اندازه بگیرند. ([توضیح بیشتر در گام ۲])
- آیا CSS Grid در همه مرورگرها پشتیبانی می‌شود؟ آیا نیاز به پیشوند (Prefix) دارد؟
- خوشبختانه، **CSS Grid** امروزه توسط تمام مرورگرهای مدرن اصلی (Chrome، Firefox، Safari، Edge) به خوبی پشتیبانی می‌شود و دیگر **نیازی به استفاده از پیشوندهای مرورگر (-webkit-, -moz-) نیست**. برای پشتیبانی از مرورگرهای بسیار قدیمی (مانند IE11 که پیاده‌سازی متفاوتی داشت)، ممکن است به راهکارهای جایگزین (Fallback) یا polyfill نیاز باشد، اما برای اکثر کاربران امروزی، Grid به صورت Native کار می‌کند. می‌توانید وضعیت دقیق پشتیبانی را در سایت‌هایی مانند Can I use... بررسی کنید.
- چه زمانی *نباید* از CSS Grid استفاده کرد؟
- گرچه Grid بسیار قدرتمند است، اما برای همه چیز بهترین راه حل نیست. برای چیدمان‌های ساده تک بعدی (مثلاً دکمه‌ها در یک ردیف، آیتم‌های منو)، Flexbox اغلب ساده‌تر و کارآمدتر است. همچنین برای ساختارهای بسیار ساده که با display: block یا inline-block به راحتی قابل پیاده‌سازی هستند، ممکن است استفاده از Grid کمی زیاده‌روی (Overkill) باشد. انتخاب ابزار مناسب بستگی به پیچیدگی چیدمان دارد.
- یادگیری CSS Grid چقدر طول می‌کشد؟
- زمان یادگیری بستگی به پیش‌زمینه شما در CSS و میزان تمرین دارد. مفاهیم پایه Grid (Container, Item, Columns, Rows, Gap) را می‌توان در عرض چند ساعت یاد گرفت. تسلط بر مفاهیم پیشرفته‌تر مانند grid-template-areas، توابع و ترازبندی ممکن است چند روز تا چند هفته تمرین نیاز داشته باشد. این مقاله جامع به شما کمک می‌کند تا این مسیر را سریع‌تر طی کنید، اما **تمرین عملی** کلید اصلی تسلط است.
جمع‌بندی نهایی: شما به CSS Grid مسلط شدید!
با رسیدن به انتهای این راهنمای جامع و **پروژه محور آموزش CSS Grid**، شما دانش و مهارت لازم برای ساخت انواع چیدمان‌های وب مدرن را به دست آورده‌اید. ما از مفاهیم بنیادی شروع کردیم و با ساخت یک گالری تصاویر واکنشگرا، تمام ویژگی‌های کلیدی **سی اس اس گرید** از جمله تعریف ترک‌ها، استفاده از واحد fr، کنترل فاصله‌ها، قرار دادن آیتم‌ها، کار با grid-template-areas، پیاده‌سازی واکنش‌گرایی و استفاده از توابع پیشرفته را به صورت عملی یاد گرفتیم.
دانش **CSS Grid Layout** یکی از مهم‌ترین مهارت‌ها برای هر توسعه‌دهنده فرانت‌اند یا طراح وب در دنیای امروز است. این ابزار به شما قدرت، انعطاف‌پذیری و کنترل بی‌نظیری بر روی چیدمان می‌دهد که پیش از این با روش‌های قدیمی‌تر به سختی قابل دستیابی بود.
حالا نوبت شماست! آموخته‌های خود را در پروژه‌های واقعی به کار بگیرید. چیدمان وب‌سایت‌های موجود را تحلیل کنید و سعی کنید آن‌ها را با Grid بازسازی کنید. هرچه بیشتر تمرین کنید، تسلط شما بر **یادگیری CSS Grid** عمیق‌تر خواهد شد.
قدم بعدی در مسیر استادی CSS Grid چیست؟ 🚀
شما با این آموزش پروژه‌محور، یک جهش بزرگ در مهارت **CSS Grid** خود داشته‌اید. برای عمیق‌تر شدن در تمام جزئیات، مشاهده مثال‌های بیشتر و تسلط کامل بر تکنیک‌های پیشرفته، مسیر یادگیری خود را با منابع تخصصی ادامه دهید.
🎓 دوره تخصصی CSS Grid:
برای یادگیری تمام نکات و ترفندهای CSS Grid از زبان مدرس متخصص، دوره جامع CSS Grid: از مقدماتی تا پیشرفته (پیتر سومرهوف) را در Virtual Learn از دست ندهید. این دوره با زیرنویس دقیق فارسی، شما را به سطح استادی می‌رساند.
مشاهده دوره کامل CSS Grid📚 تقویت پایه‌های HTML و CSS:
اگر احساس می‌کنید نیاز به تقویت مفاهیم پایه HTML و CSS دارید تا بتوانید از Grid و Flexbox بهتر استفاده کنید، دوره آموزش HTML & CSS ساخت سایت واکنشگرا (جوناس اشمتمن) با زیرنویس فارسی، یک انتخاب فوق‌العاده است.
مشاهده دوره جامع HTML/CSS💬 سوالی دارید یا نکته‌ای؟
امیدواریم این **آموزش CSS Grid** برای شما مفید بوده باشد. اگر در طول پروژه با مشکلی مواجه شدید، سوالی داشتید یا نکته جالبی کشف کردید، حتماً در بخش نظرات با ما و دیگر دوستان به اشتراک بگذارید!
