جشنواره نوروزی سون لرن

آموزش جامع CSS Grid - بخش اول

دسته بندی: گرافیک
زمان مطالعه: 9 دقیقه
۰۱ فروردین ۱۳۹۹

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

فهرست محتوای این مقاله

Grid چیست؟

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

Grid Line

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

Grid Column

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

Grid Row

در طراحی به نمایش ردیفی المان‌ها، Row گفته می‌شود. مانند ستون، ردیف هم طبق مفهوم Grid Line می‌تواند تعریف شود و به فواصل بین خطوط افقی تعبیر می‌شود.

Grid Track

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

Grid Cell و Grid Area

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

در شکل زیر مفاهیم Grid Row ،Grid Column ،Grid Track ،Grid line ،Grid Cell و Grid Area نشان داده شده است:

css grid tutorial1

Grid Gap

معمولا هنگامی که می‌خواهیم یک صفحه وب را طراحی کنیم، نیاز داریم تا المان‌ها کنار هم بچینیم و میانشان کمی فاصله نیز درنظر بگیریم. هدف Grid Gap همین است؛ با استفاده از Grid Gap می‌توان فواصل خالی نسبت به Grid Line را تعریف کرد.

grid gap line

grid-gap نیز همانند Grid Track یک مفهوم عمومی است و هم برای ردیف و هم برای ستون به‌کار می‌رود. در صورتی که بخواهیم به طور خاص بین ردیف‌ها فاصله بگذاریم از grid-row-gap و اگر بخواهیم ستون‌ها را از هم دور کنیم از grid-column-gap استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-column-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>


</body>
</html>

خروجی:

grid-column-gap

همان‌طور که می‌بینیم ستون‌ها از هم به اندازه‌ی 50px فاصله گرفتند. حال اگر بخواهیم بین ردیف‌ها فاصله بیفتد در کد بالا به‌جای grid-column-gap از  grid-row-gap استفاده می‌کنیم:

