پروژه شبکه CSS

1
2
3
4
5

آزمایش کنید

عناصر فرزند (پروژه‌ها)

محیط شبکه شامل عنصرهای شبکه‌ای است.

به طور پیش‌فرض، در هر ردیف و ستون از هر سمت یک عنصر شبکه‌ای وجود دارد، اما می‌توانید سبک عنصرهای شبکه‌ای را تنظیم کنید تا آن‌ها چندین ستون و/یا ردیف را پوشش دهند.

ویژگی grid-column:

grid-column ویژگی تعیین می‌کند که پروژه در کدام ستون قرار می‌گیرد.

موقعیت شروع و پایان پروژه را می‌توان تعریف کرد.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

هر ستون در هر ردیف در علامت نقل قول تعریف شده و با فاصله جدا می‌شود.grid-column ویژگی‌ها ویژگی‌های اختصاری grid-column-start و grid-column-end هستند.

برای قرار دادن یک پروژه خاص، می‌توانید از شماره‌های خط (line numbers) استفاده کنید یا از کلیدواژه "span" برای تعیین تعداد ستون‌هایی که پروژه باید از آن‌ها عبور کند، استفاده کنید.

مثال

موقعیت "item1" را از ستون 1 شروع کرده و قبل از ستون 5 پایان می‌یابد:

اجازه دهید که "myArea" دو ردیف از پنج ردیف شبکه‌ای را در پنج ردیف شبکه‌ای بپیماید (نقطه‌ها نماینده پروژه‌های بدون نام هستند):
  grid-column: 1 / 5;
}

آزمایش کنید

مثال

موقعیت "item1" را از ستون 1 شروع کرده و 3 ستون را پوشش می‌دهد:

اجازه دهید که "myArea" دو ردیف از پنج ردیف شبکه‌ای را در پنج ردیف شبکه‌ای بپیماید (نقطه‌ها نماینده پروژه‌های بدون نام هستند):
  grid-column: 1 / span 3;
}

آزمایش کنید

مثال

موقعیت "item2" را از ستون 2 شروع کرده و 3 ستون را پوشش می‌دهد:

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

آزمایش کنید

ویژگی grid-row:

grid-row این ویژگی تعیین می‌کند که پروژه در کدام خط قرار می‌گیرد.

موقعیت شروع و پایان پروژه را می‌توان تعریف کرد.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

هر ستون در هر ردیف در علامت نقل قول تعریف شده و با فاصله جدا می‌شود.grid-row این ویژگی یک شورتینگ برای grid-row-start و grid-row-end است.

برای قرار دادن پروژه‌ها، می‌توانید از شماره خطوط استفاده کنید یا از کلمه کلیدی "span" برای تعریف تعداد خطوطی که پروژه باید عبور کند استفاده کنید:

مثال

موقعیت "item1" را از خط row-line 1 شروع کرده و در خط row-line 4 پایان می‌یابد:

اجازه دهید که "myArea" دو ردیف از پنج ردیف شبکه‌ای را در پنج ردیف شبکه‌ای بپیماید (نقطه‌ها نماینده پروژه‌های بدون نام هستند):
  grid-row: 1 / 4;
}

آزمایش کنید

مثال

موقعیت "item1" را از خط 1 شروع کرده و 2 خط را پوشش می‌دهد:

اجازه دهید که "myArea" دو ردیف از پنج ردیف شبکه‌ای را در پنج ردیف شبکه‌ای بپیماید (نقطه‌ها نماینده پروژه‌های بدون نام هستند):
  grid-row: 1 / span 2;
}

آزمایش کنید

ویژگی grid-area

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

مثال

موقعیت "item8" را از خط row-line 1 و column-line 2 شروع کرده و در خط row-line 5 و column line 6 پایان می‌یابد:

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

آزمایش کنید

مثال

موقعیت "item8" را از خط row-line 2 و column-line شروع کرده و 2 خط و 3 ستون را پوشش می‌دهد:

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

آزمایش کنید

نام‌گذاری پروژه شبکه

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

سربرگ
منو
صفحه اصلی
سمت راست
پایین صفحه

از طریق جعبه شبکه‌ای می‌توان grid-template-areas برای اشاره به پروژه‌های نام‌گذاری شده استفاده می‌شود.

مثال

نام item1 "myArea" است و از تمام پنج ستون قالب شبکه‌ای عبور می‌کند:

اجازه دهید که "myArea" دو ردیف از پنج ردیف شبکه‌ای را در پنج ردیف شبکه‌ای بپیماید (نقطه‌ها نماینده پروژه‌های بدون نام هستند):
  .item1 {
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

آزمایش کنید

每行由撇号（' '）定义。

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

هر ستون در هر ردیف در علامت نقل قول تعریف شده و با فاصله جدا می‌شود.نکته:

مثال

نقطه‌ها نماینده پروژه‌های شبکه‌ای بدون نام هستند.

اجازه دهید که "myArea" دو ردیف از پنج ردیف شبکه‌ای را در پنج ردیف شبکه‌ای بپیماید (نقطه‌ها نماینده پروژه‌های بدون نام هستند):
  .item1 {
}
.grid-container {
  grid-area: myArea;
}

آزمایش کنید

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 نباید به عنوان اولین عنصر شبکه نمایش داده شود.

1
2
3
4
5
6

مثال

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

آزمایش کنید