ایجاد Grid شکسته

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

در این لینک می‌توانید نمونه کلی از این موضوع را مشاهده کنید.

این طراحی چیزی‌ست که ما از کارهای Anthony Harmon الهام گرفته‌ایم. برای مشاهده کار و حالت لایه‌بندی طراحی وی می‌توانید به این لینک مراجعه نمایید.

طراحی گرافیکی در وب

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

با استفاده از تکنیک جدید CSS Grid ما می‌توانیم جذابیت و خلاقیت بسیار بیشتری را به کارهای خود اضافه کنیم و با آن سر و کار داشته باشیم. 

۱. تعیین کردن Gridها

ستون‌های گرید نیازی ندارند که حتما یکسان باشند. بیایید قسمتی از طراحی‌های قبلی را در نظر بگیریم و کارمان را به جلو ببریم.

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

<section class="grid1">
 
</section>

حال باید روی قسمت اصلی با همان کلاس grid1 استایل‌های سی‌اس‌اس را اعمال کنیم که مهمترین آن در ابتدای کار display است.

.grid1 {
  display: grid;
  grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
  grid-template-rows: 100px auto 15px auto auto;
}

ستون‌ها درست مانند چیزی که شما در تصویر بالا مشاهده می‌کنید قرار گرفته‌اند. واحد fr یک شکاف یا شکستگی را نشان می‌دهد که به صورت کلی تعیین می‌شود. بنابراین در این حالت ستون اولی سه مورد از آن را گرفته و ستون بعدی ۶ مورد را گرفته و در نتیجه وسیع‌تر شده است. 

ردیف‌‌ها کمی متفاوت‌تر هستند. در اندازه‌گیری این واحد می‌توانید تلفیقی از پیکسل‌ها و واحد auto را مشاهده کنید. در جاهایی که از auto استفاده شده، ردیف براساس محتوا بزرگ می‌شود.

۲. ایجاد تصاویر

بیایید با تصاویر شروع کنیم. برای قسمت برچسب گذاری ما به چندین گزینه مختلف نیاز داریم، یا اینکه از المان img استفاده می‌کنیم و یا اینکه از المانی دیگر بهره می‌بریم که خاصیت پس‌زمینه داشته باشد. 

ما می‌توانیم از خاصیت object-fit: cover; روی المان‌های تصویر استفاده کنیم، اما چنین کاری کمی دشوار است، چرا ما کارمان را سخت‌تر کنیم؟ بنابراین برای این مورد ما از حروف استفاده می‌کنیم، به این دلیل که چنین المانی به ما انعطاف‌پذیری بیشتری را می‌دهد.

بیایید با چند div شروع کنیم:

<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>

همچنین از چندین پس‌زمینه بهره می‌گیریم:

.img1 {  
  background: url(wooden.jpg);
  background-size: cover;
}
 
.img2 {  
  background: url(speaker.jpg);
  background-size: cover;
}
 
.img3 {  
  background: url(waves.jpg);
  background-size: cover;
}

۳. تصاویر را قرار دهید

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

اولین تصویر ما از خط اول ستون ۱ شروع می‌شود و در نقطه ۳ خاتمه می‌یابد. ما می‌توانیم چنین موضوعی را به صورت زیر تعیین نماییم:

grid-column: 1 / 3;

همچنین می‌توانیم از تکنیک زیر استفاده کنیم:

grid-column: 1 / span 2;

برای ردیف‌ها نیز، اولین تصویر ما نیاز دارد که در ردیف دوم شروع شده و در ردیف پنجم خاتمه بیابد، برای چنین حالتی نیاز است که به صورت زیر عمل کنیم:

grid-row: 2 / 5;

همچنین می‌توانیم به صورت زیر بنویسیم:

grid-row: 2 / span 3;

چنین کاری را نیز برای بقیه تصاویر انجام دهید. 

۴. افزودن محتوای بیشتر

حال بیایید محتوای متنی را اضافه نماییم، برای این به چند بلاک متنی و یک دکمه CTA نیاز داریم شما می‌توانید این موارد را در هر جایی زیر grid1 قرار دهید:

<div class="strapline">
    <blockquote>“Almost immediately, word spread of a Welshman who had built this incredible sounding sub bass system, and soon enough audiophiles began searching out these legendary subs that were built like no other.”</blockquote>
</div>
   
<div class="cta-wrapper">  
    <div class="cta">
        <h1>Gibraltar</h1>
        <p>Introducing 212/SE, our most powerful and agile subwoofer, designed exclusively for larger systems and rooms to allow superior state of the art speakers to spring to full voice.</p>
        <a class="button" href="">View Product Details →</a>
    </div>
</div>

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

.strapline {
  grid-column: 3 / span 3;
  grid-row: 2 / span 1;
}
 
.cta-wrapper {
  grid-column: 4 / span 2;
  grid-row: 4 / span 2;
}

حال به نظر بهتر شده است!

در این قسمت بسیار پر ارزش است که بتوانید از خاصیت z-index استفاده کنید، البته اگر خودتان بخواهید. اگر مطابق با اصول خود وب پیش بروید، در دنیای برچسب گذاری چیزی که در آخر نوشته می‌شود در بالا قرار می‌گیرد، اما همانطور که گفته شد می‌توانید این موضوع را با استفاده از z-index تغییر دهید.

۵. رسیدگی کردن (inspect)

انتخاب کردن حالت inspector در مرورگر به شما قابلیت‌های بسیار خوبی برای شناسایی Gridها می‌دهد. در محیط گوگل کروم این امر به خوبی نمایش داده می‌شود:

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

۶. استایل دادن به محتوا

می‌شود بدون زحمت‌های زیاد و تلاش بسیار، استایل‌های بسیار خوب و زیبایی را اعمال کرد، ما این کار را با فونت‌های وبسایت شروع می‌کنیم. در این آموزش قصد داریم از Google Fonts استفاده کنیم، برای همین این قطعه کد را در قسمت <head> سندمان قرار می‌دهیم:

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Playfair+Display:400,400i,700" rel="stylesheet">

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

body {
  color: #292929;
  font: 1em/1.7 'Open sans', sans-serif;
}
 
blockquote {
  font: italic 1.1em/2 'Playfair Display', serif;
  margin: 0 0 2em 0;
}
 
.cta h1 {    
  font: bold 6em/1 'Playfair Display', serif;
  margin: 0 0 20px 0;
  position: relative;
}

حال نیاز است که به دکمه‌ها استایل بدهیم:

.button {
  display: inline-block;
  color: white;
  text-decoration: none;
  background: #292929;
  padding: .8em 1.5em;
}
 
.button:hover {
  background: black;
}

۷. پشتیبانی مرورگر

مبحث CSS Gird امروزه به صورت کامل پشتیبانی می‌شود، اما برای IE11 هنوز نیاز است که از نسخه پیشوندی استفاده کنید، در این صورت نیاز دارید که از تعیین کننده نوع @supports استفاده کنید. برای این کار باید به صورت زیر عمل نمایید:

@supports (display: grid) {
  
    /* grid layout */
    .grid1 {
        display: grid;
        grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
        grid-template-rows: 100px auto 15px auto auto;
    }
     
    ...
  
}

هر مرورگری که از CSS Grid به خوبی پشتیبانی نکند، تمام نواحی ساخته شده را پشت سر می‌گذارد و به آن‌ها اهمیتی نمی‌دهد. 

۸. مرحله آخر، واکنشگرا ساختن

لایه‌بندی ما روی صفحات بزرگ بسیار زیباست اما در صفحاتی با اندازه کوچکتر، کمی زشت به نظر می‌رسد. برای اینکه بتوانیم این موضوع را به صورت درست مدیریت کنیم و از یک روش واکنشگرا استفاده نماییم، نیاز است که از Media Query ها استفاده کنیم. برای این کار به صورت زیر عمل نمایید:

.grid1 {
    display: grid;
    grid-template-columns: 1fr 1fr;   
}
 
@media only screen and (min-width: 768px) {
   
  .grid1 {
    grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
    grid-template-rows: 100px auto 15px auto auto;
  }
   
}

در پایان

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

منبع