آموزش CSS Grid
مقایسه CSS Grid و Flexbox و آموزش اولیه گرید به همراه تمرین
در دنیای طراحی وب، CSS Grid یکی از ابزارهای قدرتمند برای ایجاد لایه‌بندی پیچیده است. در این آموزش، ما به بررسی کامل CSS Grid و مقایسه آن با Flexbox خواهیم پرداخت. این آموزش به شما کمک می‌کند تا با استفاده از CSS Grid، طراحی‌های ریسپانسیو و حرفه‌ای برای صفحات وب ایجاد کنید.
CSS Grid چیست؟
CSS Grid Layout یک سیستم طراحی دو بعدی است که به شما این امکان را می‌دهد تا ساختار پیچیده‌تری را برای صفحات وب ایجاد کنید. در واقع، این سیستم امکان تقسیم صفحه به ردیف‌ها و ستون‌ها را فراهم می‌کند و به شما اجازه می‌دهد تا المان‌ها را در سلول‌های گرید قرار دهید.
مزایای استفاده از CSS Grid:
-
چند بعدی بودن: طراحی به صورت ردیف‌ها و ستون‌ها به راحتی انجام می‌شود.
-
طراحی ریسپانسیو: به سادگی می‌توان با استفاده از media queryها، طراحی‌هایی که در دستگاه‌های مختلف به خوبی نمایش داده شوند، ایجاد کرد.
-
انعطاف‌پذیری: CSS Grid به شما این امکان را می‌دهد که صفحات وب با ساختارهای پیچیده را به راحتی مدیریت کنید.
مقایسه CSS Grid و Flexbox
در این بخش، به مقایسه دو تکنولوژی مهم CSS، یعنی Flexbox و CSS Grid می‌پردازیم.
Flexbox:
-
برای طراحی‌های یک‌بعدی (یک ردیف یا یک ستون) مناسب است.
-
قابلیت چیدمان المان‌ها به صورت افقی یا عمودی را به راحتی فراهم می‌کند.
-
بیشتر برای طراحی‌های ساده و پروژه‌های کوچک استفاده می‌شود.
CSS Grid:
-
برای طراحی‌های دو بعدی (هم ردیف و هم ستون) ایده‌آل است.
-
قابلیت کنترل بهتر برای چیدمان پیچیده و طراحی‌های ریسپانسیو را فراهم می‌کند.
-
بیشتر برای پروژه‌های بزرگ‌تر و پیچیده‌تر توصیه می‌شود.
CSS Grid با ویژگی grid-template-areas
یکی از ویژگی‌های مهم در CSS Grid، grid-template-areas است که به شما این امکان را می‌دهد تا نام‌های منطقی برای مناطق مختلف گرید تعیین کنید. به این ترتیب، میتوانید چینش المان‌ها را به راحتی مدیریت کنید.
طراحی ریسپانسیو با CSS Grid
یکی از قابلیت‌های مهم CSS Grid، طراحی ریسپانسیو است. با استفاده از @media query میتوانید طراحی خود را به گونه‌ای تنظیم کنید که در اندازه‌های مختلف صفحه به درستی نمایش داده شود.
توضیح کد
در کد روبه رو در اندازه‌های صفحه کوچک‌تر از 768px، تمام المان‌ها در یک ستون نمایش داده می‌شوند.
استفاده از CSS Grid به شما این امکان را می‌دهد که صفحات وب خود را به صورت کاملاً ریسپانسیو و حرفه‌ای طراحی کنید. این ابزار در مقایسه با Flexbox، برای طراحی‌های پیچیده‌تر و چندبعدی بسیار مناسب‌تر است. در این آموزش، با نحوه استفاده از CSS Grid و ویژگی‌های مهم آن آشنا شدید و همچنین نحوه ایجاد طراحی‌های ریسپانسیو را یاد گرفتید.
- header در تمامی عرض صفحه قرار دارد.
- aside در ستون اول، article در ستون دوم و div در ستون سوم قرار گرفته‌اند.
- footer در تمامی عرض صفحه قرار دارد.
body {
display: grid; grid-template-areas:
"header header header"
"aside article div"
"footer footer footer";
gap: 10px;
padding: 10px;
max-width: 1000px;
margin: 30px auto;
grid-template-columns: 1fr 2fr 1fr;
}
header { grid-area: header; } footer { grid-area: footer; }
aside { grid-area: aside; } article { grid-area: article; }
div { grid-area: div; }
@media only screen and (max-width: 768px) {
body {
grid-template-areas:
"header"
"aside"
"article"
"div"
"footer";
grid-template-columns: 1fr;
}
}
سوالات متداول (FAQ)
- CSS Grid بهتر از Flexbox است یا برعکس؟
بسته به نیاز شما، هرکدام مزایای خاص خود را دارند. برای طراحی‌های یک‌بعدی، Flexbox مناسب است، اما برای طراحی‌های دو بعدی پیچیده‌تر، CSS Grid بهترین گزینه است. - چگونه می‌توانم طراحی ریسپانسیو با CSS Grid ایجاد کنم؟
با استفاده از @media query و تنظیمات گرید میتوانید طراحی‌های ریسپانسیو ایجاد کنید که به صورت خودکار در اندازه‌های مختلف صفحه تغییر کند.
تمرین: طراحی صفحه وب با CSS Grid
در این تمرین، شما باید یک صفحه وب طراحی کنید که شامل هدر، سایدبار، مقاله، تبلیغات و فوتر باشد. از ویژگی grid-template-areas برای ساختاردهی صفحه استفاده کنید.
مراحل تمرین:
- یک فایل HTML جدید بسازید.
- درون فایل HTML، المان‌های زیر را اضافه کنید:
- <header> برای هدر
- <aside> برای سایدبار
- <article> برای مقاله
- <div> برای تبلیغات
- <footer> برای فوتر
- در فایل CSS، از ویژگی‌های CSS Grid استفاده کنید:
- grid-template-areas برای تعیین ساختار صفحه
- grid-template-columns برای تنظیم عرض ستون‌ها
- طراحی ریسپانسیو را با استفاده از @media query برای صفحه‌های کوچک‌تر از 768px تنظیم کنید.
<header>Header</header>
<aside>Sidebar</aside>
<article>Article</article>
<div>Ads</div>
<footer>Footer</footer>
body {
display: grid;
grid-template-areas:
“header header header”
“aside article ads”
“footer footer footer”;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
padding: 10px;
max-width: 1000px;
margin: 30px auto;
}
header { grid-area: header; background-color: #007bff; }
footer { grid-area: footer; background-color: #343a40; }
aside { grid-area: aside; background-color: #6c757d; }
article { grid-area: article; background-color: #28a745; }
div { grid-area: ads; background-color: #ffc107; }
@media (max-width: 768px) {
body {
grid-template-areas:
“header”
“aside”
“article”
“ads”
“footer”;
grid-template-columns: 1fr;
}
}
