CSS Grid یا Flexbox: کدام یک برای ایجاد ستون بهتر است؟

.flex-container {
  display: flex;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

دوم اعمال کنید:

.grid-container {
  display: grid;
}

تنها با اعلان بالا هیچ اتفاقی نمی افتد زیرا رفتار پیش فرض Grid ردیف هایی را ایجاد می کند که روی هم قرار می گیرند.

برای تغییر به نمایش ستون، باید ویژگی grid-auto-flow را تغییر دهید (که به طور پیش فرض ردیف است):

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

حالا نتیجه اینجاست:

برای تعیین تعداد دقیق ستون های مورد نظر در هر خط، از grid-template-columns استفاده کنید:

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

این مقدار پنج ستون با عرض مساوی ایجاد می کند. برای به دست آوردن یک رفتار بسته بندی شبیه به Flexbox، می توانید از ویژگی های پاسخگو مانند تنظیم خودکار و حداقل حداکثر استفاده کنید:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}

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

آنچه که بسیار مهم است روشی است که می توانید جنبه تک بعدی طرح را کنترل کنید. به عنوان مثال تصویر زیر را در نظر بگیرید:

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

Grid با راه‌اندازی یک شبکه دو بعدی با ستون‌هایی که به‌طور پیش‌فرض قفل شده‌اند، متفاوت عمل می‌کند. همانطور که تصویر بالا نشان می دهد، یک ستون با متن کوتاه به اندازه ستونی با متن بسیار طولانی خواهد بود.

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

زمان استفاده از Flexbox

آیا می خواهید به اندازه ذاتی هر ستون/ردیف، همانطور که توسط محتوای آنها تعریف می شود، تکیه کنید؟ یا می خواهید از دیدگاه والدین کنترل ساختار یافته ای داشته باشید؟ اگر پاسخ شما اولین است، پس Flexbox راه حل مناسبی برای شما است.

برای نشان دادن این موضوع، یک منوی پیمایش افقی را در نظر بگیرید. علامت گذاری درون تگ های را با این جایگزین کنید:

<h1>Flexbox vs. Grid</h1>

<header class="flex">
  <h2>Flexbox</h2>

  <nav>
    <ul class="nav-list">
      <li><a href="">Home</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">Service Information Goes Here</a></li>
      <li><a href="">Blog Contact</a></li>
      <li><a href=""></a></li>
    </ul>
  </nav>
</header>

<header class="grid">
  <h2>Grid</h2>

  <nav>
    <ul class="nav-list">
      <li><a href="">Home</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">Service Information Goes Here</a></li>
      <li><a href="">Blog Contact</a></li>
      <li><a href=""></a></li>
    </ul>
  </nav>
</header>

علامت گذاری در فایل CSS را با این جایگزین کنید:

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

header {
  --border-width: 5px;
  border: var(--border-width) solid black;
  margin-bottom: 30px;
}

header > *:first-child {
  border: var(--border-width) solid #FFC0CB;
  margin: 0;
}

li {
  border: var(--border-width) solid #90EE90;
}

نتیجه این است:

اکنون، با اضافه کردن CSS زیر، پیمایش اول را به یک طرح انعطاف پذیر و دومی را به یک طرح شبکه تبدیل کنید:

.flex .nav-list {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.grid .nav-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

نتایج را مقایسه کنید تا ببینید کدام مناسب تر است:

از تصویر بالا می بینید که فلکس باکس راه حل مناسبی در این مورد است. شما مواردی دارید که می خواهید در کنار یکدیگر قرار بگیرید و اندازه ذاتی خود را حفظ کنید (بزرگ یا کوچک بسته به طول متن). با Grid، هر سلول دارای یک عرض ثابت است و به نظر خوب نمی رسد – حداقل با پیوندهای متنی ساده.

زمان استفاده از CSS Grid

جایی که Grid واقعاً برتر است زمانی است که می خواهید یک سیستم سفت و سخت از والدین ایجاد کنید. یک مثال مجموعه ای از عناصر کارت است که باید به همان اندازه گسترده باشند، حتی اگر حاوی مقادیر متفاوتی از محتوا باشند.

علامت گذاری داخل تگ های را با این جایگزین کنید:

<h1>Flexbox vs. Grids</h1>

<section class="cards">
  <h2>Some cards</h2>

  <div class="columns">
    <article class="card">
      <h3 class="card__title">Fun Stuff</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>

      <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Excavate</li>
      </ul>
    </article>

    <article class="card">
      <h3 class="card__title">Fun Stuff</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

      <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Excavate</li>
      </ul>
    </article>

    <article class="card">
      <h3 class="card__title">A Longer Title Than Others</h3>

      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
         excepturi sit ea dolores totam veniam qui voluptates commodi,
         perferendis et!</p>

      <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Excavate</li>
      </ul>
    </article>
  </div>
</section>

این CSS را اضافه کنید:

.columns {
  display: flex;
  gap: 1em;
}

article {
  background-color: #90EE90;
  color: black;
  padding: 15px;
}

ul {
  background-color: white;
  padding: 2px;
  list-style: none;
}

شما با یک صفحه نمایش Flexbox شروع می کنید تا ببینید چگونه به نظر می رسد، بنابراین می توانید آن را با نمایشگر شبکه مقایسه کنید. در اینجا خروجی است:

توجه داشته باشید که چگونه آخرین ستون به دلیل اندازه ذاتی آن بزرگتر از ستون های دیگر است، که Flexbox به خوبی از پس آن برمی آید. اما برای اینکه آنها با استفاده از Flexbox با عرض یکسان باشند، باید با اضافه کردن موارد زیر در برابر آن اندازه ذاتی حرکت کنید:

.columns > * {
  flex: 1;
}

این کار را انجام می دهد. اما Grid برای مواردی مانند این مناسب تر است. شما فقط تعداد ستون ها را مشخص می کنید، و می توانید بروید:

.columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
}

نتیجه این است:

یکی دیگر از مزایای استفاده از Grid این است که والدین چیدمان فرزندان را کنترل می کنند. بنابراین می توانید بدون نگرانی در مورد شکستن طرح، عناصر فرزند را اضافه و حذف کنید.

بنابراین چه زمانی باید از Grid یا Flexbox استفاده کنید؟

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

از سوی دیگر، Flexbox زمانی ایده آل است که بخواهید یک سیستم انعطاف پذیرتر بر اساس اندازه ذاتی عناصر داشته باشید.

منبع مقاله