ویژگی grid-area در CSS

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