Belajar CSS Part 9: Flexbox & Grid Layout Lanjutan

by

Setelah mempelajari CSS Transitions & Animations di Part 8, sekarang kita akan melanjutkan dengan teknik lebih lanjut untuk layout dengan: Flexbox & Grid Layout.

Di Part 9 ini, kamu akan mempelajari:

  • Teknik lanjutan menggunakan Flexbox untuk layout yang lebih fleksibel
  • Cara menggunakan Grid Layout untuk desain yang lebih kompleks dan responsif
  • Tips dan trik untuk mengoptimalkan penggunaan Flexbox dan Grid pada proyek web

Lanjutan Flexbox: Lebih Fleksibel dengan Properti Flex

Pada Flexbox, kita sudah belajar cara menggunakan properti seperti justify-content dan align-items. Sekarang, kita akan menggali lebih dalam properti lanjutan untuk mengontrol layout dengan lebih fleksibel.

1. flex-wrap

Properti flex-wrap digunakan untuk menentukan apakah elemen dalam flex container akan dibungkus ke baris berikutnya jika ruang tidak cukup. 

.container {
  display: flex;
  flex-wrap: wrap;
}

Nilai flex-wrap

Nilai Fungsi
nowrap (Default) Tidak pindah baris
wrap Pindah ke baris berikutnya
wrap-reverse Pindah baris tapi urutan terbalik

Contoh HTML Lengkap: flex-wrap

<!DOCTYPE html>
<html>
<head>
  <title>Contoh flex-wrap</title>
</head>
<body>

  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>

</body>
</html>

Dengan menggunakan flex-wrap, elemen-elemen yang tidak cukup ruang untuk tampil di satu baris akan dipindahkan ke baris berikutnya.

2. align-self

Properti align-self digunakan untuk mengatur posisi elemen flex item secara individual pada sumbu vertikal. 

.item {
  align-self: center;
}
Nilai Fungsi
auto Mengikuti align-items
flex-start Atas
flex-end Bawah
center Tengah
stretch Memenuhi tinggi container

Contoh HTML Lengkap: align-self

<!DOCTYPE html>
<html>
<head>
  <title>Contoh align-self</title>
</head>
<body>

  <div class="container">
    <div class="item">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
  </div>

</body>
</html>

Hasilnya

Jika container tingginya 200px:


[1]   ← atas
   [2]   ← tengah
      [3]   ← bawah

Kesimpulan

  • align-items → mengatur SEMUA item
  • align-self → mengatur SATU item saja
  • Berguna untuk layout yang lebih fleksibel

Dengan align-self, kamu dapat mengubah posisi elemen individual dalam kontainer tanpa mempengaruhi elemen lainnya.

Lanjutan Grid Layout: Membuat Layout Kompleks dengan CSS Grid

CSS Grid memungkinkan kita untuk membuat layout dua dimensi yang lebih kompleks. Sekarang, kita akan mengeksplorasi teknik lebih lanjut untuk mengoptimalkan penggunaan CSS Grid.

1. grid-template-areas Lanjutan

Salah satu fitur menarik dari Grid adalah kemampuan untuk memberi nama pada area grid menggunakan grid-template-areas. Ini memungkinkan kita untuk lebih mudah mengontrol layout dan penempatan elemen. 


.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-gap: 20px;
}

Grid di atas berarti:


header  header  header
sidebar content content
footer  footer  footer

Artinya:

  • Header → 1 baris penuh (3 kolom)
  • Sidebar → 1 kolom kiri
  • Content → 2 kolom kanan
  • Footer → 1 baris penuh

Contoh HTML Lengkap: Grid Template Areas Lanjutan

<!DOCTYPE html>
<html>
<head>
  <title>Grid Template Areas</title>

</head>
<body>

  <div class="container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Main Content</div>
    <div class="footer">Footer</div>
  </div>

</body>
</html>

Dengan grid-template-areas, kamu dapat menata elemen-elemen dengan lebih intuitif, cukup memberi nama pada area, dan mengaturnya dalam grid.

2. grid-auto-rows dan grid-auto-columns

