راهنمای کامل سی‌اس‌اس گرید (CSS Grid)

در این پست سعی می‌کنیم سی‌اس‌اس گرید را معرفی کرده و نگاهی به ویژگی‌های آن داشته باشیم.

سی‌اس‌اس گرید چیست؟

چیدمان سی‌سی‌اس گرید (به طور اختصار; گرید)، یک سیستم چیدمان دوبعدی است که، در مقایسه با تمامی سیستم‌های چیدمان قبلی در طراحی وبسایت‌ها، به طور کامل نحوه طراحی رابط کاربری را دگرگون کرده است.

هر کدام از روش‌هایی که در گذشته (tables, floats, inline-block...) استفاده می‌شد در واقعا نوعی هک بودند کارکرد اصلی آن‌ها برای چیدمان صفحه نبود و به همین دلیل در اکثر مواقع نتیجه دلخواه را در پی نداشت.

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

برای شروع کار با گرید، باید یک المنت(Element) کانتینر(Container) را به صورتdisplay: grid، اندازه سطر(Row) و ستون‌ها(Column) را با grid-template-columns و grid-template-rows و المنت‌های زیر مجموعه را با grid-column و grid-row تعریف کنید.

مشابه Flexbox، ترتیب اصلی آیتم‌های گرید اهمیتی ندارد. کد سی‌اس‌اس شما می‌تواند آن‌ها با هر ترتیبی جای‌گذاری کند که این قابلیت استفاده از گرید به همراه مدیا کوئری(Media Query) بسیار آسان می‌کند.

واژه‌شناسی

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

‌Grid Container

المنتی که بر روی آن display: gridاعمال می‌شود. این المنت، والد مستقیم آیتم‌های گرید است. در این مثال container ، کانتینر گرید است.

<div class=&quotcontainer&quot>
  <div class=&quotitem item-1&quot> </div>
  <div class=&quotitem item-2&quot> </div>
  <div class=&quotitem item-3&quot> </div>
</div>

‌Grid Item

فرزند یا فرزندان گرید کانتینر. در مثال زیر، المنت‌های item، آیتم‌های گرید هستند ولی المنت sub-itemنه.

<div class=&quotcontainer&quot>
  <div class=&quotitem&quot> </div>
  <div class=&quotitem&quot>
    <p class=&quotsub-item&quot> </p>
  </div>
  <div class=&quotitem&quot> </div>
</div>

‌Grid Line

خط‌های جدا کننده‌ای که ساختار گرید را تشکیل می‌دهند. این خط‌ها می‌توانند عمودی(column grid lines) یا افقی(row grid lines) باشند و در هر طرف از سطر یا ستون قرار بگیرند.

‌Grid Cell

فضای بین دو خط افقی (row grid lines) مجاور و دو خط عمودی (column grid lines) مجاور که یک واحد گرید است.

‌Grid Track

فضای بین دو خط گرید مجاور. می‌توان به آن به عنوان یک سطر یا یک ستون گرید نگاه کرد.

‌Grid Area

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

ویژگی‌ها

ویژگی‌های مخصوص کانتینر (Grid Container)

● display

تعریف یک المنت یه عنوان به عنوان کانتینر گرید.

مقادیر:

▪ grid -- block-level grid

▪ inline-grid -- inline-level grid

● grid-template-columns, grid-template-rows

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

مقادیر:

▪ <track-size> -- می‌تواند طول، درصد، یا کسری(با استفاده از واحد fr ) از فضای خالی موجود در گرید باشند.

▪ <line-name> -- نامی دلخواه برای خط گرید(اختیاری)

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

خط‌های گرید به صورت خودکار، اعداد مثبت نام‌گذاری می‌شوند. برای خط آخر از 1- نیز می‌توان استفاده کرد.

هر خط را به طور اختصاصی نیز می‌توان نام‌گذاری کرد.

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

هر خط می‌تواند بیشتر از یک نام داشته باشد.

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

