آموزش صفحه آرایی با گرید (Grid)

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

ما همیشه صفحه آرایی را بواسطه عناصر و ویژگی هایی که هدف آنها بوجود آوردن صفحه آرایی نبوده است انجام می دادیم. اول از همه عناصر جدول در HTML و بعد از آن ویژگی float بودند که صفحه آرایی را از طریق آنها انجام می دادیم اما این روش ها همه یک نوع هک به حساب می آمدند چرا که هدف این عناصر و ویژگی ها کار دیگری بود.

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

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

گرید ابزاری برای چیدمان است که بر روی یک عنصر اعمال شده و سپس جایگیری، اندازه و ترازبندی فرزندان عنصر را مدیریت می کند.

گرید توانایی های جدیدی برای ما دارد که از مهمترین آنها می توان به مدیریت صفحه آرایی در دو بعد افقی و عمودی به صورت همزمان اشاره کرد.

جدول مطالب

• مفاهیم و اصطلاحات
• تعیین ساختار گرید
• تعیین مکان آیتم های گرید
• ترازبندی آیتم ها در گرید
• ترتیب آیتم ها در گرید
• مثال ها
• پشتیبانی مرورگرها
• گرید یا فلکس باکس؟
• ابزار Grid Inspector
• باغچه گرید
• ابزار تولید گرید

مفاهیم و اصطلاحات

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

Grid Container

همه چیز با یک عنصر نگهدارنده گرید آغاز می شود. این عنصر شامل عناصر گرید است یا به بیان دیگر پدر عناصر یا آیتم های گرید می باشد. البته این افتخار زمانی نصیب عنصری می شود که مقدار ویژگی display آن برابر با grid یا مقادیری دیگر که به شرح زیر هستند باشد:

.grid-container {
  display: grid;        /* ساخت گرید با نگهدارنده ای از نوع بلاک */
  display: inline-grid; /* ساخت گرید با نگهدارنده ای از نوع خطی */
  display: subgrid;     /* برای آیتم های گرید که خود نیز نگهدارنده گرید هستند استفاده می شود */
}

که البته HTML ما بصورت زیر است:

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <!-- ... -->
</div>

در تصویر زیر نگهدارنده گرید مشخص شده است:

Grid Item

به فرزندان مستقیم عنصر نگهدارنده گرید آیتم های گرید گفته می شود. یعنی عناصری با کلاس grid-item در مثال بالا که همانطور که مشاهده می کنید فرزند مستقیم به حساب می آیند و نوه یا نتیجه نیستند.

نکته هایی که باید در مورد آیتم های گرید در نظر بگیرید این است که به محض اینکه سیستم گرید شکل می گیرد:

• ویژگی های float و clear روی این عناصر اعمال نمی شوند.
• و ویژگی vertical-align نیز تاثیری بر روی آیتم های گرید نخواهد گذاشت.

Grid Line

خطوط گرید خطوطی هستند که گرید را تقسیم بندی می کنند و این خطوط هم در راستای افقی وجود دارند و هم در راستای عمودی و از آنها برای تعیین مکان آیتم های گرید استفاده می شود. همچنین می توان از طریق نام و یا شماره به این خطوط اشاره کرد.

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

 

 

Grid Column, Grid Row, Grid Track

به فضای بین دو خط عمودی کنار هم ستون گرید و به فضای بین دو خط افقی کنار هم ردیف گرید گفته می شود.

تِرَک گرید یک نام عمومی برای ستون و ردیف گرید می باشد. پس می توان گفت به فضای بین هر دو خط همسایه هم در ماژول گرید، تِرَک گرید گفته می شود.

 

 

Grid Cell

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

 

 

Grid Area

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

 

 

Grid Gap

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

خب برای جمع بندی تا اینجای کار در تصویر زیر مفاهیم گفته آورده شده اند:

 

 

The Grid

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

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

تعیین ساختار گرید

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

display

همه چیز با اعمال ویژگی display بر روی نگهدارنده شروع می شود. این ویژگی برای گرید می تواند مقادیر زیر را داشته باشد.

.grid-container {
  display: grid | inline-grid | subgrid;
}

• grid: ساخت یک گرید از نوع بلاک
• inline-grid: اگر نیاز دارید تا مثلا چند سیستم گرید کنار هم بصورت خطی داشته باشید این گزینه جواب شما خواهد بود
• subgrid: اگر نگهدارنده گرید شما خودش یک آیتم گرید است یعنی گرید تو در تو دارید می توانید از این گزینه استفاده کنید اما با این آگاهی که این گزینه باعث می شود تا برای اندازه ستون ها و ردیف ها همان مقادیری که برای پدر این عنصر ثبت شده برای گرید داخلی نیز تعیین می شود

توجه داشته باشیم که گرید فقط بر روی فرزندان مستقیم نگهدارنده تاثیر دارد و نه فرزندان فرزندانش. در مثال زیر با اعمال display از نوع grid به عنصر body فرزندان مستقیم آن را (header, footer, aside و main) بصورت یک گرید چیده ایم. اما دیگر فرزندان داخل عنصر main تحت کنترل این گرید نیستند.

 

 

grid-template-columns و grid-template-rows

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

سینتکس این دو ویژگی بصورت است:

.grid-container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

• <track-size>: می توان یک طول، درصد و یا یک تکه از فضا اضافه در گرید باشد که با واحد fr مشخص می شود.
• <line-name>: یک نام دلخواه

مثال: وقتی بین مقادیر یک فاصله خالی قرار می دهیم بصورت پیشفرض نام خطوط به مقادیر عددی تبدیل می شوند.

.grid-container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

همانطور که مشاهده می کنیم پنج مقدار برای ستون ها داریم این یعنی 5 ستون در گرید خواهیم داشت. همچنین سه مقدار برای ردیف ها تعیین شده است که نشان دهنده سه ردیف می باشد:

 

 

ولی می توان با استفاده از براکت برای خطوط نام دلخواه تعیین کرد:

.grid-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];
}

 

 

(در نیمه دوم این مطلب نشان خواهیم داد که نام گذاری و یا شماره خطوط چه کاربردی دارند)

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

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

معرفی واحد fr

fr اول کلمه fraction به معنی تکه یا بخش است که این واحد جالب قدرت گرید را چند برابر می کند. با استفاده از آن می توان فضای خالی گرید را بصورت های مختلف تقسیم بندی کرد و به راحتی فضای گرید را بصورت انعطاف پذیر مدیریت کرد.

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

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

حال اگر میخواستیم که یک گرید با چهار ستون داشته باشیم طوری که ستون آخر دو تکه و بقیه ستون ها یک تکه سهم داشته باشند خواهیم داشت:

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

همچنین مثال زیر را داریم:

.grid-container {
  display: grid;
  width: 750px;
  grid-template-columns: 150px 1fr 2fr;
}

 

 

در این مثال عرض نگهدارنده برابر با 750 بود و ستون اول 150 واحد از این عرض را به خود اختصاص داد. پس فضای خالی باقی مانده 600 پیکسل است که از این مقدار دو تکه به ستون سوم و یک تکه ستون دوم می رسد. پس یعنی سه تکه خواهیم داشت که اندازه هر تکه 200 پیکسل است که این یعنی عرض نهایی ستون دوم برابر با 200 و عرض نهایی ستون سوم برابر با 400 پیکسل خواهد بود.

مقدار min-content

در اندازه دهی ترک ها می توان از کلمه کلیدی min-content نیز استفاده کرد که باعث می شود تا اندازه ترک برابر با کوچک ترین مقداری باشد که باعث سرریز یا overflow سلول نمی شود.

مقدار max-content

همچنین می توانیم از کلمه کلیدی max-content استفاده کنیم که باعث می شود تا اندازه ترک برابر با کوچکترین مقداری باشد که محتوای داخل سلول به خوبی فیت و متناسب آن باشد.

مقدار auto

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

در مثال زیر از این سه مقدار استفاده شده است:

.grid-container {
  display: grid;
  grid-template-columns: min-content max-content auto;
}

 

 

معرفی تابع minmax

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

فرض کنید می خواهیم گریدی داشته باشیم که از سه ستون اندازه هم تشکیل شده است و می خواهیم اندازه سه ردیف را طوری تعیین کنیم که ارتفاع آنها حداقل برابر با 100 پیکسل و ارتفاع حداکثر برای آنها آزاد باشد یعنی هر آنچه که محتوای درونشان است ارتفاع بگیرند. برای این کار به راحتی می توانیم از تابع minmax استفاده کنیم:

.grid-container {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(100px, auto) minmax(100px, auto) minmax(100px, auto);
}

همانطور که در تصویر زیر مشاهده می کنید فقط ردیف دوم به علت وجود محتوا ارتفاعش بیشتر از حداقل ارتفاعِ تعیین شده است:

 

 

معرفی تابع repeat

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

مثلا فرض کنید داشته باشیم:

.grid-container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

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

