CSS Grid Layout چیست و چه کاربردی در طراحی وب دارد؟

CSS یا Cascading Style Sheets به ما کمک می‌کند ظاهر مورد علاقه خود را برای سایت طراحی کنیم. برای درک اهمیت CSS کافی است که یک سایت را فقط با HTML و بدون CSS مشاهده کنید؛ آن‌وقت متوجه می‌شوید که نبود CSS در صفحات وب به چه شکلی خودش را نشان خواهد داد. در این مقاله با flexbox و CSS grid، دو ابزاری که کمک می‌کنند تا با استفاده از CSS صفحات وب را به آسانی و با سرعت بالا طراحی کنیم، آشنا می‌شوید. تفاوت‌های آن‌ها را با یکدیگر بررسی کرده و در نهایت، یک فرم ورود به سایت و صفحه خدمات را طراحی خواهید کرد.

CSS grid چیست؟

یک ماژول در CSS است که به توسعه‌دهندگان وب کمک می‌کند طرح‌های پیچیده واکنش‌گرا (یا Responsive) را راحت‌تر پیاده‌سازی کنند. grid این امکان را می‌دهد که هنگام طراحی صفحات وب بتوان صفحه را به بخش‌های مختلف تقسیم کرد؛ به‌گونه‌ای که این بخش‌ها با یکدیگر تداخل نداشته باشند.

باید توجه داشت که به جز CSS grid روش‌های دیگری هم برای کنترل بخش‌های مختلف یک صفحه وب وجود دارد مانند: جداول (tables)، مدلهای جعبه‌ای (box model) و CSS flexbox که هرکدام دارای مزایا و معایب مخصوص به خود هستند. البته استفاده از جداول در طراحی منسوخ شده و دیگر استفاده نمی‌شود.

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

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

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

نباید فراموش کرد که هیچ کدام از این دو ماژول بر دیگری برتری ندارد و هر کدام در جای خود مناسب و کاربردی هستند. باید با توجه به نیاز، بهترین و مناسب‌ترین ماژول را انتخاب کرد. همچنین می‌توان به طور همزمان از CSS grid و flexbox استفاده کرد تا کار با قالب بندی و Layout آسان‌تر شود. با استفاده از کتابخانه Grid-Flexbox می‌توان از این قابلیت استفاده کرد و هر قالبی را به سادگی به وجود آورد.

برای مقایسه بهتر ترازبندی در CSS Grid و Flexbox ، می‌توان از سایت Alignment Cheatsheet استفاده کرد. در این سایت این دو با هم مقایسه شده است و تفاوت‌ها و شباهت‌های آن‌ها با تصاویر و مثال‌های متنوع مشخص شده است.

آیا CSS grid جزء استانداردهای وب حساب می‌شود؟

هر چند CSS grid به عنوان یکی از استانداردهای وب شناخته نشده است، اما از اکتبر سال 2017 به بعد مرورگرهای گوگل کروم، فایرفاکس، سافاری، اپرا و Microsoft edge همگی از CSS grid پشتیبانی می‌کنند. W3C مسئولیت تدوین استانداردهای جدید وب را به عهده دارد و این کنسرسیوم استفاده از CSS grid را توصیه کرده است.

برنامه نویسانی وب که دوست دارند قالب آن‌ها حتی در مرورگرهای قدیمی مثل IE هم به خوبی نمایش داده شود، می‌توانند از Modernizr استفاده کنند. Modernizr یک کتابخانه جاوا اسکریپت برای نمایش صحیح HTML5 و CSS3 در مرورگرهای مختلف است.

مزایای استفاده از CSS grid

CSS grid نسبت به ابزارهای قبل از خود مثل float و position در CSS که قبلا به طور گسترده توسط طراحان وب استفاده می‌شد، طرح‌بندی نامتقارن‌تری ارائه می‌کند. همینطور css grid اجازه می‌دهد کدهای استانداردتری نوشته‌ شود که در مرورگرهای مختلف به خوبی کار کنند. این ماژول به جای تمرکز روی راه‌حل‌های پیچیده یا استفاده از ترفندهایی مثل CSS Hacks روی شفافیت طراحی تمرکز دارد.

