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