آموزش ویژگی grid-area در CSS

[Mohlek]

ویژگی grid-area در CSS
با استفاده از ویژگی grid-area در CSS میتوان هم یک نام را برای آیتم مشخص کرد ( نمونه در مثال شماره ۲ ) و هم بطور کلی میتوان ویژگی های زیر را که همگی مربوط به آیتم های یک گرید یا Grid می باشند، بصورت خلاصه نوشت :

grid-row-start | سطر شروع آیتم
grid-column-start | ستون شروع آیتم
grid-row-end | سطر پایان دهنده آیتم
grid-column-end | ستون پایان دهنده آیتم
برای اینکه بهتر متوجه شوید ، لاین یا خط یا نقطه شروع و پایان یک آیتم به چه شکل می باشد لطفا به تصویر زیر توجه نمایید :



مثال شماره ۱ : آیتم شماره ۱ از سطر دوم ( ۲ ) و ستون اول ( ۱ ) شروع میشود، و ۲ تا از سطرها و ۳ تا از ستون هارو باخودش ادغام میکنه.

.item-1 {
grid-area: 2 / 1 / span 2 / span 3;
}
1
2
3
.item-1 {
grid-area: 2 / 1 / span 2 / span 3;
}
امتحان کنید

مثال شماره ۲ : تعریف یک نام دلخواه برای ناحیه یا Area ، و اتصال آن به ویژگی grid-template-areas

کد:

.My-Container {
  display: grid;
  grid-template-areas: 'free-learn free-learn free-learn free-learn free-learn';
}

.item-1 {
  grid-area: free-learn;
}
1
2
3
4
5
6
7
8
.My-Container {
  display: grid;
  grid-template-areas: 'free-learn free-learn free-learn free-learn free-learn';
}

.item-1 {
  grid-area: free-learn;
}