آموزش برنامه نویسی وب🌐: بخش css قسمت هشتم(آموزش کامل Grid یا گرید)

قسمت قبلی

CSS Grid یکی از قدرتمندترین سیستم‌های چیدمان در CSS است که امکان طراحی صفحات وب را به روشی ساده و انعطاف‌پذیر فراهم می‌کند. برخلاف Flexbox که بر محور یک‌بعدی (افقی یا عمودی) تمرکز دارد، Grid یک سیستم دو‌بعدی است که به شما اجازه می‌دهد عناصر را به‌طور همزمان در سطرها و ستون‌ها قرار دهید.

در این قسمت از سری آموزش برنامه نویسی وب، به‌طور کامل با CSS Grid آشنا خواهید شد، از مفاهیم پایه تا ویژگی‌های پیشرفته مانند grid-template، grid-auto-flow و grid-areas. اگر در قسمت قبلی قبلی با Flexbox آشنا شده‌اید، یادگیری Grid به شما کمک می‌کند تا کنترل بهتری روی چینش عناصر در طراحی‌های پیچیده داشته باشید.

🔥 ویژگی‌های CSS Grid

1️⃣ سیستم دو‌بعدی

برخلاف Flexbox که تنها در یک جهت (افقی یا عمودی) کار می‌کند، CSS Grid یک سیستم دو‌بعدی است که همزمان چینش عناصر را در سطرها و ستون‌ها کنترل می‌کند.

2️⃣ استفاده از Grid Container و Grid Items

برای فعال‌سازی Grid، یک عنصر را به عنوان container مشخص می‌کنیم و عناصر داخلی آن grid items نامیده می‌شوند.

3️⃣ استفاده از خطوط Grid

Grid دارای خطوط عمودی و افقی است که برای جایگذاری دقیق عناصر استفاده می‌شود.

4️⃣ ویژگی Grid Template

می‌توان ستون‌ها و ردیف‌ها را با ویژگی‌های grid-template-columns و grid-template-rows تنظیم کرد.

5️⃣ Grid Auto Flow

این ویژگی مشخص می‌کند که آیتم‌ها به چه ترتیبی در Grid قرار بگیرند: در سطر یا ستون.

6️⃣ استفاده از Grid Areas

با استفاده از grid-template-areas می‌توان بخش‌هایی را نام‌گذاری و عناصر را به آن‌ها اختصاص داد.

7️⃣ تنظیم فاصله بین عناصر (Grid Gap)

با استفاده از grid-gap می‌توان فاصله بین ستون‌ها و ردیف‌ها را تعیین کرد.

8️⃣ قابلیت واکنش‌گرایی بالا

Grid با ویژگی‌هایی مانند minmax() و auto-fit امکان طراحی واکنش‌گرا را فراهم می‌کند.

📌 فهرست مطالب

1. مقدمه: چرا Grid نیاز داریم؟
بررسی مشکلات چینش عناصر در CSS و مزایای Grid.
2. مفاهیم پایه‌ای CSS Grid
تعریف Grid، تفاوت آن با Flexbox و معرفی ویژگی‌های اصلی.
3. تنظیمات Grid Container
نحوه تعریف یک container و ویژگی‌های مرتبط با آن.
4. تنظیمات Grid Items
کنترل مکان و اندازه آیتم‌ها در Grid.
5. کار با Grid Template
نحوه استفاده از grid-template-columns و grid-template-rows.
6. استفاده از Grid Auto Flow
کنترل ترتیب قرارگیری آیتم‌ها در Grid.
7. تنظیم فاصله بین عناصر با Grid Gap
کاربرد grid-gap، row-gap و column-gap.
8. استفاده از Grid Areas
ایجاد چینش سفارشی با grid-template-areas.
9. ریسپانسیو کردن Grid
بهترین روش‌ها برای ساخت گرید واکنش‌گرا.

1. مقدمه: چرا Grid نیاز داریم؟

در گذشته برای چینش عناصر در صفحه وب از روش‌هایی مانند float، inline-block و سپس Flexbox استفاده می‌شد. اما Grid برای طراحی پیچیده‌تر ساخته شده است و امکانات بیشتری را فراهم می‌کند.

در طراحی‌های مدرن وب، به دلیل پیچیدگی و نیاز به چینش‌های چندسطحی و دقیق‌تر، CSS Grid به ابزاری ضروری تبدیل شده است. این روش جدید و قدرتمند، نسبت به روش‌های قبلی مانند Flexbox، انعطاف‌پذیری بیشتری دارد و می‌توان طراحی‌هایی به مراتب پیچیده‌تر و با قابلیت‌های بیشتر را انجام داد.

مزایای استفاده از Grid:

چینش دقیق و چندبعدی عناصر
ایجاد طراحی‌های واکنش‌گرا به راحتی
کنترل بهتر روی فاصله‌ها و اندازه‌ها
کاهش پیچیدگی‌های کد نسبت به استفاده از float و inline-block

برای درک بهتر از قدرت و کاربردهای Grid، به مثال زیر توجه کنید:

محتوا 1

محتوا 2

محتوا 3

محتوا 4

2. مفاهیم پایه‌ای CSS Grid

CSS Grid یک سیستم طراحی دو بعدی است که به شما امکان می‌دهد عناصر را در ستون‌ها و ردیف‌ها مرتب کنید. این سیستم به‌طور خاص برای طراحی‌های پیچیده‌ای که نیاز به چینش دقیق در دو بعد دارند، ایجاد شده است. برخلاف مدل‌های دیگر مانند Flexbox که برای چیدن عناصر در یک بعد (افقی یا عمودی) استفاده می‌شوند، CSS Grid به شما اجازه می‌دهد که در هر دو بعد (افقی و عمودی) به‌طور همزمان عناصر را چیدمان کنید.

اصول پایه‌ای CSS Grid

Grid Container: به عنصر پدر که به‌عنوان یک کانتینر برای عناصر فرزند (که در داخل آن قرار می‌گیرند) عمل می‌کند، "Grid Container" می‌گوییم. این عنصر باید خاصیت display: grid را داشته باشد تا به یک کانتینر Grid تبدیل شود.
Grid Item: به هر یک از عناصر فرزند داخل Grid Container، "Grid Item" گفته می‌شود. این‌ها همان عناصر هستند که در داخل شبکه قرار می‌گیرند و مرتب می‌شوند.
Grid Line: خط‌هایی که شبکه را تقسیم می‌کنند و به شما اجازه می‌دهند که برای تعیین محل قرارگیری عناصر از آن‌ها استفاده کنید. این خطوط به‌صورت افقی و عمودی وجود دارند و می‌توانید از آن‌ها برای جایگذاری عناصر در موقعیت‌های خاص استفاده کنید.
Grid Track: به فضاهای بین دو خط متوالی، که می‌توانند به‌عنوان ردیف یا ستون در نظر گرفته شوند، "Grid Track" گفته می‌شود. به عبارت دیگر، هر Track یک ستون یا ردیف را تشکیل می‌دهد.
Grid Cell: به فضای کوچک مربعی شکل که در تقاطع یک ردیف و یک ستون قرار دارد، "Grid Cell" می‌گویند. هر Grid Item می‌تواند در یک یا چند Grid Cell قرار گیرد.
Grid Area: به مجموعه‌ای از یک یا چند Grid Cell که یک فضای بزرگ‌تر را تشکیل می‌دهند، "Grid Area" گفته می‌شود. به این طریق می‌توان چندین سلول را به یکدیگر ترکیب کرده و یک بخش بزرگ‌تر از شبکه را برای قرار دادن یک عنصر اختصاص داد.

چگونه از CSS Grid استفاده کنیم؟

برای استفاده از CSS Grid، شما باید ابتدا یک عنصر به‌عنوان کانتینر (Grid Container) انتخاب کنید و سپس داخل آن، عناصر فرزند (Grid Items) را با استفاده از ویژگی‌های مربوط به Grid مرتب کنید. به‌عنوان مثال، با استفاده از ویژگی grid-template-columns می‌توانید تعداد ستون‌ها را تعیین کنید و با grid-template-rows تعداد ردیف‌ها را مشخص کنید.

مثال ساده:

در اینجا یک مثال ساده برای ایجاد یک شبکه با دو ستون و دو ردیف آورده شده است:

محتوا 1

محتوا 2

محتوا 3

محتوا 4

در این مثال، با استفاده از ویژگی grid-template-columns: repeat(2, 1fr) دو ستون با عرض مساوی ایجاد کرده‌ایم و با grid-template-rows: repeat(2, 100px) دو ردیف با ارتفاع 100 پیکسل ساخته‌ایم. ویژگی gap نیز فاصله بین این ردیف‌ها و ستون‌ها را تنظیم می‌کند.

