٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش مورد شبکه CSS

عناصر کودک (موارد) یک ظرف شبکه شامل موارد شبکه است . به طور پیش فرض ، یک کانتینر در هر ردیف برای هر ستون یک مورد شبکه دارد ، اما می توانید موارد شبکه را طوری سبک کنید که چندین ستون و / یا ردیف…

محمد یوسفی

16 جولای 2021

عناصر کودک (موارد)

یک ظرف شبکه شامل موارد شبکه است .

به طور پیش فرض ، یک کانتینر در هر ردیف برای هر ستون یک مورد شبکه دارد ، اما می توانید موارد شبکه را طوری سبک کنید که چندین ستون و / یا ردیف داشته باشند.


ویژگی ستون شبکه:

grid-columnتعریف اموال که بر روی ستون (بازدید کنندگان) به جای آیتم استفاده کنید.

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

توجه: این grid-columnملک یک ویژگی مختصر برای the grid-column-startand the grid-column-endproperties است.

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

مثال

“آیتم 1” را از ستون 1 شروع کنید و قبل از ستون 5 پایان دهید:

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

مثال

“item1” را از ستون 1 شروع کرده و در 3 ستون قرار دهید:

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

مثال

“item2” را از ستون 2 شروع کرده و 3 ستون را باز کنید:

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

ویژگی ردیف شبکه:

grid-rowتعریف اموال که بر روی ردیف به جای آیتم استفاده کنید.

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

توجه: این grid-rowملک یک ویژگی مختصر برای the grid-row-startand the grid-row-endproperties است.

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

مثال

“آیتم 1” را از سطر 1 شروع کرده و در خط شماره 4 پایان دهید:

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

مثال

“item1” را از ردیف 1 شروع کنید و 2 ردیف را در آن قرار دهید:

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

املاک مساحت شبکه

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

مثال

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

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

مثال

“8” را از سطر 2 و ستون 1 شروع کنید و 2 ردیف و 3 ستون را باز کنید:

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

نام گذاری موارد شبکه

از این grid-areaویژگی می توان برای اختصاص نام به موارد شبکه نیز استفاده کرد.

با توجه به grid-template-areasخاصیت ظرف شبکه می توان به موارد شبکه ای اشاره کرد.

مثال

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

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

هر سطر توسط apostrophes تعریف می شود (“”)

ستونهای هر ردیف در داخل رسوبات تعریف شده و با فاصله از هم جدا شده اند.

توجه: علامت دوره یک مورد شبکه را بدون نام نشان می دهد.

مثال

اجازه دهید “myArea” دو ستون را در یک طرح شبکه پنج ستون قرار دهد (علائم دوره نشان دهنده موارد بدون نام است):

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

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

مثال

دهانه “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; }
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها