CSS – آیتم شبکه (Grid Item)

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

یک کانتینر شبکه شامل آیتم‌های شبکه‌ای است.

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

خاصیت grid-column

خاصیت grid-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 است.

مثال‌ها

آیتم “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-area می‌تواند برای اختصاص نام به آیتم‌های شبکه‌ای استفاده شود.

آیتم‌های نام‌گذاری‌شده را می‌توان در خاصیت grid-template-areas کانتینر شبکه استفاده کرد.

مثال

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

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

طراحی ردیف‌ها

برای تعریف دو ردیف، ستون‌های ردیف دوم را در داخل مجموعه‌ای دیگر از آپاستروف‌ها تعریف کنید.

مثال

آیتم “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';
}

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

شبکه CSS به ما این امکان را می‌دهد که آیتم‌ها را در هر مکانی که بخواهیم قرار دهیم.

اولین آیتم در کد 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; }
}

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.