.grid-container {
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

و یا در یکی از مثال های قبلی می توانستیم بصورت زیر عمل کنیم:

.grid-container {
  grid-template-columns: repeat(3, 1fr);
}

معرفی auto-fill و auto-fit

می توانیم بجای اینکه درون تابع repeat تعیین کنیم چند تکرار می خواهیم از کلمه کلیدی auto-fill و auto-fit استفاده کنیم.

auto-fill: باعث تولید خودکار ترک ها به تعدادی که از گرید سرریز نکنند می شود.
auto-fit: مشابه auto-fill عمل می کند با این تفاوت که اندازه ترک های تکراری خالی را صفر در نظر می گیرد.

فرض کنید می خواهیم گریدی داشته باشیم که در آن ستون ها حداقل اندازه 40 پیکسل داشته باشند و حداکثر اندازه 1fr که این کار را توسط تابع minmax انجام می دهیم و تعداد ستون ها را به عهده این دو کلمه کلیدی می گذاریم.

.grid-container {
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
}

اتفاقی که می افتد این است که در هر ردیف تا جایی که ستون هایی با عرض 40 پیکسل درون نگهدارنده جا شوند کنار هم چیده می شوند و اگر نگهدارنده پر شود و هنوز هم آیتم گرید در HTML وجود داشته باشد بقیه در ردیف دوم چیده می شوند.

حال اگر تعداد آیتم ها در HTML طوری باشد که نگهدارنده همچنان فضای خالی داشته باشد چه اتفاقی می افتد؟

تفاوت auto-fill و auto-fit

همانطور که در تصویر متحرک زیر پیداست چون ما فقط 15 آیتم درون HTML داریم که هر کدام حداقل 40 پیسکل فضا نیاز دارند زمانی که از کلمه کلیدی auto-fill استفاده می کنیم دست به فضای باقی مانده نمی زند و در واقع ادامه فضا را هم بصورت فرضی ستون های 40 پیکسلی می چیند و چون آیتم HTMLی وجود ندارد چیزی آنجا قابل مشاهده نیست.

اما اگر از کلمه کلیدی auto-fit استفاده کنیم می دانیم که این کلمه کلیدی عرض ستون های خالی را برابر با صفر در نظر می گیرد پس در نتیجه فضای خالی باقی مانده را بین 15 عنصر با توجه به مقدار ماکزیمم در تابع minmax توزیع می کند.

 

 

ویژگی grid-template-areas

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

مثلا به عنصر header، footer و بقیه عناصر اصلی HTML نام مخصوص به خود را بدهیم و سپس با استفاده از نام آنها چیدمان صفحه را انجام دهیم.

جالب است بدانید که این کار از طریق ویژگی grid-template-areas امکان پذیر است. برای درک بهتر موضوع یک مثال را بررسی می کنیم.

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

فرض کنید HTML ما بصورت زیر است:

<body>
  <header>header</header>
  <main>main</main>
  <aside>sidebar</aside>
  <footer>footer</footer>
</body>

در این مثال به ویژگی display عنصر body مقدار grid را می دهیم تا نگهدارنده گرید ما باشد و همچنین می خواهیم در هر ردیف قابلیت وجود چهار ستون را داشته باشیم و ارتفاع ردیف ها را برابر با auto در نظر می گیریم که محتوا سازنده ارتفاع آنها باشد:

body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
}

حال نیاز است تا طریق ویژگی دیگری به نام grid-area آیتم های گرید را نام گذاری کنیم.

body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
}

header {
  grid-area: header;  
}

main {
  grid-area: main;  
}

aside {
  grid-area: aside;  
}

footer {
  grid-area: footer;  
}

اکنون می توانیم از طریق ویژگی grid-template-areas تمپلت چیدمان را طراحی و تعیین کنیم:

body {
  grid-template-areas: "header header header header"
                       "main main . aside"
                       "footer footer footer footer";
}

برای درک بهتر نحوه کار این ویژگی ساختار گریدی که بوجود آوردیم را در نظر بگیرید. می دانیم که هر ردیف ما چهار ستون با عرض های برابر دارد و ما می خواهیم در کل سه ردیف نیز داشته باشیم. حالا از سمت چپ شروع به پر کردن تک تک سلول ها می کنیم. (چون جهت صفحه از سمت چپ به راست است)

در سلول اول و تا آخر ردیف اول می خواهیم header را داشته باشیم.

در ردیف دوم می خواهیم ستون اول و دوم جایگاه عنصر main ما باشد و ستون سوم خالی باشد. (در این ویژگی هر جا نقطه بگذاریم به معنای خالی رها کردن یک سلول است) و سپس ستون چهارم مکان عنصر aside باشد.

و در آخر می خواهیم سر تا سر ردیف سوم را footer بگیرد پس باید برای تک تک سلول ها نام فوتر را بنویسیم.

خروجی ما بصورت زیر خواهد بود:

 

 

 

???? خیلی خفن بود نه؟ خب بیا ادامه بدیم…

 

چند نکته در مورد مقدار دهی grid-template-areas:

ℹ مراقب باشیم که باید تعداد نوشتن نام ها برای همه ردیف ها یکسان باشد. مثلا در اینجا ما در هر ردیف چهار نام داشتیم.

ℹ تکرار نقطه (.) در کنار هم بدون فاصله هیچ فرقی با یک نقطه ندارد. مثلا در اینجا ما می توانستیم جای خالی را با ...... نشان دهیم.

ℹ مقدار پیشفرض این ویژگی none است که به معنی عدم تعریف یک تمپلت می باشد.

ℹ و نکته آخر اینکه وقتی از این روش استفاده می کنیم خطوط بصورت خودکار نام گذاری می شوند. یعنی اگر ناحیه ای را با نام header مشخص کرده ایم خط ستونی و ردیفی اول آن ناحیه برابر با header-start و خط ستونی و ردیفی آخر آن ناحیه برابر با header-end خواهد بود.

با توجه به این موضوع ممکن است یک خط چندین نام داشته باشد. به عنوان نمونه در مثال بالا خط عمودی سمت چپ سه نام متفاوت header-start و main-start و footer-start را دارد.

ویژگی grid-template

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

مقدار none در این ویژگی هر سه ویژگی گفته شده را به مقادیر اولیه آنها ریست می کند.

این مختصر نویسی به دو صورت اتفاق می افتد:

اول اینکه فرض کنید فقط بخواهیم دو ویژگی grid-template-columns و grid-template-rows را بصورت یکجا بنویسیم در این حالت اول مقادیر ویژگی grid-template-rows را نوشته و بعد از اسلش مقادیر ویژگی grid-template-columns را قرار می دهیم:

grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: minmax(100px, auto) minmax(100px, auto) minmax(100px, auto);

/* برابر است با: */

grid-template: minmax(100px, auto) minmax(100px, auto) minmax(100px, auto) / 1fr 1fr 1fr;

حالت بعدی این است که بخواهیم مقادیر ویژگی grid-template-areas را نیز اضافه کنیم. فرض کنید مثالی شبیه به زیر را داریم:

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

در این مثال سه ردیف داریم که هر ردیف به سه ستون برابر تقسیم شده است. هدر کل فضای ردیف اول را گرفته و قسمت اول ردیف و دوم جایگاه ستون کناری سایت یعنی sidebar است و ادمه ردیف دوم را عنصر main و ادامه ردیف آخر را عنصر footer گرفته است. همانطور که در کد می بینیم ارتفاع ردیف اول 100 پیکسل و ارتفاع ردیف های دیگر هم مشخص شده اند.

حال برای مختصر نویسی کافی است بصورت زیر عمل کنیم:

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

/* برابر است با: */

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

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

حال اگر هم همه را در یک خط قرار دهیم دیگر گیج کننده نخواهد بود و می دانیم قضیه از چه قرار است:

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

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

نکته دیگر اینکه اگر اسلش را ننویسیم و بعد از اسلش را خالی بگذاریم ویژگی grid-template-columns به مقدار none ریست می شود.

و در مثال آخر برای این موضوع نام گذاری خطوط را نیز قرار داده و نحوه مختصر نویسی را نمایش می دهیم:

grid-template-areas: "a a a"
                     "b b b";
grid-template-rows: [header-top] auto [header-bottom main-top] 1fr [main-bottom];
grid-template-columns: auto 1fr auto;

/* برابر است با */

grid-template: [header-top] "a a a" [header-bottom]
               [main-top] "b b b" 1fr [main-bottom] / auto 1fr auto;

ویژگی column-gap و row-gap

با استفاده از این ویژگی ها می توان بین ستون ها و ردیف ها فاصله یا گپ بوجود آورد. که البته این فاصله بین ترک ها و لبه های نگهدارنده بوجود نمی آید.
در ضمن به این گپ ها در دنیای صفحه آرایی Gutter گفته می شود.

مقادیر این ویژگی های می تواند از واحدهای طولی و یا درصد استفاده کند که واحد درصد نمایانگر عرض عنصر نگهدارنده است.

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


 

 

ویژگی gap

از طریق این ویژگی می توان دو ویژگی column-gap و row-gap را بصورت مختصر و یکجا نوشت.

.grid-container {
  column-gap: 10px;
  row-gap: 15px;

  /* برابر است با */

  gap: 15px 10px;
}

همانطور که مشاهده می کنیم باید اول مقدار row-gap و سپس مقدار ویژگی column-gap را تعیین کنیم. اگر مقدار ویژگی column-gap تعیین نشود مقدار آن برابر با مقدار row-gap خواهد بود.

قبلا برای استفاده از گپ در گرید از ویژگی grid-column-gap، grid-gap و grid-row-gap استفاده میشد که بعدا پیشوند grid از این ویژگی‌ها حذف شد ولی فعلا مرورگرها هر دو مورد را برای گرید پشتیبانی می‌کنند.

ویژگی grid-auto-columns و grid-auto-rows

فرض کنید گریدی با دو ستون و دو ردیف داشته باشیم که عرض ستون ها برابر با 150 باشند:

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px;
}

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

در این صورت تکلیف اندازه عرض و ارتفاع آن آیتم چه می شود؟

دو ویژگی grid-auto-columns و grid-auto-rows

مدیریت اندازه این ترک های ضمنی را بر عهده دارند پس ما کافی است بصورت زیر عمل کنیم:

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px;

  grid-auto-columns: 50px 100px; /* کلید */
}

.grid-item {
  grid-column: 8;
}

 

 

البته ما اینجا نشان دادیم که می توانیم به هر صورتی که می خواهیم این ستون های ضمنی را بوجود بیاوریم. در این مثال ما یک الگو دو ستونه را نوشتیم. در غیر این صورت می توانستیم فقط یک الگو تک ستونه ضمنی بنویسیم.

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

به همین صورت نیز می توان برای ردیف ها با استفاده از ویژگی grid-auto-rows استفاده کرد. مثلا در نمونه زیر سه ردیف در نظر گرفته شده است اما امکان دارد عناصر HTML زیاد شده و تعداد ردیف ها بیشتر از سه ردیف شوند در این صورت ما می توانیم یک مقدار مناسب برای ترک های ضمنی که احتمال دارد بوجود بیایند در نظر بگیریم:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-auto-rows: 300px; /* کلید */
}

پس در نتیجه اگر آیتم ها در سه ردیف جا شوند که ارتفاع آنها برابر با 100 پیکسل خواهد بود (اینو میگن اندازه دهی واضح یا صریح یا همون Explicit) ولی اگر عناصر HTML ما طوری باشند که باعث شوند بیشتر از سه ردیف آیتم گرید داشته باشیم آن آیتم های مازاد ارتفاع 300 پیکسل خواهند داشت (این یکی رو میگن اندازه دهی ناواضح یا ضمنی یا همون Implicit)

البته حواسمان باشد که اینها فقط مثال هستند و الا عموما بهتر است ارتفاع auto باشد.

ویژگی grid-auto-flow

بوسیله ویژگی grid-auto-flow می توان مکان آیتم های گریدی که بصوت صریح مشخص نشده اند را بصورت خودکار تعیین کرد.

row: مقدار پیشفرض و اولیه این ویژگی row می باشد که باعث می شود آیتم های گرید به همان حالت عادی خود یعنی ردیفی کنار هم قرار بگیرند.

column: اگر مقدار این ویژگی را برابر با column قرار دهیم عناصر بصورت ستونی چیده شده یعنی ستون به ستون آیتم ها مکان ها را پر می کنند. یعنی مثلا به جای اینکه آیتم دوم سمت راست آیتم اول قرار بگیرد زیر آن قرار می گیرد. و وقتی ستون اول کامل پر می شود ستون دوم شروع به پر شدن می کند.

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

به عنوان مثال تصویر زیر حالت عادی چیدمان آیتم های گرید را بوجود می آورد و بنا به شرایط موجود یک فضای خالی بین آیتم ها بوجود آمده است:

 

 

حال اگر از ویژگی grid-auto-flow با مقدار dense استفاده کنیم خواهیم داشت:

.grid-container {
  grid-auto-flow: dense;
}

 

 

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

تمام مقادیری که این ویژگی می تواند داشته باشد بصورت زیر هستند:

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

ویژگی grid

ویژگی grid از نوع ویژگی های مختصرنویسی می باشد که تمام ویژگی های زیر را در برمی گیرد:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow
• column-gap
• row-gap

اگر مقدار این ویژگی را برابر با none قرار دهیم تمام ویژگی های بالا به مقدار اولیشان ریست می شوند.

به سه روش می توان از ویژگی grid استفاده کرد:

1. فقط مقادیر grid-template را بنویسیم. (برای بررسی سینتکس به خود این ویژگی مراجعه کنید)

2. فقط ردیف ها بصورت صریح مقداردهی می شوند:

<‘grid-template-rows’> / [ auto-flow && dense? ] <‘grid-auto-columns’>?

.grid-container {
  grid: 50px 75px / auto-flow;
}

/* برابر است با */
.grid-container {
  grid-template-rows: 50px 75px;
  grid-template-columns: none; /* در این سینتکس نمی توان این ویژگی را به صورت صریح مقداردهی کرد */
  grid-template-areas: none; /* در این سینتکس نمی توان این ویژگی را به صورت صریح مقداردهی کرد */
  grid-auto-rows: auto; /* در این سینتکس نمی توان این ویژگی را به صورت صریح مقداردهی کرد */
  grid-auto-columns: auto;
  grid-auto-flow: column; /* can only set dense or not */
  column-gap: 0; /* در این سینتکس نمی توان این ویژگی را به صورت صریح مقداردهی کرد */
  row-gap: 0; /* در این سینتکس نمی توان این ویژگی را به صورت صریح مقداردهی کرد */
}

3. فقط ستون ها بصورت صریح مقداردهی می شوند:

[ auto-flow && dense? ] <‘grid-auto-rows’>? / <‘grid-template-columns’>

.grid-container {
  grid: auto-flow dense / 30% 100px;
}

/* برابر است با */
.grid-container {
  grid-template-rows: none; /* در این سینتکس نمی توان این ویژگی را به صورت صریح مقداردهی کرد */
  grid-template-columns: 30% 100px; 
  grid-template-areas: none; /* در این سینتکس نمی توان این ویژگی را به صورت صریح مقداردهی کرد */
  grid-auto-rows: auto; 
  grid-auto-columns: auto; /* در این سینتکس نمی توان این ویژگی را به صورت صریح مقداردهی کرد */
  grid-auto-flow: row dense; /* can only set dense or not */
  column-gap: 0; /* در این سینتکس نمی توان این ویژگی را به صورت صریح مقداردهی کرد */
  row-gap: 0; /* در این سینتکس نمی توان این ویژگی را به صورت صریح مقداردهی کرد */
}

تعیین مکان آیتم های گرید

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

ویژگی grid-column-start، grid-column-end، grid-row-start و grid-row-end

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

• grid-column-start: خط عمودی (ستون) شروع یک آیتم گرید را مشخص می کند.
• grid-column-end: خط ستون یک آیتم گرید را در جایی که آیتم گرید تمام می شود مشخص می کند.
• grid-row-start: خط ردیف شروع یک آیتم گرید را مشخص می کند.
• grid-row-end: خط ردیف پایان یک آیتم گرید را مشخص می کند.

این ویژگی ها می توانند چهار مدل مقدار بگیرند:

قبل از توضیح این چهار مدل باید بدانیم کلمه span در گرید به چه معنا است. با استفاده از این کلمه می توانیم مشخص کنیم که یک آیتم گرید در یک جهت خاص به اندازه N ترک بزرگ شود. (خب حالا پایین رو بخونید متوجه میشید قصه چیه)

• auto: مقدار پیشفرض است که باعث می شود آیتم بصورت خودکار در سیستم گرید جای بگیرد. و span آیتم برابر یک است.
• <line>: می توان از طریق یک شماره خط یا نام خط مکان شروع یا پایان یک آیتم گرید را مشخص کرد.
• span <number>: مشخص می کند تا چند ترک آیتم گرید بزرگ شود.
• span <name>: آیتم تا جایی بزرگ می شود تا به اولین خط با نام مشخص شده برسد