3. تنظیمات Grid Container

برای استفاده از Grid ابتدا باید یک عنصر را به عنوان container مشخص کنید:

display: grid;

با این دستور، عنصر مورد نظر به یک Grid Container تبدیل می‌شود و تمامی عناصر داخل آن به Grid Item تبدیل خواهند شد.

ویژگی‌های اصلی Grid Container

display: grid;: این ویژگی، عنصر مورد نظر را به یک Grid Container تبدیل می‌کند و به شما امکان می‌دهد که عناصر داخلی را به‌عنوان Grid Item مدیریت کنید.
grid-template-columns: با این ویژگی می‌توانید تعداد و عرض ستون‌ها را مشخص کنید. به‌عنوان مثال، اگر می‌خواهید دو ستون با عرض مساوی داشته باشید، از grid-template-columns: repeat(2, 1fr); استفاده می‌کنید.
grid-template-rows: این ویژگی به شما این امکان را می‌دهد که تعداد و ارتفاع ردیف‌ها را تنظیم کنید. به‌عنوان مثال، اگر می‌خواهید سه ردیف با ارتفاع 200 پیکسل داشته باشید، از grid-template-rows: repeat(3, 200px); استفاده می‌کنید.
gap: برای تنظیم فاصله بین ردیف‌ها و ستون‌ها از این ویژگی استفاده می‌شود. به‌عنوان مثال، gap: 10px; فاصله 10 پیکسل بین ردیف‌ها و ستون‌ها ایجاد می‌کند.
grid-template-areas: این ویژگی به شما این امکان را می‌دهد که فضای هر Grid Item را به‌طور خاص تعیین کنید. با استفاده از این ویژگی می‌توانید یک نام به هر بخش اختصاص دهید و سپس در کد خود از آن استفاده کنید.

مثال:

در این مثال، یک Grid Container با دو ستون و دو ردیف ایجاد می‌کنیم:

محتوا 1

محتوا 2

محتوا 3

محتوا 4

4. تنظیمات Grid Items

آیتم‌های داخل Grid را می‌توان با ویژگی‌هایی مانند grid-column و grid-row تنظیم کرد. این ویژگی‌ها به شما امکان می‌دهند تا آیتم‌ها را در داخل Grid با دقت بیشتری مدیریت کنید. برای مثال، با استفاده از grid-column: 1 / 3; یک آیتم را از ستون اول شروع کرده و تا ستون سوم گسترش دهید.

مثال:


.item {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
}

در این مثال، آیتم داخل گرید از ستون 1 شروع می‌شود و تا ستون 3 ادامه می‌یابد. همچنین در ردیف 2 قرار دارد و تا ردیف 3 ادامه می‌یابد.

5. کار با Grid Template

با استفاده از grid-template-columns می‌توان تعداد ستون‌ها را تعیین کرد. این ویژگی به شما اجازه می‌دهد تا اندازه‌ها و تعداد ستون‌های گرید خود را به دلخواه تنظیم کنید. به عنوان مثال، اگر بخواهید دو ستون با اندازه‌های متفاوت داشته باشید، می‌توانید از مقدار 1fr 2fr استفاده کنید که ستون اول یک واحد از فضای موجود را می‌گیرد و ستون دوم دو واحد از فضای موجود را می‌گیرد.

مثال:


.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

در اینجا، گرید شما دو ستون خواهد داشت که ستون اول یک واحد از فضای موجود را و ستون دوم دو واحد را اشغال می‌کند.

6. استفاده از Grid Auto Flow

ویژگی grid-auto-flow مشخص می‌کند که آیتم‌ها به صورت خودکار در چه جهتی قرار بگیرند. به طور پیش‌فرض، این ویژگی آیتم‌ها را به صورت ردیفی (row) مرتب می‌کند، اما با تنظیم آن به column می‌توانید آیتم‌ها را به صورت ستونی قرار دهید.

مثال:


.container {
    display: grid;
    grid-auto-flow: row;
}

در این مثال، آیتم‌ها به صورت ردیفی در داخل گرید قرار می‌گیرند. اگر بخواهید آیتم‌ها به صورت ستونی قرار بگیرند، کافیست مقدار column را به آن نسبت دهید.