از تابع repeat نیز می‌توان برای تعریف قسمت‌های یکسان استفاده کرد.

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}
/*معادل*/
.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

واحد fr این اجازه را به ما می‌دهد تا اندازه track را به عنوان کسری از فضای خالی موجود در گرید مشخص کنیم.

در مثال زیر مقدار عرض هر آیتم برابر یک سوم کل اندازه گرید تعریف شده است.

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

فضای خالی بعد از مشخص شدن اندازه هر یک از آیتم هایی که اندازه آنها متغیر نیست، محاسبه می‌شود.

‌● grid-template-areas

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

مقادیر:

▪ <grid-area-name> -- نامی که به وسیله ویژگی grid-area مشخص شده است.

‌▪ . -- نقطه نشان دهنده فضای خالی است.

▪ <none> -- هیچ سطح گریدی تعریف نشده است.

.container {
  grid-template-areas: 
    &quot<grid-area-name> | . | none | ...&quot
    &quot...&quot
}

مثال:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    &quotheader header header header&quot
    &quotmain main . sidebar&quot
    &quotfooter footer footer footer&quot
}

مثال بالا یک گرید با 4 ستون و 3 سطر می‌سازد:

هر یک از سطرها باید تعداد سلول‌هایش با دیگر سطرها یکی باشد.

‌‌● grid-template

یک ویژگی خلاصه شده که شامل grid-template-columns ، grid-template-rows و grid-template-areas می‌شود.

مقادیر:

▪ none -- هر سه ویژگی را برابر مقدار پیش‌فرض قرار می‌دهد.

▪ <grid-template-rows> / <grid-template-columns> -- مقادیر grid-template-columns و grid-template-rows را مشخص می‌کند و مقدار grid-template-areas را برابر none قرار می‌دهد

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

مشخص کردن هر سه ویژگی:

.container {
  grid-template:
    [row1-start] &quotheader header header&quot 25px [row1-end]
    [row2-start] &quotfooter footer footer&quot 25px [row2-end]
    / auto 50px auto;
/*معادل*/
.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    &quotheader header header&quot 
    &quotfooter footer footer&quot
}

● column-gap, row-gap, grid-column-gap, grid-row-gap

تعریف اندازه خط‌های گرید. می‌توان از آن به عنوان فاصله بین سلول‌ها استفاده کرد.

مقادیر:

▪ <line-size> -- یک مقدار اندازه‌گیری طولی.

.container {
  /* standard */
  column-gap: <line-size>;
  row-gap: <line-size>;

  /* old */
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

مثال:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  column-gap: 10px;
  row-gap: 15px;
}

‌● gap, grid-gap

خلاصه شده‌ی row-gapو column-gap

مقادیر:

▪ <grid-row-gap> <grid-column-gap>

.container {
  /* standard */
  gap: <grid-row-gap> <grid-column-gap>;

  /* old */
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

مثال:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  gap: 15px 10px;
}

‌● justify-items

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

مقادیر:

▪ start

▪ end

▪ center

▪ stretch

مثال‌ها:

.container {
  justify-items: start;
}

.container {
  justify-items: end;
}

.container {
  justify-items: center;
}

.container {
  justify-items: stretch;
}

این ویژگی را می‌توان به صورت جداگانه روی هر آیتم گرید با استفاده از justify-self اعمال کرد.

‌● align-items

آیتم‌های گرید در راستای محور عمودی تراز می‌کند. بر روی تمام آیتم‌های داخل گرید اعمال می‌شود.

مقادیر:

▪ start

▪ end

▪ center

▪ stretch

▪ baseline -- تراز کردن آیتم‌ها در راستای baseline متن

مثال‌ها:

.container {
  align-items: start;
}

.container {
  align-items: end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

این ویژگی را می‌توان به صورت جداگانه روی هر آیتم گرید با استفاده از align-self اعمال کرد.

‌● place-items

اعمال همزمان align-items و justify-items.

مقادیر:

▪ <align-items> / <justify-items> -- اولین مقدار برای align-items و دومین مقدار برای justify-items است.اگر دومین مقدار مشخص نشود، مقدار اول برای هر دو ویژگی اعمال می‌شود.

.center {
  display: grid;
  place-items: center;
}

‌

● justify-content

در بعضی از مواقع اندازه گرید می‌تواند کوچکتر از اندازه کانتینر آن باشد. به طور مثال در مواقعی که اندازه آیتم‌ها با واحدی انعطاف‌ناپذیر(مانند px) مشخص شده باشد. در این مواقع می‌توان کل گرید در هر یک از راستاها، با کانتینر تراز کرد.

این ویژگی گرید را در راستای افقی تراز می‌کند.

مقادیر:

▪ start

▪ end

▪ center

▪ stretch

▪ space-around -- مقدار ثابتی فاصله بین هر آیتم و نصف آن مقدار در کناره‌ها

▪ space-between -- مقدار ثابتی فاصله بین آیتم‌ها و هیچ فاصله‌ای در کناره‌ها

▪ space-evenly -- مقدار ثابتی فاصله بین آیتم‌ها و همان مقدار در کناره‌ها

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

مثال‌ها:

.container {
  justify-content: start;
}

.container {
  justify-content: end;    
}

.container {
  justify-content: center;    
}

.container {
  justify-content: stretch;    
}

.container {
  justify-content: space-around;    
}

.container {
  justify-content: space-between;    
}

.container {
  justify-content: space-evenly;    
}

● align-content

این ویژگی گرید را در راستای عمودی تراز می‌کند.

مقادیر:

▪ start

▪ end

▪ center

▪ stretch

▪ space-around -- مقدار ثابتی فاصله بین هر آیتم و نصف آن مقدار در کناره‌ها

▪ space-between -- مقدار ثابتی فاصله بین آیتم‌ها و هیچ فاصله‌ای در کناره‌ها

▪ space-evenly -- مقدار ثابتی فاصله بین آیتم‌ها و همان مقدار در کناره‌ها

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

مثال‌ها:

.container {
  align-content: start;    
}

.container {
  align-content: end;    
}

.container {
  align-content: center;    
}

.container {
  align-content: stretch;    
}

.container {
  align-content: space-around;    
}

.container {
  align-content: space-between;    
}

.container {
  align-content: space-evenly;    
}

● place-content

اعمال همزمان justify-content و align-content.

مقادیر:

▪ <align-content> / <justify-content> -- اولین مقدار برای align-content و دومین مقدار برای justify-content است.اگر دومین مقدار مشخص نشود، مقدار اول برای هر دو ویژگی اعمال می‌شود.

● grid-auto-columns, grid-auto-rows

اندازه هر grid track که به صورت اتوماتیک (implicit grid tracks) درست شده است. زمانی ایجاد می‌شود که تعداد آیتم‌های بیشتری نسبت به سلول‌ها، در گرید وجود دارد یا اینکه محل قرارگیری یک آیتم خارج از گرید مشخص شده است.

مقادیر:

▪ <track-size>

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

مثال:

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
}

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

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

ما محل قرارگیری T را بین خط ستون 5 و 6 در نظر گرفتیم ولی خود این خطوط را تعریف نکرده‌ایم. به همین خاطر سطوحی با اندازه صفر تولید شده‌اند تا این فاصله ایجاد شده را جبران کنند. از grid-auto-rows و grid-auto-columns برای تعیین اندازه این سطوح می‌توان استفاده کرد.

.container {
  grid-auto-columns: 60px;
}

● grid-auto-flow

اگر آیتم‌هایی داریم که به صورت صریح محل قرارگیری آنها مشخص نشده، الگوریتم جای‌گذاری خودکار محل قرارگیری این آیتم‌ها را مشخص می‌کند.

مقادیر:

▪ row -- به الگوریتم می‌گوید که به ترتیب هر سطر را پر کند و اگر در صورت نیاز سطر جدید اضافه کند (پیش‌فرض)

▪ row -- به الگوریتم می‌گوید که به ترتیب هر ستون را پر کند و اگر در صورت نیاز ستون جدید اضافه کند

