نحوه استفاده از شبکه CSS برای طرح های وب پیچیده: یک راهنمای گام به گام

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

شبکه CSS چیست؟

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

مرحله 1: تنظیم شبکه

برای شروع استفاده از شبکه CSS ، باید یک ظرف شبکه را تعریف کنید. این کار با تنظیم display خاصیت یک عنصر به grid یا inline-gridبشر

 class="grid-container">
  
 class="item">1
  
 class="item">2
  
 class="item">3
  
 class="item">4
  
 class="item">5
  
 class="item">6

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
  grid-template-rows: auto; /* rows will adjust to content */
  gap: 10px; /* spacing between grid items */
}

در این مثال ، ما یک شبکه با 3 ستون با عرض مساوی و اندازه ردیف اتوماتیک ایجاد کرده ایم. در gap ویژگی فاصله بین وسایل شبکه را اضافه می کند.

مرحله 2: تعریف آهنگ های شبکه

آهنگ های شبکه ردیف ها و ستون هایی هستند که شبکه را تشکیل می دهند. شما می توانید آنها را با استفاده از grid-template-columns وت grid-template-rows خواص

مثال: ایجاد یک طرح شبکه پیچیده

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr; /* 3 columns: fixed, flexible, and double flexible */
  grid-template-rows: 100px auto 150px; /* 3 rows with specific heights */
  gap: 15px;
}

در اینجا:

• ستون اول در 200pxبشر
• ستون دوم 1 بخش از فضای موجود را به خود اختصاص می دهد.
• ستون سوم 2 بخش از فضای موجود را به خود اختصاص می دهد.
• ردیف ها دارای ارتفاعات خاصی هستند که ردیف میانی با محتوا تنظیم می شود.

مرحله 3: قرار دادن موارد در شبکه

با استفاده از این موارد می توانید موارد را روی شبکه قرار دهید grid-column وت grid-row خواص این خصوصیات در جایی که یک مورد در شبکه شروع و پایان می یابد ، تعریف می کند.

مثال: مواردی را در میان ستون ها و ردیف ها قرار دهید

 class="grid-container">
  
 class="item header">Header
  
 class="item sidebar">Sidebar
  
 class="item main">Main Content
  
 class="item footer">Footer

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  height: 100vh; /* full viewport height */
}

.header {
  grid-column: 1 / -1; /* spans from the first to the last column */
  background-color: #4CAF50;
}

.sidebar {
  grid-row: 2 / 3; /* spans the second row */
  background-color: #2196F3;
}

.main {
  grid-row: 2 / 3; /* spans the second row */
  background-color: #f1f1f1;
}

.footer {
  grid-column: 1 / -1; /* spans from the first to the last column */
  background-color: #FF9800;
}

در این مثال:

• هدر و پاورقی کل عرض شبکه را در بر می گیرد.
• نوار کناری و محتوای اصلی ردیف دوم را به اشتراک می گذارند.

مرحله 4: استفاده از مناطق شبکه برای خوانایی بهتر

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

مثال: تعیین مناطق شبکه

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header {
  grid-area: header;
  background-color: #4CAF50;
}

.sidebar {
  grid-area: sidebar;
  background-color: #2196F3;
}

.main {
  grid-area: main;
  background-color: #f1f1f1;
}

.footer {
  grid-area: footer;
  background-color: #FF9800;
}

در اینجا ، ما هر بخش از شبکه را با استفاده از آن نامگذاری کرده ایم grid-template-areas و مواردی را با استفاده از این مناطق اختصاص داد grid-area خاصیت

مرحله 5: ایجاد طرح پاسخگو

شبکه CSS یکپارچه با نمایش داده های رسانه ای کار می کند و به شما امکان می دهد طرح های پاسخگو ایجاد کنید.

مثال: طرح شبکه پاسخگو

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 10px;
  grid-template-areas:
    "header"
    "sidebar"
    "main"
    "footer";
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
  }
}

در این مثال:

• در صفحه های کوچکتر ، طرح به صورت عمودی پشته می شود.
• در صفحه های بزرگتر ، طرح به یک طراحی دو ستونی سوئیچ می شود.

مرحله ششم: ویژگی های شبکه پیشرفته

CSS Grid ویژگی های پیشرفته ای مانند تراز ، وسایل همپوشانی و شبکه های تو در تو را ارائه می دهد.

مثال: موارد همپوشانی

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 10px;
}

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  background-color: #4CAF50;
  z-index: 1;
}

.item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  background-color: #2196F3;
  z-index: 2;
}

در اینجا item2 همپوشانی item1 با قرار دادن آن در همان سلولهای شبکه.

برای دریافت اطلاعات به صندوق ورودی خود ، به خبرنامه رایگان ما بپیوندید.

پایان

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