+- انجمن های تخصصی فلش خور (http://www.flashkhor.com/forum)
+-- انجمن: رایانه (http://www.flashkhor.com/forum/forumdisplay.php?fid=27)
+--- انجمن: آموزش رایانه و اینترنت (http://www.flashkhor.com/forum/forumdisplay.php?fid=60)
+--- موضوع: آموزش ویژگی grid-area در CSS (/showthread.php?tid=296867)
آموزش ویژگی grid-area در CSS - Mohlek - 11-05-2021
ویژگی 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;
}