Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Menempatkan Item Spesifik: Menguasai Grid-Column dan Grid-Row

Dalam sistem Grid, setiap kolom dan baris dipisahkan oleh garis yang diberi nomor. Garis ini dimulai dari angka 1. Jika Anda memiliki 3 kolom, maka Anda memiliki 4 garis vertikal.

1. Memahami Jalur Garis

Untuk menempatkan elemen, kita menggunakan sintaks: awal / akhir.

• grid-column: Menentukan posisi horizontal.

• grid-row: Menentukan posisi vertikal.

Contoh:

.item { grid-column: 1 / 3; /* Mulai dari garis 1, berhenti di garis 3 (melintasi 2 kolom) */ grid-row: 2 / 4; /* Mulai dari baris 2, berhenti di baris 4 (melintasi 2 baris) */
}

2. Menggunakan Kata Kunci span

Jika Anda malas menghitung nomor garis akhir, Anda bisa menggunakan span. Ini memberi tahu browser seberapa banyak kolom/baris yang ingin dilewati.

• grid-column: 1 / span 2; (Mulai di garis 1, lalu bentangkan sebanyak 2 kolom).

• grid-row: span 3; (Bentangkan sebanyak 3 baris dari posisi otomatisnya).

Tutorial: Membuat Tata Letak Galeri "Featured"

Mari kita buat layout kartu berita untuk SatuMedia di mana berita utama (Headline) berukuran lebih besar dan membentang di dua kolom sekaligus.

Struktur HTML

<div class="news-grid"> <div class="item headline">Headline Newsdiv> <div class="item">Berita 2div> <div class="item">Berita 3div> <div class="item">Berita 4div>
div>

Kode CSS

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 kolom sama rata */ gap: 15px;
} .headline { /* Headline mulai di kolom 1 dan membentang hingga kolom 3 */ grid-column: 1 / 3; /* Headline juga membentang 2 baris ke bawah */ grid-row: 1 / 3; background-color: #3498db; min-height: 300px;
}  .item { background-color: #ecf0f1; padding: 20px; border: 1px solid #ddd;
}

3. Nilai Negatif untuk Garis Akhir

Ada trik rahasia di CSS Grid: angka -1 selalu merujuk pada garis paling akhir di Grid, berapapun jumlah kolomnya.

• grid-column: 1 / -1; -> Elemen akan selalu membentang dari ujung kiri ke ujung kanan layar, sangat berguna untuk Header atau Footer.

Tips Pro untuk Developer

1. Overlapping (Tumpang Tindih): Berbeda dengan elemen blok biasa, dua elemen Grid bisa menempati sel yang sama. Gunakan z-index unt uk mengatur mana yang berada di atas. Ini sangat keren untuk membuat teks di atas gambar tanpa position: absolute.

2. Shorthand: grid-column adalah gabungan dari grid-column-start dan grid-column-end. Gunakan shorthand untuk menjaga kode tetap ringkas.

3. Garis Bernama: Anda bahkan bisa memberi nama pada garis grid (misal: [start] 1fr [end]) untuk membuat penempatan elemen menjadi lebih deskriptif, namun penggunaan angka tetap yang paling populer karena simpel.