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

grid-template-columns property

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

نحوه نوشتار

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

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

مقادیر

auto

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

( مقادیر برای اندازه ستون , اعداد مثبت | auto-fill | auto-fit)repeat

این تابع بخشی که اندازه ستون را مشخص می کند، تکرار می کند. همچنین برای تعیین اندازۀ ستون ها در تعداد زیاد، بسیار مؤثر است.
مانند: repeat(4, 250px 300px). در این مثال تابع، چهار بار دو ستون به اندازه های 250px و 300px را تکرار می کند (در مجموع، اندازه 8 ستون مشخص می شود).

max-content

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

min-content

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

minmax(min,max)

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

length

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

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

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: 4fr 1fr 2fr 3fr;
    grid-template-rows: 100px;
    grid-gap: 7px;
}
.item1 { background-color: lightgreen; }
.item2 { background-color: lightslategrey; }
.item3 { background-color: pink; }
.item4 { background-color: lightskyblue; }

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

پشتیبانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این ویژگی CSS پشتیبانی می کنند.