مثال اول:

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

از ویژگی ها و مقادیرشان مشخص است که شروع آیتم مورد نظر از نظر ستونی باید روی خط دوم باشد و لبه پایان آن باید بر روی خطی با نام five باشد. همچنین لبه بالای عنصر باید روی خطی با نام row1-start باشد و لبه پایان عنصر باید روی خط شماره 3 قرار بگیرد:

 

 

مثال دوم:

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

خروجی:

 

 

ℹ اگر ویژگی های grid-column-end/grid-row-end تعیین نشوند آیتم بصورت پیشفرض به اندازه یک span رشد دارد.

ℹ با مکان دهی آیتم ها به این صورت این امکان وجود دارد که آیتم ها روی هم قرار بگیرند و به اصطلاح overlap شوند، که در این صورت باید توجه داشته باشیم که آیتمی که در HTML دیرتر آمده است روی بقیه قرار می گیرد و نکته مهم اینکه می توان این آیتم ها را به وسیله ویژگی z-index نیز کنترل کرد.

ℹ اگر یک نام تکراری به خطوط مختلف داده شده باشد می توان با استفاده از قرار دادن یک شماره قبل از نام خط مشخص کرد که کدام یک از خطوط را با این نام می خواهیم. (مثلا میشه گفت دومین خطی که با این نام اومده) مثال زیر را بررسی کنید:

.a { 
  grid-column-start: 1 bar;
  grid-column-end: 3 foo;
}

.b {
  grid-column-start: 1 bar;
}

.c {
  grid-column-start: -1 foo;
}

خروجی:

 

 

ویژگی grid-column و grid-row

این دو ویژگی مدل مختصر نویسی برای چهار ویژگی بالا می باشند. که هر کدام دو مقدار می گیرند یکی برای start و دیگری برای end و این دو مقدار توسط اسلش / از هم جدا می شوند.

به دو روش می توان این دو ویژگی را مقدار دهی کرد که در زیر نشان آمده اند:

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

مثال:

grid-column: 3 / 4;
grid-row: 1 / 3;

/* یا */

grid-column: 3 / span 2;
grid-row: third-line / 4;

/* یا */

/* ... */

ویژگی grid-area

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

.grid-item2 {
  grid-area: header;
}

که این روش را در بالا مشاهده کردیم.

کاربرد دوم این ویژگی این است که می توان از آن به عنوان یک مدل مختصر نویسی برای چهار ویژگی grid-column-start، grid-column-end، grid-row-start و grid-row-end استفاده کرد و مکان آیتم را تعیین کرد.

به عنوان مثال:

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

خروجی:

 

 

ترازبندی آیتم ها در گرید

در این قسمت از این مطلب به شرح Alignment یا همان ترازبندی آیتم های گرید می پردازیم.

ویژگی های مربوط به این موضوع به قرار زیر هستند که بعضی از آنها به نگهدارنده گرید و برخی دیگر به آیتم های گرید داده می شوند پس مراقب این موضوع باشیم.

• justify-content
• align-content
• justify-items
• align-items
• justify-self
• align-self

قبل از بررسی این ویژگی ها باید موضوعی را در نظر بگیریم.

محور Column و محور Row

موضوع خیلی مهم و خوشحال کننده برای ماژول های صفحه آرایی فلکس باکس و گرید این است که برای تغییر جهت صفحه آرایی کافی است جهت سند را بوسیله ویژگی dir تغییر دهیم. مثلا ما که فارسی زبان هستیم اگر چیدمان سایتی بصورت چپ به راست توسط گرید انجام شده است کافی است تا جهت dir عنصر <html> را به rtl تغییر دهیم تا کل چیدمان بصورت مناسب برای زبان فارسی تغییر کند.

ماژول های صفحه آرایی فلکس باکس و گرید نسبت به جهت صفحه آگاه هستند

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

ویژگی دیگری که بر جهت سیستم گرید تاثیر می گذارد ویژگیwriting-mode است.

جهت خطی در HTML بصورت پیشفرض چپ به راست است یعنی متن ها از سمت چپ به راست در کنار هم چیده می شوند. و جهت بلاک از بالا به پایین است یعنی عناصر بلاک بصورت پیشفرض در جهت بالا به پایین زیر هم قرار می گیرند.

با استفاده از ویژگی writing-mode می توان این رفتار را تغییر داد.

گرید برای توصیف جهت ترازبندی از واژه های column-axis (محور ستونی) و row-axis (محور ردیفی) استفاده می کند. column-axis همان جهت بلاک است و row-axis به جهت خطی اشاره می کند.

این را در نظر داشته باشید که در توضیحات و مثال ها جهت صفحه را چپ به راست و مقدار writing-mode را horizontal-tb در نظر می گیریم (یعنی مقادیر پیشفرض).

با این تفاسیر به سراغ ترازبندی آیتم های گرید می رویم.

ویژگی justify-content

