11-05-2021، 9:24
ویژگی 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
با استفاده از ویژگی 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;
}