1. Apa itu Layout?
Layout adalah bagaimana elemen-elemen halaman web ditempatkan dan diorganisir. Ini termasuk posisi elemen seperti header, sidebar, konten utama, dan footer. Layout dapat ditentukan dengan menggunakan CSS (Cascading Style Sheets) atau dengan menggunakan kode HTML (Hypertext Markup Language) yang ditulis dengan baik. Layout yang baik dapat membuat halaman web lebih mudah dilihat dan digunakan, serta meningkatkan kesan keseluruhan pada pengunjung.
2. Apa itu Grid Layout?
Grid adalah sistem yang digunakan untuk mengorganisir elemen-elemen halaman web secara geometris. Ini terdiri dari baris dan kolom yang dapat digunakan untuk menempatkan elemen seperti teks, gambar, atau form. Grid dapat ditentukan menggunakan CSS (Cascading Style Sheets) atau menggunakan framework seperti Bootstrap atau Foundation. Grid dapat digunakan untuk menciptakan layout yang lebih rapi dan struktur yang lebih baik, serta membuat halaman web lebih mudah digunakan pada perangkat berbeda.
3. Contoh Penggunaan Grid Layout?
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Grid Layout</h1>
<p>This grid layout contains six columns and three rows:</p>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
Coding di atas adalah contoh implementasi grid layout menggunakan CSS. Dalam coding ini terdapat beberapa elemen yang digunakan untuk membuat grid layout:
- Elemen div dengan class “grid-container” adalah elemen utama yang digunakan sebagai container grid. Pada class ini, properti “display: grid” digunakan untuk mengaktifkan grid layout pada elemen tersebut.
- Properti “grid-template-areas” digunakan untuk menentukan area-area dari grid yang akan digunakan. Pada contoh ini, terdapat enam kolom dan tiga baris.
- Elemen div dengan class “item1”, “item2”, “item3”, “item4”, dan “item5” adalah elemen yang digunakan untuk mengisi area-area dari grid. Masing-masing elemen ini memiliki class yang digunakan untuk menentukan area grid mana yang akan ditempati oleh elemen tersebut.
- Properti “gap” digunakan untuk menentukan jarak antar elemen dalam grid.
- Properti “background-color” digunakan untuk menentukan warna latar belakang dari grid container dan elemen yang ada di dalamnya.
- Properti “text-align” dan “font-size” digunakan untuk menentukan posisi teks dan ukuran font dari elemen yang ada di dalam grid.
Secara keseluruhan, coding di atas menunjukkan bagaimana grid layout dapat digunakan untuk mengorganisir elemen-elemen halaman web secara rapi dan struktur yang baik.
4. Output