گاهی اوقات مجموع اندازه های آیتم های گرید از اندازه نگهدارنده گرید کوچک تر است در اینجا می توانیم با اعمال ویژگی justify-content به نگهدارنده گرید تمام آیتم ها را در راستای محور row-axis ترازبندی کنیم.

مقادیری که این ویژگی می تواند داشته باشد:

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

center

آیتم های گرید را نسبت به محور row در مرکز قرار می دهد:

.grid-container {
  justify-content: center;
}

start

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

.grid-container {
  justify-content: start;
}

end

آیتم های گرید را با لبه پایانی نگهدارنده گرید در راستای محور row تراز می کند.

.grid-container {
  justify-content: end;
}

space-between

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

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

space-around

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

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

space-evenly

ترک های گرید را طوری در راستای محور row توزیع می کند که هر ترک مجاور فضای اطرافش برابر با دیگر ترک ها می باشد.

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

ویژگی align-content

گاهی مجموع اندازه های آیتم های گرید از اندازه نگهدارنده گرید در راستای محور Column کوچک تر است در اینجا می توانیم با اعمال ویژگی align-content به نگهدارنده گرید تمام آیتم ها را در راستای column-axis ترازبندی کنیم.

مقادیری که این ویژگی می تواند داشته باشد:

.grid-container {
  align-content: center | start | end | space-between | space-around | space-evenly  
}

center

آیتم های گرید را نسبت به محور column در مرکز قرار می دهد:

.grid-container {
  align-content: center;
}

start

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

.grid-container {
  align-content: start;
}

end

آیتم های گرید را با لبه پایانی نگهدارنده گرید در راستای محور column تراز می کند.

.grid-container {
  align-content: end;
}

space-between

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

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

space-around

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

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

space-evenly

ترک های گرید را طوری در راستای محور column توزیع می کند که هر ترک مجاور فضای اطرافش برابر با دیگر ترک ها می باشد.

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

ویژگی justify-items

با استفاده از ویژگی justify-items می توان محتوای داخل آیتم های گرید را در راستای محور Row ترازبندی کرد.

مقادیری که این ویژگی می پذیرد:

.grid-container {
  justify-items: center | start | end | stretch
}

توجه داشته باشید که این ویژگی نیز به نگهدارنده گرید داده می شود.

center

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

.grid-container {
  justify-items: center;
}

start

محتوای آیتم های گرید را در راستای محور Row به لبه شروع آیتم می چسباند.

.grid-container {
  justify-items: start;
}

end

محتوای آیتم های گرید را در راستای محور Row به لبه پایان آیتم می چسباند.

.grid-container {
  justify-items: end;
}

stretch

stretch مقدار پیشفرض و اولیه این ویژگی می باشد و باعث می شود تا محتوای آیتم های گرید در راستای محور Row تمام سطح آیتم را بپوشانند.

.grid-container {
  justify-items: stretch;
}

ویژگی align-items

با استفاده از ویژگی align-items می توان محتوای داخل آیتم های گرید را در راستای محور Column ترازبندی کرد.

مقادیری که این ویژگی می پذیرد:

.grid-container {
  align-items: center | start | end | stretch
}

توجه داشته باشید که این ویژگی نیز به نگهدارنده گرید داده می شود.

center

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

.grid-container {
  align-items: center;
}

start

محتوای آیتم های گرید را در راستای محور Column به لبه شروع آیتم می چسباند.

.grid-container {
  align-items: start;
}

end

محتوای آیتم های گرید را در راستای محور Column به لبه پایان آیتم می چسباند.

.grid-container {
  align-items: end;
}

stretch

stretch مقدار پیشفرض و اولیه این ویژگی می باشد و باعث می شود تا محتوای آیتم های گرید در راستای محور Column تمام سطح آیتم را بپوشانند.

.grid-container {
  align-items: stretch;
}

ویژگی justify-self

با استفاده از ویژگی justify-self می توان محتوای داخل یک آیتم گرید را در راستای محور Row ترازبندی کرد.

مقادیری که این ویژگی می پذیرد:

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

توجه داشته باشید که این ویژگی به آیتم گرید داده می شود.

center

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

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

start

محتوای آیتم گرید را در راستای محور Row به لبه شروع آیتم می چسباند.

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

end

محتوای آیتم گرید را در راستای محور Row به لبه پایان آیتم می چسباند.

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

stretch

stretch مقدار پیشفرض و اولیه این ویژگی می باشد و باعث می شود تا محتوای آیتم گرید در راستای محور Row تمام سطح آیتم را بپوشاند.

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

ویژگی align-self

با استفاده از ویژگی align-self می توان محتوای داخل یک آیتم گرید را در راستای محور Column ترازبندی کرد.

مقادیری که این ویژگی می پذیرد:

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

توجه داشته باشید که این ویژگی به آیتم گرید داده می شود.

center

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

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

start

محتوای آیتم گرید را در راستای محور Column به لبه شروع آیتم می چسباند.

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

end

محتوای آیتم گرید را در راستای محور Column به لبه پایان آیتم می چسباند.

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

stretch

stretch مقدار پیشفرض و اولیه این ویژگی می باشد و باعث می شود تا محتوای آیتم گرید در راستای محور Column تمام سطح آیتم را بپوشاند.

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

ترتیب آیتم های گرید

