طراحی واکنشگرا با Css Grid

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

دو ماژولی که Css برای طراحی واکنشگرا در اختیار ما قرار می دهد، Css Grid و Flexbox می باشد. از این دو ماژول می توان به صورت مجزا استفاده کرد اما بهترین کار استفاده ترکیبی از هر دو ماژول می باشد. من در این مقاله درباره گرید (Css Grid) صحبت خواهم کرد.

فهرست مطالب
گرید چیست؟
اصطلاحات کار با گرید
شروع کار با گرید
- استفاده از grid-template-rows و grid-template-columns
- مقدار min-content و max-content
- مقدار auto
- معرفی تابع minmax
- معرفی تابع repeat
- مقدار auto-fill و auto-fit
- ویژگی grid-template-area
- ویژگی grid-template
- ویژگی grid-gap
تعیین مکان آیتم هاید گرید
ترازبندی آیتم ها در گرید

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

گرید چیست؟

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

اصطلاحات کار با گرید

گرید کانتینر (Grid Container): به عنصر اصلی یا همان والد که قاب اصلی کار ما می باشد، گرید کانتینر گفته می شود.

گرید آیتم (Grid Item): به فرزندان مستقیم گرید کانتینر، گرید آیتم گفته می شود. ویژگی های float، clear و vertical-tab بر روی این آیتم ها تاثیری ندارند.

گرید لاین (Grid Line): به خطوطی که عنصر والد ما را در راستای افقی و عمودی تقسیم بندی می کنند، گرید لاین گفته می شود. با استفاده از این خطوط می توان موقعیت آیتم ها را مشخص کرد. به صورت پیشفرض از چپ به راست و از بالا به پایین به ترتیب از شماره ۱ نامگذاری می شوند. دقت کنید که هر خط می تواند چند نام داشته باشد.

ستون گرید (Grid Column): به فضای عمودی بین دو خط عمودی متوالی، ستون گرید گفته می شود.

ردیف گرید (Grid Row): به فضای افقی بین دو خط افقی متوالی، ردیف گرید گفته می شود.

تِرَک گرید (Grid Track): نام عمومی برای ردیف و ستون گرید می باشد، به فضای بین هر دو خط متوالی ترک گرید می گویند. در ادامه بیشتر از این نام استفاده می کنیم.

سلول گرید (Grid Cell): فضایی که بین دوخط عمودی و افقی متوالی قرار بگیرد، سلول گرید گفته می شود.

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

گرید گپ (Grid Gap): به فاصله ای که بین ستون ها یا ردیف ها از یکدیگر ایجاد می کنیم گرید گپ گفته می شود. در طراحی معمولا نیاز داریم که بین ردیف های محتوا یا ستون های محتوای خود فاصله ای ایجاد کنیم در گرید به این فاصله گپ گفته می شود.

شروع کار با گرید

برای شروع کار با گرید ابتدا باید ساختار صفحه یا محتوای خود را مشخص نمائیم یعنی مشخص کنیم که به چند ردیف و ستون نیاز داریم و اندازه موقعیت این ستون ها و ردیف ها را مشخص نمائيم. سپس باید ویژگی display را برای عنصر اصلی تعیین نمائیم که سه مقدار grid (گرید از نوع بلاک)و inline-grid (گرید از نوع خطی)و subgrid (فرزندان مستقیم هم دارای گرید بندی مانند عنصر والد می شوند) را می تواند دریافت کند. گرید فقط بر روی فرزندان مستقیم خودش تاثیر دارد.

.grid-container { 
display: grid;
}

استفاده از grid-template-rows و grid-template-columns

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

با استفاده از این دستور سه ستون و سه ردیف خواهیم داشت.

.grid-container {  
display: grid; 
grid-template-columns: 100px 20% 1fr;
grid-template-rows: 2fr 20% 50px;
}

خروجی کد:

مقدار min-content و max-content

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

grid-template-columns: min-content  max-content;
grid-template-rows: 1fr 1fr 1fr;

خروجی کد:

مقدار auto

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

grid-template-columns: 50px 100px auto;
grid-template-rows: 1fr 1fr 1fr;

خروجی کد:

معرفی تابع minmax

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

