حل مشکل طرح‌بندی با «جریان خودکار شبکه: ستون».

ek3nk4r 2024-06-13

0 0 خواندن این مطلب 1 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

در یک پروژه اخیر، با یک مشکل چیدمان مواجه شدم که با ویژگی CSS Grid به زیبایی حل شد. grid-auto-flow: column. بیایید به مشکل و راه حل بپردازیم.

فهرست مطالب

مشکل

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

رفتار پیش‌فرض CSS Grid این است که ابتدا ردیف‌ها را پر می‌کند (قرار دادن مبتنی بر ردیف)، که آن چیزی که من می‌خواستم نبود. این یک نسخه ساده شده از CSS اولیه من است:

 class="data">
   class="data__item">Item 1
   class="data__item">Item 2
   class="data__item">Item 3
   class="data__item">Item 4
   class="data__item">Item 5
   class="data__item">Item 6

.data {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
}

این طرح بندی را رندر می کند:

طرح بندی شبکه ای بر اساس ردیف

راه حل

وارد grid-auto-flow: column. این ویژگی رفتار پیش‌فرض CSS Grid را تغییر می‌دهد و باعث می‌شود که ستون‌های قبل از سطرها را پر کند (قرار دادن مبتنی بر ستون). در اینجا نحوه تغییر CSS من آمده است:

.data {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);

  /* Add this property 👇🏽 */
  grid-auto-flow: column;
}

طرح بندی شبکه ای بر اساس ستون

با grid-auto-flow: column، اکنون موارد شبکه قبل از رفتن به ستون بعدی به صورت عمودی در هر ستون پر می شوند. این دقیقا همان رفتاری بود که من برای چیدمانم نیاز داشتم.

نتیجه

شبکه های CSS grid-auto-flow: column یک ابزار قدرتمند برای کنترل قرار دادن آیتم های شبکه ای است. این یک مثال عالی از این است که چگونه یک ویژگی CSS می تواند یک مشکل طرح بندی پیچیده را به شدت ساده کند. کد نویسی مبارک!