Pada tutorial sebelumnya dengan judul Tutorial Dasar CSS: Box Model dan Layouting, kita telah mengenal Flexbox, dan pada tutorial kali ini kita akan lebih mendalami lagi tentang Flexbox dan Grid.
Flexbox dan Grid adalah dua teknik tata letak yang powerfull dalam CSS yang memungkinkan kita untuk mendesain tampilan web yang lebih dinamis dan responsif. Kedua teknik ini memberikan cara yang lebih canggih untuk mengatur posisi, urutan, dan ukuran elemen-elemen dalam halaman web.
Flexbox adalah singkatan dari “Flexible Box“, yang bertujuan untuk menyederhanakan tata letak elemen di dalam wadah (container) yang kompleks dan kompleks. Ini terutama digunakan untuk mengatur tata letak dalam satu dimensi (entah itu horizontal atau vertikal), seperti baris atau kolom.
Grid adalah tata letak dua dimensi yang memungkinkan kita untuk mengatur elemen-elemen dalam baris dan kolom, sehingga menciptakan tata letak yang lebih kompleks dan fleksibel. Grid sangat cocok untuk pembuatan tata letak yang lebih kompleks, seperti tampilan halaman web dengan beberapa area yang berbeda.
Mengenal Flexbox
Flexbox memungkinkan kita untuk mengatur elemen dalam kontainer (wadah) dengan cara yang sangat fleksibel dan mudah. Ini sangat berguna ketika kita ingin mengatur elemen-elemen dalam satu dimensi, entah itu secara horizontal atau vertikal. Fitur utama Flexbox adalah kemampuannya untuk mendistribusikan ruang tersisa dengan cerdas antara elemen-elemen di dalamnya.
Cara menggunakannya cukup sederhana. kita cukup menetapkan properti display: flex; pada elemen induk yang ingin diatur menggunakan Flexbox. Kemudian, kita dapat menggunakan properti dan nilai lainnya untuk mengatur tata letak elemen di dalamnya.
Contoh penggunaan Flexbox untuk membuat tata letak baris:
1 2 3 4 5 6 7 8 9 10 | .container { display: flex; justify-content: space-between; align-items: center; } .item { flex: 1; padding: 10px; } |
Pada contoh di atas, display: flex; diterapkan pada .container untuk membuat tata letak menggunakan Flexbox. Properti justify-content mengatur distribusi ruang di sepanjang sumbu utama (horisontal dalam kasus ini), sedangkan align-items mengatur tata letak elemen di sepanjang sumbu silang (vertikal dalam kasus ini).
Membangun Layout dengan Flexbox
Flexbox sangat bermanfaat dalam membangun tata letak seperti tampilan baris berdampingan, tampilan baris tunggal yang terpusat, dan bahkan tampilan navigasi yang responsif. Kita dapat dengan mudah mengubah urutan dan ukuran elemen-elemen, serta mendistribusikan ruang secara fleksibel.
Misalnya, dalam navigasi responsif, kita dapat menggunakan Flexbox untuk mengatur elemen menu dengan baik, mengatur jarak di antara mereka, dan memastikan mereka tetap rapi bahkan pada perangkat dengan layar kecil.
Memahami Grid System
Grid adalah teknik yang lebih kuat untuk mengatur elemen dalam tata letak dua dimensi. Ini memungkinkan kita untuk membuat tata letak yang kompleks dengan lebih banyak kontrol terhadap baris dan kolom. Teknik ini sangat cocok untuk tampilan halaman web dengan beberapa area yang berbeda, seperti header, konten utama, dan sidebar.
Dalam Grid, kita menggunakan kontainer (wadah) sebagai grid induk. kita mendefinisikan baris dan kolom dalam grid dengan properti grid-template-rows dan grid-template-columns. Kita dapat mengatur elemen-elemen ke dalam grid dengan menggunakan properti grid-row dan grid-column.
Contoh penggunaan Grid untuk membuat tata letak kolom:
1 2 3 4 5 6 7 8 9 | .container { display: grid; grid-template-columns: 1fr 2fr; /* Dua kolom dengan lebar perbandingan 1:2 */ grid-gap: 20px; /* Jarak antar elemen */ } .item { padding: 10px; } |
Dalam contoh di atas, display: grid; diterapkan pada .container untuk membuat tata letak menggunakan Grid. Properti grid-template-columns mengatur jumlah dan lebar kolom dalam grid, sedangkan grid-gap mengatur jarak antara elemen-elemen.
Contoh Penerapan CSS Flexbox dan Grid pada Halaman Web
Setelah lebih memahami penerapan CSS Flexbox dan Grid, silahkah mengikuri beberapa langkah berikut ini:
Buat file HTML dengan nama latihan_css_007.html kemudian ketikkan kode HTML Berikut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contoh Halaman Web dengan Flexbox dan Grid</title> <link rel="stylesheet" href="assets/css/style_flexbox_grid.css"> </head> <body> <header> <h1>Halaman Web dengan Flexbox dan Grid</h1> <p>KelasRingan.Com</p> </header> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> <div class="grid-container"> <div class="grid-item">Grid Item 1</div> <div class="grid-item">Grid Item 2</div> <div class="grid-item">Grid Item 3</div> <div class="grid-item">Grid Item 4</div> <div class="grid-item">Grid Item 5</div> <div class="grid-item">Grid Item 6</div> </div> <footer> <p>Copyright © 2023 KelasRingan.Com</p> </footer> </body> </html> |
Buat file CSS dengan nama style_flexbox_grid.css kemudian ketikkan kode CSSBerikut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: white; text-align: center; padding: 10px; } .container { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px; max-width: 1200px; margin: 0 auto; } .item { flex: 1; min-width: 300px; margin: 10px; padding: 20px; background-color: #3498db; color: white; text-align: center; } .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; padding: 20px; max-width: 1200px; margin: 0 auto; } .grid-item { background-color: #e74c3c; color: white; padding: 20px; text-align: center; } footer { text-align: center; margin-top:20px; border-top: 1px solid #ebebeb; } |
Selanjutnya, ika kita jalankan file latihan_css_007.html pada web browser, hasilnya akan tampil seperti paga gambar berikut ini:
Dalam tutorial ini, kita telah memahami konsep Flexbox dan Grid, serta bagaimana menggunakannya dalam CSS untuk mengatur tata letak elemen-elemen dalam halaman web kita. Flexbox sangat berguna untuk mengatur tata letak dalam satu dimensi, sementara Grid memberikan fleksibilitas dalam mengatur tata letak dua dimensi. Dengan menguasai kedua teknik ini, kita akan memiliki alat yang kuat untuk merancang tampilan web yang dinamis, responsif, dan menarik.
Untuk mendapatkan daftar Tutorial CSS dari Dasar, silahkan mengunjungi Index Tutorial CSS dari Dasar: Belajar CSS Dari Dasar.