ویژگی grid-column-end در CSS

grid-column-end property

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

نحوه نوشتار

grid-column-end: auto;
grid-column-end: span 3;
grid-column-end: 2

grid-column-end: auto|span n|column-line;

مقادیر

auto

آیتم مورد نظر بعه اندازه 1 ستون گسترش میابد. این مقدار پیشفرض است.

span n

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

شماره ستون

مشخص می کند که آیتم مورد نظر، تا ابتدای کدام ستون و به اندازه یک ستون گسترش یابد.

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

html

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

css

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 100px;
    grid-gap: 7px;
}
[class*="item"] {
   background-color: dodgerblue; 
}
.item3 {
   grid-column-end: span 2;
   background-color: violet;
}
.item4 {
   grid-column-end: 3;
   background-color: lightgreen;
}

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

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