7. تنظیم فاصله بین عناصر با Grid Gap

برای تعیین فاصله بین سطرها و ستون‌ها می‌توان از grid-gap استفاده کرد. این ویژگی به شما امکان می‌دهد که فاصله بین سطرها و ستون‌ها را به طور مستقل یا به صورت یکپارچه تنظیم کنید.

مثال:


.container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 20px;
}

در اینجا، فاصله‌ای 20px بین تمامی سطرها و ستون‌ها ایجاد می‌شود. می‌توانید از grid-row-gap و grid-column-gap برای تعیین فاصله جداگانه بین سطرها و ستون‌ها استفاده کنید.

8. استفاده از Grid Areas

با استفاده از grid-template-areas می‌توان نام‌هایی برای بخش‌های مختلف Grid تعیین کرد. این ویژگی به شما اجازه می‌دهد تا بخش‌های گرید را به نام‌های خاص خود نسبت دهید و سپس آن‌ها را در طراحی‌های مختلف گرید بگنجانید.

مثال:


.container {
    display: grid;
    grid-template-areas: 
    'header header header'
    'main sidebar footer';
}

در اینجا، گرید شما شامل سه بخش به نام‌های header، main، sidebar و footer است که با استفاده از grid-template-areas مشخص شده‌اند.

9. ریسپانسیو کردن Grid

برای طراحی گریدهای ریسپانسیو می‌توانید از ویژگی auto-fit و همچنین media queries استفاده کنید. این ویژگی‌ها به شما اجازه می‌دهند تا نحوه نمایش گرید را بسته به اندازه صفحه نمایش کاربر تغییر دهید.

مثال:


.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

در اینجا، با استفاده از auto-fit و minmax، ستون‌ها به طور خودکار اندازه خواهند گرفت تا فضای صفحه به بهترین شکل پر شود. به این ترتیب، طراحی گرید شما به طور ریسپانسیو و واکنش‌گرا خواهد بود.

💪 تمرینات

حالا که با اصول CSS Grid آشنا شدید، بیایید کمی تمرین کنیم تا مفهوم‌ها را بهتر درک کنید.

تمرین 1: طراحی یک شبکه ساده

یک شبکه 3 ستونه و 3 ردیفه بسازید. این کار را با استفاده از ویژگی‌های grid-template-columns و grid-template-rows انجام دهید و فاصله بین آیتم‌ها را با استفاده از gap تنظیم کنید.

آیتم 1

آیتم 2

آیتم 3

آیتم 4

آیتم 5

آیتم 6

آیتم 7

آیتم 8

آیتم 9

تمرین 2: استفاده از Grid Areas

یک شبکه با استفاده از ویژگی grid-template-areas بسازید. هر آیتم را به یک نام مخصوص اختصاص دهید و سپس آن‌ها را در موقعیت‌های دلخواه قرار دهید.

هدر

سایدبار

محتوا

فوتر

🎉 پایان

تبریک می‌گوییم! شما حالا با CSS Grid آشنا شدید و توانستید اصول پایه‌ای آن را یاد بگیرید. این ابزار به شما کمک می‌کند تا صفحات وب را به شکلی دقیق‌تر و انعطاف‌پذیرتر طراحی کنید. به یاد داشته باشید که با تمرین بیشتر می‌توانید مهارت خود را در استفاده از CSS Grid افزایش دهید.

در این آموزش، شما یاد گرفتید:

اصول پایه‌ای CSS Grid و تفاوت آن با Flexbox
چگونه یک Grid Container بسازید و عناصر را در آن چیدمان کنید
ویژگی‌های مهم مانند grid-template-columns، grid-template-rows، grid-template-areas و gap
چگونه طراحی‌های واکنش‌گرا با CSS Grid بسازید

با استفاده از CSS Grid می‌توانید طراحی‌های پیچیده و واکنش‌گرا ایجاد کنید که در هر اندازه صفحه‌ای به خوبی کار کنند. پس از این، به سراغ پروژه‌های پیچیده‌تر بروید و با ایجاد شبکه‌های سفارشی و کار با ویژگی‌های پیشرفته‌تر، مهارت خود را در طراحی وب افزایش دهید.

موفق باشید و از طراحی‌های خود لذت ببرید! 🌟

قسمت بعدی