项目网格 CSS

1
2
3
4
5

亲自试一试

Anak elemen (objek)

Container grid mengandungi objek grid.

Secara lalai, container mempunyai objek grid di setiap lajur setiap baris, tetapi anda boleh tetapkan gaya objek grid supaya mereka dapat melintasi beberapa lajur dan/atau baris.

Properti grid-column:

grid-column Properti ini menentukan tempat objek akan diletakkan di mana patah lajur.

Anda boleh menentukan lokasi awal dan akhir objek.

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

Lajur di setiap baris di definikan di dalam petanda kutip dan dipisahkan dengan ruang.grid-column Properti adalah singkatan bagi properti grid-column-start dan grid-column-end.

Jika perlu meletakkan objek tertentu, anda boleh merujuk nombor baris (line numbers) atau guna kata kunci "span" untuk menentukan berapa banyak lajur yang akan dijumpai objek itu.

实例

Membuat "item1" bermula dari lajur ke-1 dan berakhir sebelum lajur ke-5:

Jadikan 'myArea' melintasi dua lajur dan dua baris di tata letak grid (titik serupa mewakili item tanpa nama):
  grid-column: 1 / 5;
}

亲自试一试

实例

Membuat "item1" bermula dari lajur ke-1 dan melintasi 3 lajur:

Jadikan 'myArea' melintasi dua lajur dan dua baris di tata letak grid (titik serupa mewakili item tanpa nama):
  grid-column: 1 / span 3;
}

亲自试一试

实例

Membuat "item2" bermula dari lajur ke-2 dan melintasi 3 lajur:

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

亲自试一试

Properti grid-row:

grid-row Properti ini menentukan baris tempat objek akan ditempatkan.

Anda boleh menentukan lokasi awal dan akhir objek.

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

Lajur di setiap baris di definikan di dalam petanda kutip dan dipisahkan dengan ruang.grid-row Properti ini adalah properti singkatan bagi grid-row-start dan grid-row-end.

Untuk menempatkan objek, anda boleh merujuk kepada bilangan baris, atau menggunakan kata kunci "span" untuk menentukan berapa banyak baris objek akan melintasi:

实例

Membuat "item1" bermula dari row-line 1 dan berakhir di row-line 4:

Jadikan 'myArea' melintasi dua lajur dan dua baris di tata letak grid (titik serupa mewakili item tanpa nama):
  grid-row: 1 / 4;
}

亲自试一试

实例

Membuat "item1" bermula dari baris ke-1 dan melintasi 2 baris:

Jadikan 'myArea' melintasi dua lajur dan dua baris di tata letak grid (titik serupa mewakili item tanpa nama):
  grid-row: 1 / span 2;
}

亲自试一试

Properti grid-area

grid-area Properti ini boleh digunakan sebagai properti singkatan bagi grid-row-start, grid-column-start, grid-row-end dan grid-column-end.

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

实例

Membuat "item8" bermula dari row-line 1 dan column-line 2, dan berakhir di row-line 5 dan column line 6:

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

亲自试一试

实例

Membuat "item8" bermula dari row-line 2 dan column-line dan melintasi 2 baris dan 3 lajur:

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

亲自试一试

Item grid yang dijenamaikan

grid-area Properti ini juga boleh digunakan untuk menetapkan nama kepada item grid.

Header
Menu
Main
Right
Footer

boleh digunakan melalui penempatan wadah grid: grid-template-areas properti untuk merujuk kepada item grid yang dijenamaikan.

实例

Nama item1 adalah "myArea" dan melintasi seluruh lima lajur layout grid:

Jadikan 'myArea' melintasi dua lajur dan dua baris di tata letak grid (titik serupa mewakili item tanpa nama):
  .item1 {
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

亲自试一试

Setiap baris di definikan oleh petanda kutip (' ')

Setiap baris di definikan oleh petanda kutip (' ')

Lajur di setiap baris di definikan di dalam petanda kutip dan dipisahkan dengan ruang.Keterangan:

实例

Titik serupa mewakili item grid tanpa nama.

Jadikan 'myArea' melintasi dua lajur dan dua baris di tata letak grid (titik serupa mewakili item tanpa nama):
  .item1 {
}
.grid-container {
  grid-area: myArea;
}

亲自试一试

grid-template-areas: 'myArea myArea . . .';

实例

Jika ingin menentukan dua baris,definikan baris kedua di dalam kumpulan petanda kutip lain:

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

亲自试一试

实例

Nama semua item dan buat satu template laman web yang siap guna:

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

亲自试一试

Urutan item

Tata letak grid membolehkan kami meletakkan item di mana mana kita suka.

Item pertama di kod HTML tidak perlu dipaparkan sebagai item pertama di grid.

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

亲自试一试

Anda boleh mengatur urutan saiz skrin untuk urutkan semula beberapa item dengan menggunakan media query:

实例

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

亲自试一试