.grid-container {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

خروجی:

grid-row-gap

حال می‌خواهیم این فاصله بین ردیف‌ها و ستون‌ها یکسان و به اندازه‌ی 50px باشد. به‌طور یکجا فواصل ستونی و ردیفی را با grid-gap مقداردهی می‌کنیم:

.grid-container {
  display: grid;
  grid-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

خروجی:

grid-gap

Grid Container

همان‌طور که در مثال‌های قبل دیدیم، در طراحی صفحه با CSS Grid، المان‌ها در یک Grid مادر با نام Container قرار می‌گیرند:

.grid-container { 
display: grid; 
grid-column-gap: 50px; 
grid-template-columns: auto auto auto; 
background-color: #2196F3; 
padding: 10px; 
}
<div class="grid-container"> 
<div class="grid-item">1</div> 
<div class="grid-item">2</div> 
...
<div class="grid-item">3</div>
</div>

باید در این Grid مقدار display را معلوم کنیم که از چه نوعی باشد:

  • Grid: به شکل خانه‌ی دوبعدی یا بلاک: تمامی مثال‌هایی که تا اینجا مرور کردیم از این نوع بود.
  • Inline-grid: به شکل خطی
  • Subgrid: به شکل Grid هایی که خود متشکل از Grid هستند. درواقع به‌صورت Grid‌های تودرتو هست.
.grid-container {
  display: inline-grid;
}

خروجی:

grid display inline

.grid-container {
  display: subgrid;
}

خروجی:

grid display subgrid

Grid Item

به المان‌هایی که بلافاصله و در لایه‌ی اول در این Grid مادر قرار می‌گیرند Grid Item گفته می‌شود. باید توجه داشت که تنظیمات Grid تنها روی Grid Item‌ها اعمال می‌شود و بر فرزندان Grid Item‌ها تاثیری ندارد. از طریق تعریف ویژگی‌ها در داخل آیتم می‌توان این تنظیمات را اعمال کرد.

.item {
  grid-column: 1 / 5;
}

grid container item

Grid Order

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
</style>
</head>
<body>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

</body>
</html>

خروجی:

grid order area

در این کد ما ناحیه‌ی هر آیتم را به صورت زیر مشخص کردیم:

.item { grid-area: start-row-number / start-column-number / end-row-number / end-column-number; }

واضح است که با این روش، اگر به هر دلیلی بعدها قصد تغییر ترتیب یکی از آیتم‌ها را داشته‌ باشیم، ناچاریم نواحی تمامی آیتم‌ها را از اول ویرایش کنیم و به همین دلیل برای مشخص‌کردن ترتیب المان‌ها، راهکار دومی هم وجود دارد. در این راهکار، کافی است در هر آیتم ویژگی order را به صورت زیر مشخص کنیم و نیازی به تعریف نواحی نیست:

.grid-item {
  order: 2;
}

Grid Position

مفاهیم زیر می‌توانند مکان و موقعیت یک Grid Item را مشخص کنند:

  • auto : به‌ عنوان مقدار پیش‌فرض و خودکار استفاده می‌شود.
  • line : با شماره‌ی خط یا نام خط مکان شروع و پایان یک Grid Item را مشخص کرد.
  • number : معلوم می‌کند تا چند Grid Track بزرگ شود.
  • name : تا جایی بزرگ می‌شود که به اولین خط با نام مشخص شده برسد.

برای تعیین مکان یک ناحیه می‌توان مقدار آن را کاهش یا افزایش داد. فرض کنید یک جدول 6 در 6 داریم که از نواحی مساوی تشکیل شده است. می‌توان آیتم اول را به اندازه‌ی دلخواه و با دستور span بزرگ کرد. باید توجه داشت که مقدار پیش‌فرض span برابر یک است.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.item1 {
  grid-column: 1 / span 4;
}
</style>
</head>
<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
</div>

</body>
</html>

خروجی:

grid span

همان‌طور که می‌بینیم آیتم 1 به اندازه‌ی 4 آیتم کشیده شده است. با تغییر کد زیر بر اساس auto، line، number و name می‌توانیم موقعیت آیتم‌های مورد نظر خود را مشخص کنیم. شیوه‌ی نام‌گذاری به این صورت است:

.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

در مورد grid-template-areas در بخش بعدی صحبت خواهیم کرد.

Grid Template

درمورد ردیف‌ و ستون و ناحیه صحبت کردیم. برای اینکه مشخص کنیم چه تعداد آیتم در هر کدام باشد باید از grid-template استفاده کنیم که یک مفهوم عمومی است و هم برای ردیف، هم برای ستون و هم برای ناحیه به‌کار می‌رود. اگر بخواهیم به طور خاص تعداد آیتم‌ها در هر ردیف‌ را معلوم کنیم از grid-template-rows و اگر بخواهیم تعداد در هر ستون‌ را معلوم کنیم از grid-template-columns کمک می‌گیریم. در تمامی مثال‌هایی که تابه اینجا آورده‌ایم از این مفهوم در کدهایمان استفاده کردیم.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 30px;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

</body>
</html>

خروجی:

grid template

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

before:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px 300px;
grid-template-areas: "header header header"
                     "sidebar main main"
                     "sidebar footer footer";

after:
grid-template: "header header header" 100px
               "sidebar main main" 200px 
               "sidebar footer footer" 300px / 1fr 1fr 1fr;

در این کد اول نام نواحی را به صورت ردیفی و سپس ارتفاع آن ردیف را نوشتیم. همین کار را برای ردیف‌های دیگر نیز انجام دادیم و بعد از اتمام ردیف‌ها علامت slash یا "/" را گذاشته و سپس عرض ستون‌ها را معلوم کردیم.

در مورد fr در آموزش بعدی مفصل صحبت خواهیم کرد.

جمع‌بندی

مرورگرهای مختلفی CSS Grid را پشتیبانی می‌کنند و CSS Grid layout قدرتمند‌ترین سیستم لایه بندی در CSS است. لذا در این مطلب به صورت جزئی‌تر وارد CSS Grid شدیم. ابتدا با مفاهیمی مانند ردیف، ستون، ناحیه، خط و دو المان اصلی Grid Container و Grid Item آشنا شدیم و سپس در ادامه مروری بر ویژگی‌های ساختاری Grid مانند ترتیب، موقعیت، فواصل و تعداد داشتیم. در آموزش بعدی در مورد جهت و طراحی واکنش‌گرا در Grid صحبت خواهیم کرد و نکات تکمیلی کدنویسی CSS Grid را مرور می‌کنیم. اگر تجربه یا سوالی در رابطه با این مقاله آموزشی و کار با CSS Grid دارید با ما و کاربران سون لرن به اشتراک بگذارید.

چه امتیازی به این مقاله می دید؟
نویسنده نازنین کریمی مقدم
رویاهاتون رو دنبال کنید ... :)

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :