استفاده از CSS Grid برای طراحی چیدمان‌های رایج

CSS Grid یکی از قوی‌ترین ابزارهایی است که به توسعه‌دهندگان وب اجازه می‌دهد چیدمان‌هایی بسیار انعطاف‌پذیر و پیچیده را پیاده‌سازی کنند. با استفاده از این قابلیت، شما می‌توانید به راحتی صفحه‌بندی‌های مختلفی را طراحی کنید که در گذشته نیازمند استفاده از روش‌های پیچیده‌تر و تقریباً غیرمستقیم بود. CSS Grid این امکان را فراهم می‌کند تا بتوانید عناصر را به صورت دو بعدی، در قالب ردیف و ستون، بچینید و کنترل بیشتری بر ظاهر صفحه‌های وب خود داشته باشید.

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

در این مثال، نحوه ایجاد یک چیدمان ساده دو ستونی را با CSS Grid نشان می‌دهیم. با استفاده از این چیدمان می‌توانید دو بخش برای محتوا و نوار کناری (sidebar) داشته باشید که اغلب در طراحی‌های وب استفاده می‌شود.

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

در ادامه، کد HTML و CSS مربوط به یک چیدمان دو ستونی آورده شده است:

<!-- HTML Structure -->
<div class="container">
  <div class="content">Main Content</div>
  <div class="sidebar">Sidebar</div>
</div>

<!-- CSS for Grid Layout -->
<style>
.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
.content {
  background-color: #f0f0f0;
  padding: 20px;
}
.sidebar {
  background-color: #cccccc;
  padding: 20px;
}
</style>

در این کد، <div> هایی با کلاس container پوشش داده شدند، که یک شبکه دو ستونی را تشکیل می‌دهند.

قابلیت grid-template-columns به ما اجازه می‌دهد تا عرض ستون‌ها را تعریف کنیم. در اینجا، ستون اول دو برابر ستون دوم است.

با استفاده از gap، فاصله‌ای بین ستون‌ها مشخص می‌شود که ظاهری تمیزتر به چیدمان می‌بخشد.

کلاس content و sidebar برای استایل‌دهی به هر بخش استفاده می‌شوند تا بتوانید به آن‌ها ظاهری مجزا بدهید.