▪ dense -- به الگوریتم می‌گوید که در صورت اضافه‌شدن آیتم، سعی کند فضاهای ابتدایی را پر کند.

 .container {
  grid-auto-flow: row | column | row dense | column dense;
}

مثال:

این کد HTML را در نظر بگیرید:

<section class=&quotcontainer&quot>
  <div class=&quotitem-a&quot>item-a</div>
  <div class=&quotitem-b&quot>item-b</div>
  <div class=&quotitem-c&quot>item-c</div>
  <div class=&quotitem-d&quot>item-d</div>
  <div class=&quotitem-e&quot>item-e</div>
</section>

تعریف یک گرید با پنج ستون و دو سطر و تعیین مقدار row برای grid-auto-flow:

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

زمان مشخص کردن محل قرارگیری آیتم‌ها، فقط محل دو آیتم را مشخص می‌کنیم:

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

به دلیل اینکه مفدار grid-auto-flow را row قرار دادیم، چینش آیتم‌ها به این صورت می‌شود:

اگر به جای مقدار row مقدار columnرا قرار می‌دادیم، چینش آتیم‌ها بدین صورت می‌شد:

● grid

ویژگی خلاصه‌ای برا تنظیم همزمان grid-auto-columns، grid-auto-rows، grid-template-areas، grid-template-columns، grid-template-rows و grid-auto-flow

مثال:

.container {
  grid: 100px 300px / 3fr 1fr;
}
/*↓معادل↑*/
.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

.container {
  grid: auto-flow / 200px 1fr;
}
/*↓معادل↑*/
.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

.container {
  grid: auto-flow dense 100px / 1fr 2fr;
}
/*↓معادل↑*/
.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

.container {
  grid: 100px 300px / auto-flow 200px;
}
/*↓معادل↑*/
.container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

ویژگی‌های مخصوص آیتم‌ها (Grid Items)

● grid-column-start, grid-column-end, grid-row-start, grid-row-end

مشخص کردن محل قرارگیری آیتم در داخل گرید با استفاده از خطوط گرید.

مقادیر:

▪ <line> -- می‌تواند عدد یا اسم باشد.

▪ span <number> -- آیتم تا شماره خط اعلام شده گسترش پیدا می‌کند.

▪ span <name> -- آیتم تا اسم خط اعلام شده گسترش پیدا می‌کند.

▪ auto

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

مثال‌ها:

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

● grid-column, grid-row

خلاصه شده‌ای برای grid-column-end + grid-column-start و grid-row-end + grid-row-start.

مقادیر:

▪ <start-line> / <end-line>

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

مثال:

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

● grid-area

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

مقادیر:

▪ <name>

▪ <row-start> / <column-start> / <row-end> / <column-end>

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

مثال:

.item-d {
  grid-area: 1 / col4-start / last-line / 6;
}

● justify-self

تراز کردن آیتم در راستای محور افقی.

مقادیر:

▪ start

▪ end

▪ center

▪ stretch

.item {
  justify-self: start | end | center | stretch;
}

مثال‌ها:

.item-a {
  justify-self: start;
}

.item-a {
  justify-self: end;
}

.item-a {
  justify-self: center;
}

.item-a {
  justify-self: stretch;
}

● align-self

تراز کردن آیتم در راستای محور عمودی.

مقادیر:

▪ start

▪ end

▪ center

▪ stretch

.item {
  align-self: start | end | center | stretch;
}

مثال‌ها:

.item-a {
  align-self: start;
}

.item-a {
  align-self: end;
}

.item-a {
  align-self: center;
}

.item-a {
  align-self: stretch;
}

● place-self

تعیین همزمان مقادیر align-self و justify-self.

مقادیر:

▪ auto

▪ <align-self> / <justify-self>

مثال‌ها:

.item-a {
  place-self: center;
}

.item-a {
  place-self: center stretch;
}

ترجمه‌ای از مقاله A Complete Guide to Grid