آیتم‌های 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 پنج ستونه :

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

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

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

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

مثال[ویرایش | ویرایش]

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

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
}

مثال[ویرایش | ویرایش]

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

.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 queryها، برای اندازه صفحه‌های خاص دوباره تنظیم کنید:

مثال
@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; }
}

منابع آموزشی[ویرایش]