حل مشکل طرحبندی با «جریان خودکار شبکه: ستون».
در یک پروژه اخیر، با یک مشکل چیدمان مواجه شدم که با ویژگی 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 می تواند یک مشکل طرح بندی پیچیده را به شدت ساده کند. کد نویسی مبارک!
اطلاعات بیشتر
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
کد باز کردن