CSS Grid چیست و چگونه به طراحی خلاقانه وب کمک میکند؟

اگر به دنبال منبعی هستید که به طور کامل سوال  css grid چیست را جواب دهد، در ادامه همراه درسمن باشید. ما در موضوع امروز می‌خواهیم علاوه‌بر تعریف css grid به بیان مباحثی چون کاربردها، مزایا، مفاهیم و اصطلاحات و یک مثال ساده از این موضوع، بپردازیم.

css grid چیست

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

• مشخص‌کننده‌های ستون (column tracks) 
• مشخص‌کننده‌های ردیف (row tracks)

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

مفاهیم و اصطلاحات مهم در css grid چیست؟

مهم‌ترین اصطلاحات در استفاده از CSS Grid که لازم است نسبت به آن آگاهی داشته باشید، شامل موارد زیر است:

• Grid Container (مخزن شبکه)

این مفهوم در حقیقت به عنوان والد CSS Grid محسوب می‌شود که المان‌ها درون آن با ایجاد یک شبکه، قرار می‌گیرند. همچنین این ویژگی این با استفاده از خصوصیت display: grid تعریف می‌شود که در ادامه قطعه کد مربوط به آن را مشاهده می‌کنید.

.container{ 
 display: grid; 
}

 

• Grid Items (عناصر شبکه)

این مفهوم برای چیدمان و قرارگیری المان‌های درون Grid Container در ستون‌ها و ردیف‌ها، مورد استفاده قرار می‌گیرد.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

• Tracks (تراک‌ها)

این ویژگی، ستون‌ها و ردیف‌های موجود در شبکه را نمایش می‌دهند. شما می‌توانید تعداد و ابعاد تراک‌ها را با استفاده از خصوصیت‌های grid-template-columns (برای ستون‌ها) و grid-template-rows (برای ردیف‌ها) تنظیم کنید. البته توجه داشته باشید که برای این ویژگی می‌توان طول، درصد یا کسری از فضای خالی شبکه را مشخص کرد.

.container {
    display: grid;
    grid-template-columns: 5em 100px 30%;
    grid-template-rows: 200px auto;
    gap: 10px;
}

• Grid Lines (خطوط شبکه)

در حقیقت با استفاده از این ویژگی، می‌توان خطوط تراک‌ها را با شماره گذاری تعیین کرد و شما می‌توانید از آن‌ها برای تعیین موقعیت المان‌ها استفاده کنید.

• Grid Cells (خانه‌های شبکه)

همانطور که می‌دانید هر خانه یک مکان خاص در شبکه است که با استفاده از این ویژگی، مساحت‌ ایجاد شده توسط تقاطع سطر‌ها و ستون‌ها که داخل آن‌ها Grid Items قرار می‌گیرد را مشخص می‌کند.

• grid-template-areas (الگوی شبکه)

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

• Implicit Grid (شبکه ضمنی)

زمانی که تعداد تراک‌های ستونی یا ردیفی مشخص نشده و محتوای بیشتری اضافه می‌شود، Grid Container با استفاده از این ویژگی، تعدادی تراک‌های ضمنی ایجاد می‌کند.

• Explicit Grid (شبکه صریح)

زمانی که شما به طور صریح تعداد تراک‌های ستونی یا ردیفی را تعیین می‌کنید، در واقع از این ویژگی استفاده کرده‌اید.

• grid-gap (فاصله شبکه)

این خصوصیت به شما اجازه می‌دهد تا فاصله بین تراک‌ها و خانه‌های شبکه را تنظیم کنید.

• justify-items و align-items

این دو خصوصیت برای تنظیم موقعیت عمودی و افقی المان‌ها در داخل Grid Items استفاده می‌شوند.

• justify-content و align-content

این دو خصوصیت برای تنظیم موقعیت عمودی و افقی تمام Grid Items داخل Grid Container استفاده می‌شوند. در حقیقت خصوصیت‌هایی که برای شما نام بردیم، جهت کنترل و تنظیم چیدمان المان‌ها استفاده می‌شود که برای CSS Grid، بسیار مهم هستند و با استفاده از آنها، می‌توانید چیدمان دلخواه‌ خود را ایجاد کنید.

معرفی برخی از امکانات CSS Grid:

تا اینجا متوجه شدیم که CSS Grid چیست و برای استفاده از آن چه اصطلاحاتی وجود دارد. پس می‌توان امکانات CSS Grid را اینگونه معرفی کرد:

• ایجاد شبکه (Grid Definition)

CSS Grid برای ایجاد شبکه از سطرها و ستون‌ها استفاده می‌کند و همانطور که گفتیم برای مشخص کردن تعداد و اندازه ستون‌ها و همچنین ردیف‌ها از دو خصوصیت grid-template-columns و grid-template-rows بهره برد. همچنین برای تعیین اینکه هر ستون یا ردیف چه نسبتی از فضا را اشغال می‌کند، باید از ویژگی fr (fractional unit) استفاده کنید. قطعه کد تعریف شبکه به شرح زیر است:

container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* تعریف سه ستون با عرض یکسان */
grid-template-rows: auto auto; /* تعریف دو ردیف با ارتفاع خودکار */
}

• قرار دادن المان‌ها

با این ویژگی از CSS Grid، می‌توان محل المان‌ها را مشخص کرد یا اینکه آن‌ها به سلول‌های دیگر انتقال داد. البته جالب است بدانید که اگر قصد قرار دادن المان در سلول‌های خاصی از شبکه را دارید، باید از خصوصیات grid-column و grid-row استفاده کنید. قطعه کد قرار دادن المان‌ها به شرح زیر است:

.item {
  grid-column: 2 / 4; /* المان از ستون دوم تا چهارم */
  grid-row: 1 / 3; /* المان از ردیف اول تا سوم */
}

• انعطاف‌پذیری

یکی از قوی‌ترین ویژگی‌های CSS Grid، امکان تغییر اندازه و ترکیب دیگر المان‌ها در شبکه است. این کار با تغییر خصوصیت‌های grid-column و grid-row انجام می‌شود. همچنین با پشتیبانی CSS Grid از  responsive design، این امکان در اختیار طراحان وب قرار داده شده تا المان‌ها در صفحه نمایش‌‌ با اندازه‌های مختلف، به خوبی نمایش داده شود. قطعه کد استفاده شده برای قابلیت ریسپانسیو بودن، به شرح زیر است:

.item {
  grid-column: 2 / 4; /* تغییر محل المان */
  grid-row: 1 / span 2; /* تغییر ارتفاع المان به دو ردیف */
}

 

• ترکیب و تطابق (Alignment and Justification)

برای ترکیب المان در شبکه، CSS Grid دو خصوصیت justify-content و align-content را در اختیار کاربرانش قرار داده است. همچنین برای تطابق المان‌ها نیز می‌توانید از justify-items و align-items استفاده کنید.

• ایجاد تراکس (Tracks)

شما می‌توانید تراکس‌های اضافی برای ستون‌ها و ردیف‌ها ایجاد و آن‌ را به عنوان مسیرهای انعطاف‌پذیر المان‌ها استفاده کنید که البته برای مشخص کردن اندازه تراکس‌ها می‌توانید از دو خصوصیت auto و minmax بهره ببرید.

مزایا css grid چیست؟

باتوجه به آنچه که از تعریف، امکانات و ویژگی‌های آن متوجه شدیم، می‌توان از مزایای css grid به موارد زیر اشاره کرد:

•  برخورداری از اندازه‌های ثابت و منعطف
• تعیین محل المان‌ها
• کنترل ترازبندی و برخورد المان‌های مختلف با یکدیگر 
• پشتیبانی از همپوشانی
• به خوبی کار کردن کدهای css grid در مرورگرهای مختلف
• توسعه سریعتر
• کاهش کدنویسی

آشنایی بیشتر با واژه تراکس در CSS Grid

در معرفی امکانات CSS Grid، واژه‌ای به نام تراکس را بیان کردیم که در این بخش به توضیح بیشتر آن می‌پردازیم. همانطور که گفتیم تراکس در CSS Grid، ستون‌ها و ردیف‌ها را در یک شبکه مشخص می‌کنند. همچنین برای قرار دادن عناصر در تراک‌ها، باید از خصوصیاتی چون grid-column-start، grid-column-end، grid-row-start، و grid-row-end استفاده شود. این خصوصیات‌ باعث می‌شود تا محل قرارگیری دقیق عناصر در تراک‌ها، مشخص گردد.

به عنوان مثال فرض کنید یک شبکه با 3 ستون و 2 ردیف داریم و می‌خواهیم یک عنصر را در ستون دوم و ردیف اول قرار دهیم. برای اینکار باید از grid-column-start، grid-column-end، grid-row-start، و grid-row-end استفاده شود مانند قطعه کد زیر:

item {
  grid-column-start: 2; /* شروع عنصر از ستون دوم */
  grid-column-end: 3;   /* پایان عنصر در ستون سوم */
  grid-row-start: 1;    /* شروع عنصر از ردیف اول */
  grid-row-end: 2;      /* پایان عنصر در ردیف دوم */
}

در این مثال کلاس .item در ستون دوم و ردیف اول شبکه قرار داده شده که شما می‌توانید با استفاده از این خصوصیت‌ها، محل دقیق عناصر در شبکه با استفاده از شماره ستون و ردیف را تعیین کنید. همچنین می‌توانید از مقادیر span برای تعیین اندازه عناصر استفاده کنید. به عنوان مثال:

item {
  grid-column-start: 2;       /* شروع عنصر از ستون دوم */
  grid-column-end: span 2;   /* عرض عنصر 2 ستون */
  grid-row-start: 1;         /* شروع عنصر از ردیف اول */
  grid-row-end: span 1;      /* ارتفاع عنصر 1 ردیف */
}

در این مثال، کلاس .item در ستون دوم شروع می‌شود که در آن ردیف به ارتفاع 1 و ستون به عرض 2، گسترده می‌شود.

یک مثال درخصوص CSS Grid

فرض کنید می‌خواهیم یک مربع شبکه‌ای با 3 ستون و 2 ردیف ایجاد کنیم و در آن مربع 6 مربع کوچک قرار دهیم. قطعه کدی که باید در بخش HTML نوشته شود به شرح زیر است:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>CSS Grid Example</title>
</head>
<body>
  <div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

حال در بخش CSS می‌نویسیم:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* 3 ستون با عرض 100 پیکسل */
  grid-template-rows: repeat(2, 100px); /* 2 ردیف با ارتفاع 100 پیکسل */
  gap: 10px; /* فاصله بین المان‌ها */
}
.item {
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

توضیحات مثال:

1. در این مثال یک شبکه با کلاس .grid-container ایجاد کردیم که دارای 3 ستون و 2 ردیف است.
2. المان‌های داخل شبکه، با کلاس .item قرار دارند که در این مثال عدد 1 تا 6 را نمایش می‌دهند.
3. خصوصیت ;display: grid به شبکه اعمال می‌شود.
4. خصوصیت grid-template-columns و grid-template-rows به ترتیب ستون‌ها و ردیف‌ها را تعیین می‌کند که با استفاده از repeat(3, 100px)، 3 ستون با عرض 100 پیکسل ایجاد می‌کنیم و با repeat(2, 100px)، 2 ردیف با ارتفاع 100 پیکسل ایجاد کرده‌ایم.
5. حال از خصوصیت gap برای تعیین فاصله بین المان‌ها استفاده می‌کنیم.
6. در این مثال المان‌ها را با زمینه رنگی آبی و متن سفید مشخص کرده ایم که در نهایت ستون‌ها و ردیف‌های شبکه، به صورت خودکار ترتیب المان‌ها را تنظیم می‌کنند.

اگر این کد را در مرورگر خود اجرا کنید، یک شبکه با 6 مربع کوچک مشاهده خواهید کرد که المان‌ها به صورت اتوماتیک در ستون‌ها و ردیف‌ها قرار می‌گیرند و شبکه را به صورت خودکار محاسبه می‌کند.

در نهایت....

اکنون شما می‌دانید که css grid چیست و به چه دلیل از آن استفاده می‌شود. در حقیقت طراحان وب با این تکنولوژی می‌توانند صفحات خود را به بخش‌های مختلف تقسیم کنند، به‌طوری که این بخش‌ها با یکدیگر هیچ تداخل نداشته باشند. پس اگر به دنبال یک آموزش عالی در خصوص طراحی وب هستید، آموزش html css درسمن را از دست ندهید. البته اگر هم قصد تبدیل شدن به یک فرانت‌-اند را در سر دارید، می‌توانید از دوره استادی فرانت-اند ما استفاده کنید که برای اطلاع از مشخصات بیشتر، با کارشناسان ما ارتباط برقرار کنید.

سوالات متداول برای css grid:

بخشی از سوالات متداولی که در ذهن کاربران از css grid ایجاد می‌شود به شرح زیر است:

تفاوت بین css grid با بوت استرپ چیست؟

CSS Grid و Bootstrap دو تکنولوژی مختلف برای طراحی و توسعه وب‌سایت‌ها هستند که از مهم‌ترین تفاوت‌های اصلی بین این دو، میتوان به موارد زیر اشاره کرد:

• CSS Grid یک تکنولوژی اصلی و استاندارد CSS است که به طراحان وب امکان می‌دهد تا ساختارهای شبکه‌ای (grid-based) را به صورت مستقیم با استفاده از CSS تعریف کنند. این تکنولوژی به صورت معمول توسط مرورگرها پشتیبانی می‌شود در صورتی که Bootstrap یک فریمورک CSS و JavaScript است که به توسعه‌دهندگان وب، ابزارها و کامپوننت‌های طراحی آماده را در اختیار قرار می‌دهد تا وب‌سایت‌ها و برنامه‌های وب سریع‌تر و به سبک مشخص، طراحی شود. 
•   CSS Grid به شما ابزارهایی برای تعریف ساختارهای شبکه‌ای و قرار دادن المان‌ها درون آن‌ را می‌دهد تا انعطاف بیشتری برای طراحی دقیق‌تر صفحات وب داشته باشید اما نیاز به نوشتن کدهای CSS است. در صورتی‌که Bootstrap یک فریمورک طراحی است که کامپوننت‌ها و کلاس‌های CSS آماده‌ای برای استفاده در وب‌سایت‌ها فراهم می‌کند.
• برای استفاده از CSS Grid ممکن است نیاز به نوشتن کد CSS داشته باشید اما به طراحان این امکان را می‌دهد که ساختارهای دقیق و پیچیده‌تری ایجاد کنند. در صورتی‌که Bootstrap با کلاس‌ها و کامپوننت‌های آماده‌ خود، این اختیار را به توسعه‌دهندگان می‌دهد تا بخش زیادی از کارها در طراحی وب‌سایت‌ها و برنامه‌های وب را آزادانه انجام دهد که این موضوع، ایجاد وب‌سایت‌های پیچیده را سریع‌تر می‌کند.
•  CSS Grid، توانایی پیشرفته‌تری برای طراحی و انعطاف‌پذیری دارد و به طراحان کمک می‌کند تا به تنظیمات دقیقتری دسترسی داشته باشند اما Bootstrap، یکسری قوانین و کامپوننت‌های طراحی آماده است که در تنظیمات خاصی، محدودیت‌ دارد.

تفاوت CSS grid با flexbox چیست؟

CSS Grid و Flexbox، دو تکنیک مختلف برای مدیریت چیدمان المان‌های وب در CSS هستند که هر کدام دارای مزایا و کاربردهای خاص خود هستند اما تفاوت‌های اصلی بین این دو تکنیک به شرح زیر است:

• CSS Grid یک مدل چیدمان دوبعدی (grid-based layout) است که باعث می‌شود المان‌ها در یک شبکه با تعدادی ستون‌ و ردیف‌ قرار گیرد که برای ایجاد ساختارهای شبکه‌ای منظم و پیچیده طراحی شده است اما Flexbox یک مدل چیدمان یک بعدی (one-dimensional layout) است که باعث می‌شود المان‌ها در یک خط یا ستون قرار گیرد که این تکنیک بیشتر برای مدیریت چیدمان عناصر در یک خط استفاده می‌شود.
•  CSS Grid، ستون‌ها و ردیف‌ها را به طور مستقیم تعیین کنید و شما می‌توانید تعداد، عرض و ارتفاع هر ستون و ردیف را با دقت کنترل کنید اما Flexbox، اجازه تعیین چیدمان المان‌ها در یک بعد را می‌دهد.
• CSS Grid برای ایجاد ساختارهای af;id چون تقسیم‌بندی صفحات وب، جداول و لیست‌ها بسیار مناسب است. همچنین می‌تواند برای چیدمان عناصر در داخل بخش‌ها و کادرهای بزرگتر نیز استفاده شود اما از Flexbox به طور خاص، برای چیدمان عناصر در یک خط یا ستون استفاده می‌شود که از آن بیشتر در طراحی منوها، بخش‌های کناری (sidebar) و ساختارهای خطی به کار می‌رود.
•  CSS Grid، ایجاد چیدمان‌های پیچیده‌تر با المان‌هایی که به یکدیگر وابسته‌اند را می‌دهد اما Flexbox به صورت خاص، برای چیدمان المان‌ها در یک خط یا ستون طراحی شده است.