عناصر فرزند (Items)

container شامل موارد گرید است.

به طور پیش فرض، یک کانتینر برای هر ستون در یک ردیف یک item گرید دارد، اما می توانید آیتم های شبکه را به طوری که ستون های متعدد و / یا ردیف ها را می بندند طراحی کرد.

ویژگی grid-column

خصوصیات grid-column مشخص کننده کدام ستون (ها) برای قرار دادن یک item است می باشد.

شما تعریف می کنید که کجا شروع می شود و چه جایی آیتم پایان می یابد.

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

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

"item1" را در خط 1 شروع کنید و در خط 5 به پایان برسید:

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

شروع "item1" در ستون 1 و سه ستون را شروع کنید:

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

شروع "item2" را روی ستون 2 و سه ستون را انجام دهید:

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

ویژگی grid-row

ویژگی grid-row در کدام ردیف یک آیتم را تعریف می کند.

شما تعریف می کنید که کجا شروع می شود و کجا آیتم پایان می یابد.

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

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

"item1" را در خط ردیف 1 شروع کنید و در خط ردیف 4 به پایان برسید.

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

"item1" را در ردیف 1 شروع کنید و فاصله 2 ردیف:

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

ویژگی grid-area

خصوصیات grid-area را می توان به عنوان یک ویژگی مختصر برای آغاز grid-row-start, grid-column-start, grid-row-end and the grid-column-end. استفاده کرد

"item8" را از خط ردیف 1 و ستون خط 2 شروع کنید و به خط 5 سطر و ستون 6 پایان دهید:

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

"item8" را در سطر خط 2 و ستون خط 1 شروع کنید و فاصله 2 ردیف و 3 ستون:

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

نام آیتم های grid

خصوصیات grid-areaهمچنین می تواند برای اختصاص نام به آیتم های grid مورد استفاده قرار گیرد

به نام های شبکه ای می توان به وسیله ی grid-template-areasکانتینر شبکه اشاره کرد.

Item1 نام "myArea" را می گیرد و تمام پنج ستون را در یک طرح شبکه پنج ستون تقسیم می کند:

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

هر ردیف توسط ('') تعریف شده است.

ستون ها در هر ردیف در داخل apostrophes تعریف می شوند که توسط یک فضای خالی جدا می شوند.

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

برای تعریف دو ردیف، ستون ردیف دوم را در مجموعه دیگری از apostrophes تعریف کنید:

.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';
} 

محل قرارگیری آیتم ها

طرح بندی گرید ما را قادر می سازد که اقلام را هر جا که دوست داریم قرار دهیم.

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

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 3 / 4; }
  .item3 { grid-area: 2 / 1 / 2 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 3 / 2; }
  .item6 { grid-area: 2 / 3 / 2 / 4; }
}