ویژگی grid-column در CSS

grid-column property

ویژگی کوتاه نویسی grid-column در (گرید) CSS، کوتاه نویسی ویژگی های grid-column-end و grid-column-start می باشد. این ویژگی اندازه و موقعیت عنصر را در ستون ساختار grid مشخص می کند.

نحوه نوشتار

grid-column: auto;
grid-column: 2

grid-column: grid-column-start / grid-column-end;

مقادیر

مقادیر این ویژگی برابر با مقادیر grid-column-end و grid-column-start می باشد.

auto

عنصر طبق جریان پیشفرض والد جایگیری خواهد کرد. این مقدار پیشفرض است.

span n

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

شماره ستون

مشخص می کند عنصر در کدام ستون نمایش داده شود.

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

html

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

css

.container {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     grid-template-rows: repeat(1, 100px);
     grid-gap: 7px;
}
[class*="item"] {
     background-color: lightslategray; 
}
.item1 {
     grid-column: 2 / 3;
     background-color: violet;
}
.item2 {
     grid-column: 4 / 5;
     background-color: tomato;
 }

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

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