ویژگی grid-auto-columns در CSS

grid-auto-columns property

ویژگی grid-auto-columns در (گرید) CSS اندازه ستون های مجازی (ستون هایی که خارج از تعداد ستون های تعریف شده افزوده می شوند) را مشخص می کند.

نحوه نوشتار

grid-auto-columns: auto;
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: 300px;
grid-auto-columns: 1fr;
grid-auto-columns: minmax(100px, 200px);

grid-auto-columns: auto|max-content|min-content|length;

مقادیر

auto

اندازه ستون ها با در نظر گرفتن اندازه والد مشخص می شود. این مقدار پیشفرض است.

max-content

اندازه هر ستون را مطابق بر بزرگترین اندازه محتوای داخل ستون مشخص می کند.

min-content

اندازه هر ستون را مطابق بر کوچکترین اندازه محتوای داخل ستون مشخص می کند.

minmax(min,max)

محدوده کمترین و بیشترین اندازه ستون را مشخص می کند.

length

اندازه ستون ها را بر حسب مقادیر ثابت با واحدهای اندازه CSS مشخص می کند. (px, rem, em)

در مثال زیر نحوه عملکرد این ویژگی را می بینیم:

در مثال زیر اندازه دو ستون واقعی به عرض200px و به رنگ آبی مشخص شده است. سپس توسط ویژگی grid-auto-columns مشخص شده که اندازه ستون های مجازی 100px باشد. بعد از این دو ستون واقعی هر چند ستون مجازی اضافه شود عرض آن 100px خواهد بود.

توسط ویژگی grid-auto-flow: column تعیین کرده ایم که عناصر اضافی بصورت ستون اضافه شوند

html

<div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>
</div>

css

.container {
     display: grid;
     grid-template-columns: repeat(2, 200px);
     grid-auto-flow: column;
     grid-auto-columns: 100px;
     grid-gap: 10px;
}
.container > div {
     background-color: dodgerblue;
     height: 100px;
}
.container .item3,
.container .item4 {
     background-color: tomato;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند. مرورگر Firefox of Android بصورت نسبی از این ویژگی پشتیبانی می کند.