Ketika elemen dalam grid memiliki ukuran yang tidak tetap, kamu bisa mengatur grid-auto-rows dan grid-auto-columns untuk mendefinisikan ukuran baris dan kolom otomatis. 


.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

Penjelasan

grid-template-columns: repeat(3, 1fr);

Artinya:

  • Grid punya 3 kolom>
  • Masing-masing lebar sama

grid-auto-rows: 100px;

Artinya:

  • Jika grid membuat baris baru otomatis
  • Tinggi baris tersebut = 100px

Contoh HTML Lengkap: grid-auto-rows

<!DOCTYPE html>
<html>
<head>
  <title>grid-auto-rows</title>
</head>
<body>

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

</body>
</html>

Lihat Hasilnya

Karena kita hanya mengatur kolom (3 kolom):


1  2  3
4  5  6
7

Grid otomatis membuat baris baru untuk item ke-4, ke-7, dst.

Dan karena ada:

grid-auto-rows: 100px;

Semua baris otomatis tingginya 100px.

Properti ini memungkinkan grid untuk menyesuaikan ukuran kolom dan baris secara otomatis berdasarkan konten.

Contoh Penggunaan Flexbox & Grid Secara Bersama

Berikut adalah contoh layout yang menggabungkan Flexbox dan Grid untuk membuat layout responsif dan dinamis.

Menggabungkan Flexbox & Grid Bersamaan

Grid → mengatur layout utama (struktur besar halaman)
Flexbox → mengatur isi di dalam setiap bagian

Ini adalah kombinasi yang sangat umum di project modern.

Konsep Layout

Struktur halaman:

Header
Content + Sidebar
Footer
  • Grid → mengatur posisi header, content, sidebar, footer
  • Flexbox → mengatur isi di dalam header & content

Contoh HTML Lengkap: Flexbox + Grid Layout

<!DOCTYPE html>
<html>
<head>
  <title>Flexbox + Grid Layout</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  <div class="container">
    <div class="header">
      <div>Logo</div>
      <div>Menu</div>
    </div>

    <div class="content">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
      <div class="card">Card 4</div>
      <div class="card">Card 5</div>
      <div class="card">Card 6</div>
    </div>

    <div class="sidebar">
      Sidebar
    </div>

    <div class="footer">
      Footer
    </div>
  </div>

</body>
</html>

Desktop


Header
Content | Sidebar
Footer

Mobile


Header
Content
Sidebar
Footer

Dalam contoh ini, kita menggunakan grid-template-areas untuk struktur layout dasar, dan di dalam .main-content kita menggunakan Flexbox untuk membuat kolom yang fleksibel.

Tips Lanjutan: Mengoptimalkan Layout Flexbox & Grid

  • Gunakan flex-shrink dan flex-grow dengan bijak untuk mengontrol ukuran elemen dalam Flexbox
  • Manfaatkan grid-template-areas untuk layout yang lebih terstruktur dan mudah dibaca
  • Gunakan grid-template-columns dan grid-template-rows untuk menyesuaikan ukuran grid berdasarkan kebutuhan
  • Perhatikan kompatibilitas antara Flexbox dan Grid di berbagai browser, meskipun kedua teknik ini sudah sangat didukung di hampir semua browser modern

Kesalahan Umum dalam Flexbox & Grid

  • Melupakan untuk menambahkan flex-wrap ketika elemen flex item tidak cukup ruang
  • Menempatkan elemen-elemen yang tidak terkait dalam satu container grid tanpa memperhatikan struktur yang baik
  • Over-complicating layout dengan terlalu banyak nested grids atau flex containers

Ringkasan CSS Part 9

  • Flexbox memberikan kontrol yang lebih fleksibel atas layout satu dimensi, sementara Grid menawarkan kontrol lebih dalam pada layout dua dimensi
  • Gunakan flex-wrap, align-self, dan grid-template-areas untuk kontrol yang lebih baik dalam desain responsif
  • Flexbox dan Grid dapat digunakan bersama-sama untuk membuat layout yang dinamis dan responsif

Lanjutan Materi

Di CSS Part 10, kita akan membahas:

  • Bagaimana mengoptimalkan layout untuk berbagai ukuran layar dan perangkat dengan teknik responsif lanjutan

Leave a Comment

Responsive — 100%