grid-template-columns: minmax(50px, 1fr) minmax(10px, 25%) 50px;
grid-template-rows: 1fr 1fr 1fr;

خروجی کد:

معرفی تابع repeat

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

grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;

دستور بالا 4 ستون با اندازه های مساوی ایجاد می کند. خروجی کد:

مقدار auto-fill و auto-fit

به جای مشخص کردن تعداد تکرارها در تابع repeat می توانیم از این دو مقدار استفاده نمائیم. auto-fill باعث تولید خودکار ترک ها به تعدادی می شود که سرریز نشوند و auto-fit هم باعث تولید خودکار ترک ها می شود اما ترک هایی که محتوایی ندارند و اندازه آنها صفر می باشد را در نظر نمی گیرد و فضای باقی مانده را با توجه به حداکثر اندازه مشخص شده برای هر ترک بین بقیه تقسیم می کند.

grid-template-columns: repeat(auto-fill, 1fr);

ویژگی grid-template-area

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

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

body {
display: grid;
grid-template-area: &quotheader header header&quot
                                  &quot.  main  .&quot
                                   &quotfooter footer footer&quot
}
header{
grid-area: header;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}

ویژگی grid-template

یک ویژگی برای خلاصه نویسی دستورات ساخت ردیف و ستون می باشد. به این صورت که اول مقادیر مربوط به ردیف را نوشته و یک / قرار می دهیم و سپس مقادیر مربوط به ردیف را وارد می نمائیم. از این دستور برای خلاصه نویسی grid-template-area و ترکیبی از همه موارد ذکر شده هم می توان استفاده کرد.

grid-template: 1fr 1fr 2fr / 2fr 1fr 2fr;

ویژگی grid-gap

با استفاده ار این ویژگی می توانیم بین ردیف ها و ستون ها فاصله ایجاد نمائیم. با استفاده از ویژگی gap هم می توانیم دو دستور بالا را در یک دستور خلاصه نویسی کنیم.

ویژگی های دیگری مانند grid-auto-columns و grid-auto-rows و grid-auto-flow و .. وجود دارد که می توانیددر مورد هر کدام جستجو نمائید.

grid-template: 1fr 1fr 2fr / 2fr 1fr 2fr;
grid-gap: 10px 5%;

خروجی کد:

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

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

ویژگی grid-column-start: خط عمودی شروع یک آیتم گرید را مشخص می کند.

ویژگی grid-column-end: خط عمودی پایان یک آیتم گرید را مشخص می کند.

ویژگی grid-row-start: خط افقی شروع یک آیتم گرید را مشخص می کند.

ویژگی grid-row-end: خط افقی پایان یک آیتم گرید را مشخص می کند.

با استفاده از ویژگی های grid-row و grid-column می توانیم 4 دستور بالا را خلاصه نویسی کنیم، به صورتی که عدد اول شروع ردیف یا ستون سپس علامت اسلش قرار می دهیم و عدد دوم که نشانه ردیف یا ستون پایانی هست را وارد می کنیم. (در اینجا اعداد همان نام خطوط هستند)

.grid-container {
display: grid;
grid-template: 1fr 1fr 2fr / 2fr 1fr 2fr;
grid-gap: 10px 5%;
}
.grid-item{
grid-row: 1 /3;
grid-column: 1/2;
background-color: orange;
}

خروجی کد:

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

خب بعد از ایجاد ساختار کلی صفحه و مشخص کردن اندازه و موقعیت آیتم های گرید نوبت به ان می رسد که ترازبندی یا الاینمنت را برای آیتم ها مشخص نمائیم. ترازبندی در ماژول های flexbox و Css grid به یک شکل می باشد، برای درک کامل این موضوع و نحوه ترازبندی عناصر به مقاله طراحی و صفحه آرایی با فلکس باکس ( Flexbox ) مراجعه نمائید.

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

برای داشتن وبسایت واکنشگرا کافیس با استفاده از مدیا کوئری ها و تنظیم ساختار گرید و آیتم های آن برای سایر اسکرین ها، وبسایت خود را واکنشگرا نمائیم.

امیدوارم این مطلب براتون مفید بوده باشد.