آیتم‌های Grid

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

مشاهدهٔ نتیجه »

Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
۱مقدمه Grid
۲نگه‌دارنده Grid
۳آیتم‌های Grid
مثال‌ها
مرجع‌ها

عناصر فرزند (آیتم‌ها)

یک نگه‌دارنده شبکه دارای آیتم‌های شبکه است.[۱]

به صورت پیش‌فرض، یک نگه‌دارنده، یک آیتم شبکه برای هر ستون، در هر سطر دارد، اما می‌توانید آیتم‌های شبکه را استایل دهی کنید تا آنها چندین ستون یا سطر را پوشش دهند.

ویژگی grid-column

ویژگی grid-columngrid-column تعیین می‌کند که یک آیتم باید در کدام ستون(ها) قرار بگیرد.

محلی که آیتم‌ها از آنجا آغاز، و به اتمام خواهند رسید را شما مشخص می‌کنید.

نکته: ویژگی grid-column یک ویژگی مختصر برای ویژگی‌های grid-column-start و grid-column-end است.

برای قرار دادن یک آیتم، می‌توانید از شماره خط، یا کلمه کلیدی "span" استفاده کنید تا تعداد ستون‌هایی که آیتم پوشش خواهد داد را مشخص کنید.

مثال

تعیین آغاز "item1" از ستون ۱ و اتمام آن قبل از ستون ۵ :

.item1 {
  grid-column: 1 / 5;
}


مثال

تعیین آغاز "item1" از ستون ۱ و پوشاندن سه ستون :

.item1 {
  grid-column: 1 / span 3;
}


مثال

تعیین آغاز "item2" از ستون ۲ و پوشاندن سه ستون :

.item2 {
  grid-column: 2 / span 3;
}


ویژگی grid-row

ویژگی grid-row سطری که آیتم می‌بایست در آن قرار بگیرد را تعیین می‌کند.

محلی که آیتم آغاز خواهد شد، و محلی که آیتم به پایان خواهد رسید را شما مشخص می‌کنید.

توجه: ویژگی grid-row یک ویژگی مختصر برای ویژگی‌های grid-row-start و grid-row-end است.

برای قرار دادن یک آیتم، می‌بایست از شماره خط استفاده کنید، یا از کلمه کلیدی "span" برای تعریف سطرهایی که آیتم پوشش خواهد داد استفاده کنید:

مثال

تعیین آغاز "item1" روی خط ۱ و پایان آن روی خط ۴ :

.item1 {
  grid-row: 1 / 4;
}


مثال

تعیین آغاز "item1" روی خط ۱ و پوشاندن دو سطر :

.item1 {
  grid-row: 1 / span 2;
}


ویژگی grid-area

ویژگی grid-area می‌تواند به عنوان یک ویژگی مختصر برای ویژگی‌های grid-row-start ,grid-column-start ,grid-row-end و grid-column-end استفاده شود.

مثال

تعیین آغاز "item8" روی خط ۱ و ستون ۲، و پایان آن روی خط ۵ و ستون ۶ :

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}


مثال

تعیین آغاز "item8" روی خط ۲ و ستون ۱، و پوشاندن دو سطر و سه ستون :

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}


نام گذاری آیتم‌های Grid

ویژگی grid-areaمی‌تواند برای تعیین نام آیتم‌های grid استفاده شود.

می توان توسط ویژگی grid-template-areas مربوط به نگه‌دارنده شبکه، به آیتم‌های نام‌گذاری شده شبکه اشاره کرد:

مثال

نام‌گذاری item1 به “myArea” و پوشاندن تمام ۵ ستون در چیدمان grid پنج ستونه :

1 .item1 {
2   grid-area: myArea;
3 }
4 .grid-container {
5   grid-template-areas: 'myArea myArea myArea myArea myArea';
6 }


هر سطر با آپستروف (' ') تعریف می‌شود.

ستون‌های هر سطر نیز درون آپستروف ' ' تعریف می‌شوند که با یک فاصله از یک دیگر جدا می‌شوند.

نکته: علامت نقطه . نشان دهنده یک آیتم شبکه بدون نام است.

مثال

اجازه به "myArea" برای پوشاندن دو ستون در یک چیدمان شبکه پنج ستونه (علامت . نشان دهنده آیتم‌های بدون نام است):

1 .item1 {
2   grid-area: myArea;
3 }
4 .grid-container {
5   grid-template-areas: 'myArea myArea . . .';
6 }


مثال

برای تعریف دو سطر، ستون دومین سطر را درون یک مجموعه دیگر از آپستروف ' ' تعریف کنید:

1 .grid-container {
2   grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
3 }


مثال

نام‌گذاری تمام آیتم‌ها، و ساخت یک الگوی آماده ‌برای ‌استفاده :

 1 .item1 { grid-area: header; }
 2 .item2 { grid-area: menu; }
 3 .item3 { grid-area: main; }
 4 .item4 { grid-area: right; }
 5 .item5 { grid-area: footer; }
 6 
 7 .grid-container {
 8   grid-template-areas:
 9     'header header header header header header'
10     'menu main main main right right'
11     'menu footer footer footer footer footer';
12 }


ترتیب قرارگیری آیتم‌ها

چیدمان شبکه به ما اجازه می‌دهد که آیتم‌ها را هر جا که دوست داریم موقعیت دهی کنیم.

اولین آیتم در کد HTML الزاماً نباید به عنوان اولین آیتم در شبکه نمایش داده شود.
مثال
1 .item1 { grid-area: 1 / 3 / 2 / 4; }
2 .item2 { grid-area: 2 / 3 / 3 / 4; }
3 .item3 { grid-area: 1 / 1 / 2 / 2; }
4 .item4 { grid-area: 1 / 2 / 2 / 3; }
5 .item5 { grid-area: 2 / 1 / 3 / 2; }
6 .item6 { grid-area: 2 / 2 / 3 / 3; }


می‌توانید ترتیب قرارگیری را با استفاده از media queryها، برای اندازه صفحه‌های خاص دوباره تنظیم کنید:

مثال
1 @media only screen and (max-width: 500px) {
2   .item1 { grid-area: 1 / span 3 / 2 / 4; }
3   .item2 { grid-area: 3 / 3 / 4 / 4; }
4   .item3 { grid-area: 2 / 1 / 3 / 2; }
5   .item4 { grid-area: 2 / 2 / span 2 / 3; }
6   .item5 { grid-area: 3 / 1 / 4 / 2; }
7   .item6 { grid-area: 2 / 3 / 3 / 4; }
8 }



منابع آموزشی