CSS - Susun Atur Grid: Panduan Pemula

Hai sana, super bintang desain web masa depan! Hari ini, kita akan melangkah ke dalam dunia menarik Susun Atur Grid CSS. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan ramah Anda, dan kita akan mengambil ini secara bertahap. Pada akhir tutorial ini, Anda akan menciptakan layout yang ramping dan responsif seperti seorang pro!

Apa Itu Susun Atur Grid?

Bayangkan Anda menata furniture di dalam sebuah kamar. Anda mungkin akan membagi ruang menjadi baris dan kolom untuk membantu mengatur segalanya secara rapi. Itu sebenarnya apa yang dilakukan Susun Atur Grid CSS untuk halaman web!

Susun Atur Grid CSS adalah alat yang kuat yang memungkinkan kita menciptakan layout dua dimensi di halaman web. Itu seperti memiliki grid tak terlihat di halaman web Anda tempat Anda dapat menempatkan konten tepat di tempat yang Anda inginkan. Keren, kan?

Elemen Grid

Sebelum kita mendalam, mari kenal beberapa istilah kunci:

1. Grid Container: Ini adalah elemen induk yang menahan semua item grid.
2. Grid Items: Ini adalah anak-anak dari grid container.
3. Grid Lines: Garis pemisah yang membentuk struktur grid.
4. Grid Tracks: Ruang antara garis grid (baris atau kolom).
5. Grid Cell: Persimpangan antara baris dan kolom.
6. Grid Area: Ruang persegi panjang yang dikelilingi empat garis grid.

Jangan khawatir jika ini terdengar membingungkan sekarang. Kita akan melihat mereka dalam aksi segera!

Properti Display Grid

Mari mulai dengan contoh sederhana. Katakanlah kita ingin menciptakan grid 3x3 dasar. Berikut cara kita melakukannya:

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}

.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}

mariuraikan ini:

1. Kita set display: grid; pada kontainer untuk mengaktifkan Susun Atur Grid.
2. grid-template-columns: auto auto auto; menciptakan tiga kolom dengan lebar yang sama.
3. Kita gayakan item grid untuk kepentingan visibility.

Voila! Anda baru saja menciptakan layout grid pertama Anda. Bagaimana yang menarik!

Baris dan Kolom Grid

Sekarang, mari kita lebih spesifik dengan baris dan kolom kita. Kita dapat menentukan ukuran yang tepat:

.grid-container {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 80px 200px;
}

Ini menciptakan grid dengan:

• Tiga kolom: 100px, 200px, dan 100px lebar
• Dua baris: 80px dan 200px tinggi

Anda juga dapat menggunakan unit yang berbeda seperti persen atau unit fr (bagian dari ruang yang tersedia):

.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
}

Ini menciptakan layout yang mirip, tetapi kolom akan mengubah ukurannya secara fluks berdasarkan ruang yang tersedia.

Grid Gap

kadang-kadang, Anda ingin ada ruang untuk nafas antara item grid Anda. Itu di mana grid-gap masuk:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}

Ini menambahkan jarak 10px antara semua baris dan kolom. Anda juga dapat mengatur jarak baris dan kolom secara terpisah:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 10px;
grid-column-gap: 20px;
}

Garis Grid CSS

Ingat garis grid yang kita bicarakan sebelumnya? Kita dapat menggunakan mereka untuk menempatkan item secara tepat:

<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 300px 100px;
gap: 10px;
}

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

.item2 {
grid-row: 2 / span 2;
}

.item3 {
grid-column: 2 / span 2;
}

.item4 {
grid-column: 4;
grid-row: 2;
}

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

Ini menciptakan layout yang kompleks dengan header yang melintang keseluruhan lebar, menu samping, area konten utama, sidebar kanan, dan footer. Mainakan nilai ini untuk melihat bagaimana mereka mempengaruhi layout!

Referensi Properti CSS Grid

Berikut adalah tabel praktis dari beberapa properti CSS Grid yang umum:

Properti	Deskripsi
display: grid;	Menentukan kontainer grid
grid-template-columns	Menentukan jumlah dan ukuran kolom
grid-template-rows	Menentukan jumlah dan ukuran baris
grid-gap	Menentukan jarak antara item grid
grid-column-start	Menentukan di mana item grid dimulai
grid-column-end	Menentukan di mana item grid berakhir
grid-row-start	Menentukan di mana item grid dimulai
grid-row-end	Menentukan di mana item grid berakhir
grid-area	Menentukan ukuran dan lokasi item grid

Dan itu saja! Anda baru saja mengambil langkah pertama ke dalam dunia menarik Susun Atur Grid CSS. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba layout dan properti yang berbeda. Sebelum Anda tahu, Anda akan menciptakan layout yang kompleks dan responsif dengan mudah.

Happy coding, para master grid masa depan!

Credits: Image by storyset