پروژه شبکهبندی CSS
- صفحه قبلی محیط شبکهبندی CSS
- صفحه بعدی مثال CSS
داخل پروجیکٹ (پروجیکٹ)
گرڈ کنٹینر گرڈ پروجیکٹوں کا محتوا رکھتا ہے.
مقصد سے، کنٹینر ہر سارے کالن میں ہر سارے کیوائن کا ایک گرڈ پروجیکٹ رکھتا ہے، لیکن آپ گرڈ پروجیکٹ کی کسوتی کا استعمال کرسکتا ہیں تاکہ وہ کئی کالنوں اور/یا کیوائنوں تک پھیلا رکھی جاسکے.
grid-column کیوئنسی:
grid-column ایسی کیوئنسی جو پروجیکٹ کو کس کالن میں رکھنا چاہئے اس کا تعریف کرتی ہے.
شما میتوانید موقعیت شروع و پایان پروژه را تعریف کنید.
توضیح:grid-column grid-column-start اور grid-column-end کی کیوئنسی کی فوجی.
کسی کا پروجیکٹ رکھنا چاہئے تو سائز نمبروں (line numbers) کا استعمال کرسکتا ہے یا اس پروجیکٹ کو کتنے کالنوں تک پھیلا رکھنا چاہئے اس کے لئے اس کا استعمال کرسکتا ہے "span" کی کلیدی فوجی.
مثال
مجال_مي از ردیف اول شروع شده و قبل از ردیف پنجم پایان مییابد:
.item1 {
grid-column: 1 / 5;
}
مثال
مجال_مي از ردیف اول شروع شده و 3 ستون را پوشش میدهد:
.item1 {
grid-column: 1 / span 3;
}
مثال
مجال_مي از ردیف دوم شروع شده و 3 ستون را پوشش میدهد:
.item2 {
grid-column: 2 / span 3;
}
ویژگی grid-row:
grid-row این ویژگی تعیین میکند که پروژه در کدام ردیف قرار میگیرد.
شما میتوانید موقعیت شروع و پایان پروژه را تعریف کنید.
توضیح:grid-row این ویژگی یک کوتاهنویسی از ویژگیهای grid-row-start و grid-row-end است.
برای قرار دادن پروژه، میتوانید به شماره ردیف اشاره کنید یا از کلمه کلیدی 'span' برای تعیین تعداد ردیفهایی که پروژه باید پوشش دهد استفاده کنید:
مثال
مجال_مي از row-line 1 شروع شده و در row-line 4 پایان مییابد:
.item1 {
grid-row: 1 / 4;
}
مثال
مجال_مي از ردیف اول شروع شده و 2 ردیف را پوشش میدهد:
.item1 {
grid-row: 1 / span 2;
}
ویژگی grid-area
grid-area این ویژگی میتواند به عنوان ویژگی کوتاهنویسی grid-row-start، grid-column-start، grid-row-end و grid-column-end استفاده شود.
مثال
مجال_مي از row-line 1 و column-line 2 شروع شده و در row-line 5 و column line 6 پایان مییابد:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
مثال
مجال_مي از خط row-line 2 و column-line شروع شده و 2 ردیف و 3 ستون را پوشش میدهد:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
نامگذاری پروژههای شبکه
grid-area این ویژگیها نیز میتوانند برای تخصیص نام به پروژههای شبکه استفاده شوند.
از طریق جعبه شبکهای میتوان grid-template-areas برای اشاره به پروژههای نامگذاری شده استفاده میشود.
مثال
نام item1 'مجال_مي' است، و بر روی همه پنج ستون شبکهای پنج ستون را پوشش میدهد:
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'مجال_مي_مجال_مجال_مجال';
}
هر سطر توسط کلمات مقدمهای (' ') تعریف شده است.
ستونهای هر سطر در کلمات مقدمهای تعریف شدهاند و با فاصله جدا میشوند.
توضیح:نقطهها نماینده پروژههای شبکه بدون نام هستند.
مثال
برای اینکه 'myArea' از دو ردیف در طرح شبکه پنج ستون عبور کند (نقطهها نماینده پروژههای بدون نام هستند):
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
برای تعریف دو ردیف، در یک مجموعه دیگر از کلمات مقدمهای ردیف دوم را تعریف کنید:
مثال
برای اینکه 'item1' از دو ردیف و دو ستون عبور کند:
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}
مثال
تمام پروژهها را نامگذاری کنید و یک قالب وب قابل استفاده در هر زمانی ایجاد کنید:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}
ترتیب پروژهها
طرح شبکه به ما اجازه میدهد تا پروژهها را در هر مکانی که دوست داریم قرار دهیم.
در کد HTML اولین مورد لزوماً نباید به عنوان اولین مورد در شبکه نمایش داده شود.
مثال
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
آپ میتوانید از طریق استفاده از جستجوی رسانهای ترتیب برخی از اندازههای صفحه نمایش را تغییر دهید:
مثال
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
}
- صفحه قبلی محیط شبکهبندی CSS
- صفحه بعدی مثال CSS
