grid-area property
ویژگی کوتاه نویسی grid-area
در (گرید) CSS، چهار ویژگی دیگر است که اندازه و موقعیت عناصر را در صفحه بندی grid مشخص می کند.
نحوه نوشتار
grid-area: auto; grid-area: [item name] / span 2; grid-area: 3 / 4 / span[3]; grid-area: [item name] / 1 / span3 / auto; grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | item name;
مقادیر
grid-row-start
مشخص می کند عنصر در کدام ردیف شروع شود.
grid-column-start
مشخص می کند عنصر در کدام ستون شروع شود.
grid-row-end
مشخص می کند عنصر در کدام ردیف پایان پیدا کند.
grid-column-end
مشخص می کند عنصر در کدام ستون پایان پیدا کند.
item name
نام عنصرِ grid را مشخص می کند.
در مثال زیر نحوه عملکرد این ویژگی CSS را میبینیم:
یکی از کاربردهای ویژگی grid-area
تعیین نام برای عناصر grid می باشد. مثال زیر نشان می دهد که چگونه از این ویژگی برای نام گذاری عناصر استفاده شده و سپس توسط ویژگی grid-template-areas
ساختار صفحه مشخص می شود.
html
<div class="container"> <div class="item1">header</div> <div class="item2">sidebar</div> <div class="item3">main</div> <div class="item4">footer</div> </div>
css
.container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); grid-template-areas: "header header header header" "sidebar main main main" "sidebar main main main" "footer footer footer footer"; grid-gap: 10px; } .container > div { padding: 20px; text-align: center; font-family: "segoe ui"; } .item1 { grid-area: header; background-color: lightgreen; } .item2 { grid-area: sidebar; background-color: tomato; } .item3 { grid-area: main; background-color: dodgerblue; } .item4 { grid-area: footer; background-color: violet; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این ویژگی پشتیبانی می کنند.