ویژگی grid-template در CSS

grid-template property

ویژگی کوتاه نویسی grid-template در (گرید) CSS برای مشخص کردن ستون ها، ردیف ها و فضا در ساختار grid می باشد.

نحوه نوشتار

grid-template: none;
grid-template: 200px 1fr / 100px 1fr;
grid-template: 250px / 100px 100px 100px;
grid-template: "a a c" 100px
               "b b c" 100px
               "b b c" 100px / 1fr 1fr 1fr;

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas;

مقادیر

none

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

grid-template-columns / grid-template-rows

مقادیرِ مربوط به دو ویژگی grid-template-columns و grid-template-rows استفاده می شود، که عبارتند از:

• grid-template-rows

  • max-content:

    اندازه ردیف را مطابق با بیشترین اندازه محتوا مشخص می کند.

  • min-content:

    اندازه ردیف را مطابق با کمترین اندازه محتوا مشخص می کند.

  • length:

    اندازه ردیف را برحسب مقادیر ثابت و با واحدهای اندازه CSS مشخص می کند. (px, rem, em)

• grid-template-columns

  • max-content:

    اندازه ستون را مطابق با بیشترین اندازه محتوا مشخص می کند.

  • min-content:

    اندازه ستون را مطابق با کمترین اندازه محتوا مشخص می کند.

  • length:

    اندازه ستون را برحسب مقادیر ثابت و با واحدهای اندازه CSS مشخص می کند. (px, rem, em)

grid-template-areas

مقادیرِ مربوط به ویژگی grid-template-areas مورد استفاده قرار می گیرد:

• نام آیتم

رشته متوالی از کاراکترهایی که ردیف ها و ستون هایی که قرار است نمایش داده شوند را نمایندگی می کنند.

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

html

<div class="container">
   <div class="item1">a</div>
   <div class="item2">b</div>
   <div class="item3">c</div>
   <div class="item4">d</div>
   <div class="item5">e</div>
   <div class="item6">f</div>
</div>

css

.container {
    display: grid;
    grid-template:
       "a a a b b" 50px
       "a a a c ." 150px
       "d e e e f" 100px / 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 7px;
}
[class*="item"] {
    display: grid;
    place-content: center;
    color: #ffffff;
}
.item1 {
    grid-area: a;
    background-color: pink;
}
.item2 {
    grid-area: b;
    background-color: lightgreen;
}
.item3 {
    grid-area: c;
    background-color: lightskyblue;
}
.item4 {
    grid-area: d;
    background-color: lightslategrey;
}
.item5 {
    grid-area: e;
    background-color: lightseagreen;
}
.item6 {
    grid-area: f;
    background-color: lightsalmon;
}

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

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