آموزش چینش 12 ستونه ی گرید در CSS

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

مزیت های استفاده از گرید 12 ستونه

1. انعطاف پذیری: عدد 12 مقسوم علیه های زیادی دارد. طراحان با استفاده از آن به سادگی می توانند طرح خود را با نصف، یا یک سوم یا یک چهارم از این عدد طراحی کنند. 

2. واکنش گرایی: یک گرید 12 ستونه، برای ایجاد وب سایت های واکنش گرا، که خود را با استفاده از مدیا کوئری ها، با سایزهای مختلف صفحات نمایش(دسکتاپ، تبلت یا موبایل) سازگار می کنند، مفید است. این امر باعث می شود سایت ما در تمام دستگاه ها به درستی نمایش داده شود. 

3. کارایی: داشتن یک ساختار از قبل تعریف شده، به فرایند طراحی سرعت بیشتری می دهد. 

در زیر، روش ایجاد یک چینش گرید 12 ستونه نشان داده شده است:

تعریف ظرف گرید:

برای انجام این کار، دستور display: grid; را در ظرف گرید اعمال می کنیم. 

ایجاد 12 ستون

با استفاده از ویژگی grid-template-columns تعداد 12 ستون را تعریف می کنیم. دستور repeat(12, [col-start] 1fr); یک گرید 12 ستونه را ایجاد می کند که عرض های(width) برابری دارند و خط شروع هر مسیر ستونی را col-start نام گذاری می کند. 

• دستور repeat(12,..) به گرید اعلام می کند که 12 ستون ایجاد کند. 
• دستور [col-start] یک خط گرید نام گذاری شده ایجاد می کند. چونکه این دستور 12 بار تکرار می شود، ما 12 ستون خواهیم داشت که نام آنها col-start خواهد بود. این برای قرار دادن آیتم های گرید در نقاط خاصی در درون گرید، مفید است. 
• 1fr : واحد fr مخفف کلمه ی "fraction" به معنی قسمت است. این واحد، یک قسمت از فضای در دسترسِ کلی در ظرف گرید را مشخص می کند. با استفاده از 1fr، هر یک از 12 ستون، عرضی برابر و سیال خواهند داشت.

قرار دادن آیتم های گرید

حالا می توانیم با استفاده از grid-column  آیتم های گرید را در سراسر 12 ستون  قرار دهیم و اندازه دهی کنیم. 

• برای اینکه یک آیتم گرید به اندازه ی تعداد خاصی از ستون ها، گسترش پیدا کند، از دستور grid-column: span <number>; یا grid-column: <start-line> / span <number>; استفاده کنید. 
• شما همچنین می توانید با استفاده از دستور grid-column: <start-line> / <end-line>; خطوط گرید شروع و پایان را برای یک آیتم مشخص کنید. 

استفاده از مدیا کوئری ها برای اضافه کردن نقاط شکست(Breakpoints)

همیشه در ابتدا، طراحی را برای موبایل ها انجام دهید: ما در اینجا بخش های مختلف را به ترتیب منبع(از بالا به پایین) برای صفحاتی که عرض آنها کمتر از 575 پیکسل است، نمایش می دهیم. سپس به سراغ یک چینش دو ستونه، برای صفحات نمایشی که بین 576 و 767 پیکسل عرض دارند می رویم. سپس به سراغ یک چینش سه ستونه، برای صفحات نمایشی که عرض آنها بیش از 767 پیکسل است می رویم. 

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 20px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile first */
.container > * {
  border: 1px solid green;
  background-color: beige;
  padding: 10px;
  grid-column: col-start / span 12;
}

@media (min-width: 576px) {
  .sidebar {
    grid-column: col-start / span 3;
    grid-row: 3;
  }
  .ads {
    grid-column: col-start / span 3;
  }
  .content, .footer {
    grid-column: col-start 4 / span 9;
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }
}

@media (min-width: 768px) {
  .nav {
    grid-column: col-start / span 2;
    grid-row: 2 / 4;
  }
  .content {
    grid-column: col-start 3 / span 8;
    grid-row: 2 / 4;
  }
  .sidebar {
    grid-column: col-start 11 / span 2;
  }
  .ads {
    grid-column: col-start 11 / span 2;
  }
  .footer {
    grid-column: col-start / span 12;
  }
  nav ul {
    flex-direction: column;
  }
}

منبع: https://www.w3schools.com/css