Item Grid CSS

1
2
3
4
5

Coba Sendiri

Elemen anak (proyek)

Kontainer grid mengandung item grid.

Secara default, kontainer memiliki item grid di setiap kolom setiap baris, tetapi Anda dapat menyetel gaya item grid untuk melintasi beberapa kolom dan/atau baris.

Atribut grid-column:

grid-column Atribut ini menentukan tempat proyek akan ditempatkan di kolom mana.

Anda dapat menentukan posisi awal dan akhir dari item.

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

Keterangan:grid-column Atribut adalah singkatan dari atribut grid-column-start dan grid-column-end.

Untuk menempatkan proyek yang spesifik, Anda dapat mengutip nomor baris (line numbers) atau menggunakan kata kunci "span" untuk menentukan berapa banyak kolom yang akan dijatuhi proyek ini.

Contoh

Membuat "item1" mulai dari kolom ke-1 dan berakhir sebelum kolom ke-5:

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

Coba Sendiri

Contoh

Membuat "item1" mulai dari kolom ke-1 dan melintasi 3 kolom:

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

Coba Sendiri

Contoh

Membuat "item2" mulai dari kolom ke-2 dan melintasi 3 kolom:

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

Coba Sendiri

Properti grid-row:

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

Anda dapat menentukan posisi awal dan akhir dari item.

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

Keterangan:grid-row Properti ini adalah singkatan bagi properti grid-row-start dan grid-row-end.

Untuk menempatkan item, Anda dapat mengutip nomor baris, atau menggunakan kata kunci "span" untuk menentukan berapa banyak baris yang akan dilintasi oleh item ini:

Contoh

Membuat "item1" mulai dari garis baris 1 dan berakhir di garis baris 4:

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

Coba Sendiri

Contoh

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

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

Coba Sendiri

Properti grid-area

grid-area Properti ini dapat digunakan sebagai singkatan bagi properti 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

Contoh

Membuat "item8" mulai dari garis baris 1 dan garis kolom 2, berakhir di garis baris 5 dan garis kolom 6:

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

Coba Sendiri

Contoh

Membuat "item8" mulai dari garis baris 2 dan garis kolom mulai, dan melintasi 2 baris dan 3 kolom:

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

Coba Sendiri

Item grid yang diidentifikasi dengan nama

grid-area Properti ini juga dapat digunakan untuk menetapkan nama bagi item grid.

Header
Menu
Main
Right
Footer

dapat digunakan melalui wadah grid: grid-template-areas properti untuk merujuk kepada item grid yang diidentifikasi dengan nama.

Contoh

Nama item1 adalah "myArea" dan melintasi seluruh lima kolom tata letak grid:

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

Coba Sendiri

Setiap baris ditentukan dengan tanda kutip (')

Kolom di setiap baris ditentukan di dalam tanda kutip dan dipisahkan dengan spasi.

Keterangan:Titik merah muda menunjukkan item grid tanpa nama.

Contoh

Biarkan 'myArea' melintasi dua kolom di tiga baris layout grid (titik merah muda menunjukkan item tanpa nama):

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

Coba Sendiri

Untuk mendefinisikan dua baris, tentukan kolom kedua di dalam tanda kutip lain:

Contoh

Untuk membuat 'item1' melintasi dua kolom dan dua baris:

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

Coba Sendiri

Contoh

Beri nama semua item dan buat template halaman web yang siap digunakan:

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

Coba Sendiri

Urutan item

Layout grid memungkinkan kami menempatkan item di lokasi yang kita sukai.

Item pertama di kode HTML tidak harus ditampilkan sebagai item pertama di grid.

1
2
3
4
5
6

Contoh

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

Coba Sendiri

Anda dapat mengatur urutan ukuran layar beberapa dengan menggunakan media query:

Contoh

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

Coba Sendiri