Eksperimen CSS - 02-1 grid layout
Download as PPTX, PDF1 like724 views
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.
![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).](https://image.slidesharecdn.com/01gridlayout-150429231859-conversion-gate01/85/Eksperimen-CSS-02-1-grid-layout-7-320.jpg)
![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)/](https://image.slidesharecdn.com/01gridlayout-150429231859-conversion-gate01/85/Eksperimen-CSS-02-1-grid-layout-8-320.jpg)
![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](https://image.slidesharecdn.com/01gridlayout-150429231859-conversion-gate01/85/Eksperimen-CSS-02-1-grid-layout-9-320.jpg)
Eksperimen CSS - 02-1 grid layout
- 1. Grid Layout Eksperimen CSS Kuliahkita - Georgius Rinaldo [email protected]
- 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