یکی از مشکلات رایج float این است که با اضافه کردن اِلمان و محتوای جدید به یک بخش از صفحه، ممکن است لایه بندی ما به هم ریخته و کل صفحه خراب شود. این اتفاق به این دلیل رخ می‌دهد که اِلمان‌های صفحه‌ی ما از ارتفاع‌های مختلفی برخوردار هستند و از آنجایی که flexbox از لایه‌های انعطاف پذیر پشتیبانی می‌کند، می‌توان با کمک آن، صفحات پیچیده را به آسانی طراحی کرد. البته مشکلات خاصی هم وجود دارد که در مقالات بعدی آن‌ها را بررسی خواهیم کرد. لذا در بسیاری از مواقع CSS grid منعطف‌تر بوده و استفاده از آن راحت‌تر می‌باشد، همینطور با نوشتن کدهای کمتر می‌توان کار بیشتر انجام داد.

سایر مزایای استفاده از CSS grid عبارتند از:

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

شروع کدنویسی با CSS grid

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

فرم ورود

برای شروع، می‌خواهیم یک فرم ورود (تنها با استفاده از CSS grid) به شکل زیر طراحی کنیم:

در گام اول فواصل فرم از کناره‌های صفحه را تعریف می‌کنیم.

* {
  box-sizing: border-box;
}
body {
  padding-top: 20%;
}
.login,h1{
  width:80%;
  margin: 0 auto;
}

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

h1 {
  background-color: rgba(1, 216, 227, 0.8);
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  padding: 10px;
  font-size: 24px;
  line-height: 1.4;
}

در گام سوم، رنگ و سایر ویژگی‌های بدنه فرم را طراحی می‌کنیم.

.login {
  background-color: rgba(191, 216, 227, .4);
  border: 1px solid rgba(191, 216, 227, .8);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

در گام چهارم، ورودی‌ها را طراحی می‌کنیم. توجه داشته باشید که برای پنهان‌کردن رمزعبور کافی است نوع المان ورودی را از نوع [password] بگذاریم.

.login > div {
  padding: 5px 0;
}
input[type=&quotsubmit&quot] {
  border: 1px solid rgba(191, 216, 227, .8);
  border-radius: 5px;
  color: #fff;
  background-color: rgb(54, 134, 169);
  font-size: 110%;
}
input[type=&quottext&quot],
input[type=&quotpassword&quot] {
  border: 1px solid rgba(191, 216, 227, .8);
  padding: 5px;
  border-radius: 5px;
  font-size: 110%;
  width: 100%;
}

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

.login > div {
  padding: 5px 0;
}
.actions a {
  font-size: 80%;
}

در گام آخر نیز تنظیمات مربوط به Grid را اضافه می‌کنیم:

body {
    display: grid;
    align-content: center;
    justify-content: center;
 }
 .login > div {
  display: grid;
  grid-template-columns: 1fr 2fr;
   align-items: center;
}
.login > div.actions {
  grid-template-columns: 1fr 2fr 1fr;
}

حال به سراغ بخش HTML فرم رفته و موارد مورد نیاز را تعریف می‌کنیم.  المان‌های ما عبارتند از: دو فیلد ورودی که هرکدام دارای یک عنوان برای خود هستند، یک دکمه‌ی ارسال و یک لینک برای فراموشی رمزعبور. همچنین فرم ما دارای یک بخش عنوان و یک بخش بدنه هست که نیازی نیست در فایل HTML به طور جداگانه تعریف شود و با معرفی نوع کلاس به فرم، تنظیمات کدشده خود فراخوانی می‌شوند. لذا داریم:

<body>
<h1>Login Form</h1>
<form class=&quotlogin&quot action=&quot&quot method=&quotpost&quot> 
    <div><label for=&quotusername&quot>Username</label>
      <input type=&quottext&quot name=&quotusername&quot id=&quotusername&quot></div>
    <div><label for=&quotpassword&quot>Password</label>
      <input type=&quotpassword&quot name=&quotpassword&quot id=&quotpassword&quot></div>
    <div class=&quotactions&quot>
      <input type=&quotsubmit&quot name=&quotlogin&quot value=&quotLogin&quot> <a href=&quot/forgot&quot>I forgot my password</a>
    </div>
</form>
</body>

و به همین سادگی توانستیم با CSS grid یک فرم ورود طراحی کنیم.

جمع بندی

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