Dokumen ini menjelaskan tentang grid layout dalam pembuatan situs web, yang menata elemen dalam baris dan kolom untuk mencapai tampilan yang rapi. Penjelasan mencakup spesifikasi grid, implementasi HTML dan CSS, serta pengaturan spasi antar elemen untuk meningkatkan estetika. Contoh implementasi kolom berukuran berbeda dan pengaturan spasi luar juga disertakan untuk memberikan panduan praktis.

1. Grid Layout
Eksperimen CSS
Kuliahkita - Georgius Rinaldo
dodo@kuliahkita.com

2. Pendahuluan
Dalam sebuah situs, Kita sering melihat elemen-elemen ditempatkan di
tempat yang berbeda apakah menggunakan penuh, atau dibagi 2
kolom, dll.
Contoh:
Dibagi 3 kolom
Gabungan

3. Pendahuluan
Layout tampilan seperti ini yang membagi halaman menjadi kolom dan
situs dinamakan grid layout.
Layout ini sudah menjadi dasar dalam pembuatan situs sehingga
membuat situs tampak lebih tersusun rapi dan lebih sedap untuk
dipandang oleh pengguna.

4. Spesifikasi Grid Layout
Umumnya sebuah grid terdiri dari baris
(row) dan kolom (column).
Sebuah row bisa terdiri dari beberapa
column.
Row ini berfungsi sebagai penampung
(container) dari column yang ada
didalamnya sehingga teratur.
Row
Column
column Column
ColumnColumn Column
Column ColumnColumn

5. Spesifikasi Grid Layout
Selain terdiri dari baris dan kolom, hal lain yang perlu diperhatikan
adalah spasi antar elemennya baik itu antar baris maupun antar
kolom.
Tentunya kita tidak ingin membuat semua elemen terlalu rapat atau
dempet karena membuat layout menjadi buruk dan pengguna dapat
lelah melihat situs kita.

6. Implementasi - Grid (baris)
HTML
<div class="grid">
<!-- Lebarnya 100% -->
</div>
CSS
.grid {
margin: 0 0 20px 0;
}
.grid:after {
content: "";
display: table;
clear: both;
}
Baris untuk layout pada HTML diberi nama kelas “grid”.
Kemudian diberikan style untuk “membersihkan” elemen dengan :after
pada kelas grid seperti definisi di atas.

7. Implementasi - Grid (Kolom)
HTML
<div class="grid">
<!-- Lebarnya 100% -->
<div class="col-1-3">
Sidebar
</div>
<div class="col-2-3">
Konten Utama
</div>
</div>
CSS
[class*='col-'] {
float: left; // buat semua sebaris
min-height: 1px; // mencegah grid collapse
}
.col-1-3 {
width: 33.33%; // 1/3 bagian width
}
.col-2-3 {
width: 66.66%; // 2/3 bagian width
}
Diberikan kolom yang masing-masing akan memuat ⅓ dan ⅔ bagian
sebuah baris (jika dijumlah akan menjadi 1 atau 100% lebar).

8. Implementasi - Grid (Spasi)
HTML
<div class="grid">
<!-- Lebarnya 100% -->
<div class="col-1-3">
Sidebar
</div>
<div class="col-2-3">
Konten Utama
</div>
</div>
CSS
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[class*='col-'] {
padding-right: 20px;
}
[class*='col-']:last-of-type {
padding-right: 0;
}
Memberikan sedikit jarak pada semua kolom supaya lebih rapi, kecuali
jika kolom terakhir pada baris (last-of-type)/

9. Implementasi - Grid (Spasi - luar)
HTML
<div class="grid grid-pad">
<!-- Lebarnya 100% -->
<div class="col-1-3">
Sidebar
</div>
<div class="col-2-3">
Konten Utama
</div>
</div>
CSS
.grid-pad {
padding: 20px 0 20px 20px;
}
.grid-pad > [class*='col-']:last-of-type {
padding-right: 20px;
}
Memberi jarak pada penampung atau container yaitu kelas grid
dengan memberi kelas baru yaitu grid-pad

10. Implementasi - Grid (Kolom lain)
HTML
<div class="grid grid-pad">
<!-- Lebarnya 100% -->
<div class="col-1-3">
Sidebar
</div>
<div class="col-2-3">
Konten Utama
</div>
</div>
CSS
.col-1-2 {
width: 50%; // 1/2 bagian width
}
.col-1-4 {
width: 25%; // 1/4 bagian width
}
.col-1-8 {
width: 12.5%; // 1/8 bagian width
}
Mendefinisikan kolom berukuran lain yang membutuhkan ½ , ¼, dan ⅛
dari lebar layar.

11. Contoh Implementasi
Berikut ini contoh implementasi 2 baris (div dengan kelas grid) terpisah
dengan sebuah break dan implementasi kolom dalam masing-masing
baris.

12. Finalisasi
Setelah kerangka CSS dan HTML untuk grid layout dibuat, Anda bisa
mengubah dan menyesuaikannya sesuka Anda.
Misalkan spasi-nya, ukuran kolom, background, dll, baik itu di dalam
elemennya, maupun untuk kolom atau barisnya.
Contoh dapat dilihat pada Codepen KuliahKita