Pada tutorial sebelumnya, kita telah mempelajari cara memulai dengan Foundation. Sekarang, kita akan fokus pada salah satu fitur paling kuat dan mendasar dari Foundation: Grid System. Memahami sistem grid sangat penting karena merupakan tulang punggung dari tata letak responsif dalam Foundation.

Konsep Dasar Grid Foundation

Sistem grid Foundation adalah sistem tata letak berbasis 12 kolom yang fleksibel. Ini berarti lebar halaman dibagi menjadi 12 unit yang sama, dan Anda dapat menentukan berapa banyak unit yang akan ditempati oleh setiap elemen (cell) pada berbagai ukuran layar. Konsep ini memungkinkan Anda membuat tata letak yang menyesuaikan diri secara otomatis dengan ukuran layar yang berbeda (ponsel, tablet, desktop).

Komponen Utama Grid

1. .grid-container: Ini adalah wadah utama (container) untuk grid. Biasanya digunakan untuk mengatur lebar maksimum halaman dan memusatkan konten. Anda bisa memilih antara grid-container dengan lebar tetap atau grid-container fluid untuk lebar 100%.

   Contoh:

   Lebar Tetap:

   <pre><code class=”language-html”>&lt;div class=”grid-container”&gt;

   &lt;!– Konten grid akan masuk di sini –&gt;

   &lt;/div&gt;</code></pre>

   Lebar Penuh:

   <pre><code class=”language-html”>&lt;div class=”grid-container fluid”&gt;

   &lt;!– Konten grid akan masuk di sini –&gt;

   &lt;/div&gt;</code></pre>

2. .grid-x (Row): Elemen dengan kelas grid-x merepresentasikan sebuah baris (row). Di dalam baris ini, Anda akan menempatkan kolom-kolom (cells). Anda juga bisa menggunakan kelas turunan seperti grid-margin-x untuk menambahkan margin horizontal antar kolom atau grid-padding-x untuk menambahkan padding horizontal di dalam kolom.

   Contoh:

   <pre><code class=”language-html”>&lt;div class=”grid-x grid-margin-x”&gt;

   &lt;!– Kolom-kolom akan masuk di sini –&gt;

   &lt;/div&gt;</code></pre>

3. .cell (Column): Elemen dengan kelas cell merepresentasikan sebuah kolom. Anda dapat menentukan lebar kolom untuk berbagai ukuran layar menggunakan breakpoint Foundation (small, medium, large, xlarge, xxlarge). Sintaksnya adalah ukuran-breakpoint-jumlah-kolom. Misalnya, medium-6 berarti kolom ini akan memiliki lebar 6 dari 12 kolom pada layar berukuran medium ke atas. Jika Anda hanya menggunakan cell, kolom akan secara otomatis membagi ruang yang tersedia secara merata.

   Contoh:

   <pre><code class=”language-html”>&lt;div class=”grid-x grid-margin-x”&gt;

   &lt;div class=”cell small-12 medium-6 large-4″&gt;

   &lt;div class=”callout”&gt;Kolom 1&lt;/div&gt;

   &lt;/div&gt;

   &lt;div class=”cell small-12 medium-6 large-8″&gt;

   &lt;div class=”callout”&gt;Kolom 2&lt;/div&gt;

   &lt;/div&gt;

   &lt;/div&gt;</code></pre>

   Pada contoh di atas:

   • Pada layar kecil (small), kedua kolom akan mengambil lebar 12 kolom (penuh).
   • Pada layar medium (medium), kolom pertama akan mengambil 6 kolom dan kolom kedua 6 kolom.
   • Pada layar besar (large), kolom pertama akan mengambil 4 kolom dan kolom kedua 8 kolom.

Kelas Grid Tambahan yang Berguna

• Offsetting: Anda dapat menggunakan kelas offset untuk menggeser kolom ke kanan sebanyak jumlah kolom yang ditentukan. Contoh: medium-offset-2 akan menggeser kolom sebesar 2 kolom pada layar medium ke atas.
• Ordering: Anda dapat mengubah urutan tampilan kolom menggunakan kelas order. Contoh: large-order-2 akan membuat kolom ini tampil di urutan kedua pada layar besar.
• Alignment: Foundation menyediakan kelas untuk mengatur perataan vertikal dan horizontal kolom di dalam baris, seperti align-middle, align-center, align-spaced, dll.
• Nesting Grids: Anda dapat menempatkan grid lain di dalam sebuah cell untuk membuat tata letak yang lebih kompleks.

Contoh Penerapan

Berikut adalah contoh sederhana tata letak tiga kolom responsif:

<pre><code class=”language-html”>&lt;div class=”grid-container”&gt;

&lt;div class=”grid-x grid-margin-x”&gt;

&lt;div class=”cell small-12 medium-4″&gt;

&lt;div class=”callout”&gt;Kolom 1&lt;/div&gt;

&lt;/div&gt;

&lt;div class=”cell small-12 medium-4″&gt;

&lt;div class=”callout”&gt;Kolom 2&lt;/div&gt;

&lt;/div&gt;

&lt;div class=”cell small-12 medium-4″&gt;

&lt;div class=”callout”&gt;Kolom 3&lt;/div&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;/div&gt;</code></pre>

Pada contoh ini, pada layar kecil setiap kolom akan mengambil lebar penuh (12 kolom), sedangkan pada layar medium ke atas, setiap kolom akan mengambil lebar 4 kolom, sehingga membentuk tata letak tiga kolom yang rapi.

Kesimpulan

Memahami sistem grid Foundation adalah langkah krusial dalam membangun tata letak responsif. Dengan konsep 12 kolom yang fleksibel dan berbagai kelas utilitas yang disediakan, Anda dapat dengan mudah membuat struktur halaman web yang adaptif terhadap berbagai ukuran layar. Pada tutorial selanjutnya, kita akan membahas komponen-komponen UI dasar lainnya yang disediakan oleh Foundation. Jangan ragu untuk bereksperimen dengan berbagai kelas grid untuk melihat bagaimana mereka bekerja!