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

grid-column-start property

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

نحوه نوشتار

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

grid-column-start: 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 پشتیبانی می کنند.