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

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

CSS grid چیست؟

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

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

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

تفاوت 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="submit"] {
  border: 1px solid rgba(191, 216, 227, .8);
  border-radius: 5px;
  color: #fff;
  background-color: rgb(54, 134, 169);
  font-size: 110%;
}
input[type="text"],
input[type="password"] {
  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="login" action="" method="post"> 
    <div><label for="username">Username</label>
      <input type="text" name="username" id="username"></div>
    <div><label for="password">Password</label>
      <input type="password" name="password" id="password"></div>
    <div class="actions">
      <input type="submit" name="login" value="Login"> <a href="/forgot">I forgot my password</a>
    </div>
</form>
</body>

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

فرم خدمات ما

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

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

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

.card {
  border: 1px solid #d3d3d3;
  border-radius: .25rem;
}
.bg-img {
  background-size: cover;
  min-height: 180px;
  background-position: center;
  background-color: blue;
  background-
}
.content {
  padding: 15px;
}
button {
  background-color: transparent;
  border: 1px solid #2196F3;
  padding: .5rem 1rem;
  cursor: pointer;
  border-radius: .25rem;
}

<div class="card">
  <div class="bg-img"></div>
  <div class="content">
    <h4>Card title</h4>
    <p>Content....</p><button>Readmore</button></div>
</div>

در گام دوم، نیاز داریم تا کارت‌های ما درون یک grid مادر قرار گیرند. این grid مادر دارای نوع نمایش (به صورت grid) ، تعداد ستونها و فاصله بین هر ستون می‌باشد:

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

<div class="grid-container">
  <div class="card">..</div>
  <div class="card">..</div>
  <div class="card">..</div>
</div>

در کد HTML بالا به تعداد کارت‌های خدمات می‌توان المان کارت را به صورت زیر قرارداد:<div class="card">..</div>

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

جمع بندی

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