اگر با فلکس باکس آشنا هستید می دانید که می توان ترتیب عناصر را از نظر بصری تغییر دارد. این کار را در بین آیتم های گرید نیز می توان انجام داد.
کافی است به آیتم های گرید ویژگی order را با مقدار مناسب ارزش دهی کنیم:

.grid-item {
  order: 2;
}

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

مثال ها

فرض کنید می خواهیم چیدمان زیر که معروف به Holy Grail هست را بوسیله گرید طراحی کنیم.

 

 

همچنین برای واکنشگرا بودن این چیدمان نیاز داریم که مراقب صفحات نمایش کوچک تر نیز باشیم:

 

 

HTML مورد نیاز به شرح زیر است:

<div class="container">
  <header>...</header>
  <article>...</article>
  <nav>...</nav>
  <aside>...</aside>
  <footer>...</footer>
</div>

از روی تصویر مشخص است که ما یک گرید با سه ستون و پنج ردیف می خواهیم که ستون اول و آخر اندازه ثابت 8em و ردیف اول و آخر اندازه ثابت 3em را دارند. بقیه سلول ها نیز اندازه آزاد دارند.

.container {
  display: grid;
  grid-template-columns: 8em auto 8em;
  grid-template-rows: 3em auto auto auto 3em;
}

حال که ساختار گرید آماده است نیاز داریم تا آیتم های گرید را درون آن جای دهیم که برای این کار از ویژگی های grid-row و grid-column استفاده می کنیم:

header {
  grid-column: 1 / 4;
}

nav {
  grid-row: 2 / 5;
  grid-column: 1;
}

aside { 
  grid-row: 2 / 5;
  grid-column: 3;
}

article {
  grid-row: 2 / 5;
  grid-column: 2;
}

footer {
  grid-column: 1 / 4;
  grid-row: 5;
}

به همین صورت باید این کار را برای صفحه نمایش های مختلف انجام دهیم تا طرح ما واکنشگرا باشد. که کد این موضوع را می توانید در مثال زیر مشاهده کنید.

 

See the Pen Holy Grail with CSS Grid by Mojtaba Seyedi (@seyedi) on CodePen.

 

با گرید و فلکس باکس طراحی صفحات دو جهته مثل آب خوردن میشه میگی نه؟؟ direction تگ html رو توی کد بالا عوض کن :)

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

.container {
  display: grid;
  grid-template-areas: "header"
                       "article"                       
                       "sidebar"
                       "nav"    
                       "footer";
}

header {
  grid-area: header;
}

nav {
  grid-area: nav;
}

article {
  grid-area: article;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}

@media screen and (min-width: 30em) {
  .container {
    grid-template-columns: 8em auto 8em;
    grid-template-areas:  "header header header"
                          "nav article article"
                          "sidebar article article"
                          "footer footer footer";
  }
}

@media screen and (min-width: 40em) {
  .container {
    grid-template-areas: "header header header"
                        "nav article sidebar"
                       "footer footer footer";
  }
}

این کد هنوز هم قابل تغییر است و این قضیه نشان می دهد که اولا هیچ روش ثابتی برای انجام یک کار نیست و دوما گرید آنقدر قدرتمند است که برای انجام یک کار روش های متفاوتی را پیش روی ما می گذارد.

پشتیبانی مرورگر ها

اولین مرورگری که شروع به پیاده سازی گرید کرد IE10 بود و سپس این کار در IE11 نیز ادامه پیدا کرد. و چون در آن زمان استاندارهای گرید با نسخه فعلی آن متفاوت بودند در نتیجه برخی از ویژگی هایی که در این مطلب معرفی کردیم در این دو مرورگر پشتیبانی نمی شوند همچنین سینتکس برخی از ویژگی ها نیز متفاوت می باشد و نیاز به پیشوند نیز برای بعضی ویژگی ها وجود دارد که در این دو مورد آخر Autoprefixer می تواند به ما کمک کند.

گرید یا فلکس باکس؟

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

نکته ای که باید در نظر بگیریم این است که این دو روش در مقابل هم نیستند و می توان از هر دوی آنها در کنار هم در یک پروژه استفاده کرد و از نقاط قوت هر کدام بهره برد.

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

برای چیدمان اصلی صفحه گرید بهتر عمل می کند و برای ساخت جزییات و ترازبندی فلکس باکس بهتر عمل می کند.

هیچ دلیلی وجود ندارد که فقط از یکی از این ماژول ها استفاده کنید هر دو را یاد بگیرید و از قدرت هر دو در کنار هم لذت ببرید.

ابزار Grid Inspector

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

در این ویدیو این ابزار بطور کامل معرفی شده است.

 

 

باغچه گرید

 

 

توماس پارک همان شخصی که flexbox froggy را طراحی کرد بازی باغچه گرید را برای یادگیری این ماژول طراحی کرده است که می توانید برای دسترسی به آن به لینک زیر مراجعه کنید:

ابزار تولید گرید

با استفاده از ابزارهای زیر میتوانید یک چیدمان گرید را بصورت دلخواه تولید کنید که خود این موضوع به یادگیری کمک می کند:

بیشتر بخوانید

• CSS Grid Layout on MDN
• Grid by Example
• Introduction To Css Grid Layout
• CSS Grid: illustrated introduction
• Learn Box Alignment