021-20483015

Item های گرید در CSS

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

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

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

ویژگی grid-column

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

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

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

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

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

ویژگی grid-column
.item1 {
  grid-column: 1 / 5;
}
مشاهده مثال

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

grid-column
.item1 {
  grid-column: 1 / span 3;
}
مشاهده مثال

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

grid-column
.item2 {
  grid-column: 2 / span 3;
}
مشاهده مثال

ویژگی grid-row

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

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

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

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

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

grid-row
.item1 {
  grid-row: 1 / 4;
}
مشاهده مثال

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

grid-row
.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 پایان دهید:

grid-area
.item1 {
  grid-area: 1 / 2 / 5 / 6;
}
مشاهده مثال

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

grid-area
.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; }
}
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط