Advan- Membuat layout grid sederhana dengan HTML dan CSS adalah salah satu keterampilan penting dalam pengembangan web. Dengan grid layout, kamu bisa membagi konten halaman secara rapi dan responsif. Tutorial ini akan memandu kamu langkah demi langkah membuat layout grid yang mudah dipahami oleh pemula. Tidak perlu khawatir, hanya dengan pengetahuan dasar HTML dan CSS, kamu sudah bisa mulai membuat layout yang stylish dan fungsional.
Pada tutorial kali ini, kita akan menggunakan elemen CSS Grid untuk membuat tata letak yang fleksibel dan responsif. Grid layout sangat berguna untuk situs web modern, karena memungkinkan penataan konten dengan presisi tinggi. Selain itu, kamu juga bisa memperluas kemampuan desainmu menggunakan laptop yang mendukung produktivitas tinggi seperti Advan Laptop 360 Stylus yang cocok untuk para desainer dan developer.
Langkah Pertama – Menyiapkan Struktur HTML
Sebelum kita mulai membuat grid, pastikan kamu memahami struktur dasar HTML. Kita akan membuat beberapa div sebagai item dalam grid. Berikut ini adalah contoh kode HTML sederhana:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Grid Layout Sederhana</title>
<link rel=”stylesheet” href=”styles.css”>
</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>
</body>
</html>
Pada kode di atas, kita membuat 4 item yang akan ditempatkan dalam grid. Setiap item ini akan kita atur tata letaknya dengan CSS Grid.
Baca Juga: Apa Itu Tag Iframe dalam HTML dan Cara Kerjanya yang Efektif
Langkah Kedua – Menambahkan CSS untuk Grid Layout
Setelah kita menyiapkan struktur HTML, sekarang saatnya membuat grid dengan CSS. Kita akan menambahkan beberapa aturan grid pada file styles.css.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 20px;
}
.item {
background-color: #f4f4f4;
border: 1px solid #ccc;
text-align: center;
padding: 20px;
font-size: 1.2rem;
}
Pada kode di atas, properti grid-template-columns menentukan dua kolom dengan ukuran yang sama menggunakan repeat(2, 1fr). Grid gap juga ditambahkan untuk memberi jarak antara item.
Langkah Ketiga – Menambahkan Responsivitas pada Grid Layout
Untuk membuat grid responsif, kita bisa menambahkan media query di CSS agar layout menyesuaikan ketika dilihat di layar yang lebih kecil. Berikut adalah contohnya:
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr;
}
}
Dengan aturan di atas, grid layout akan berubah menjadi satu kolom ketika layar lebih kecil dari 600px. Ini akan membuat layout lebih fleksibel dan mudah digunakan di perangkat mobile.
Manfaatkan Alat yang Tepat untuk Pengembangan Web
Untuk menciptakan layout yang lebih kreatif dan produktif, tentunya kamu membutuhkan perangkat yang mendukung proses desain dan coding secara optimal. Salah satu perangkat yang direkomendasikan untuk para web developer dan desainer adalah Advan Laptop 360 Stylus. Laptop ini memiliki layar touchscreen dan stylus yang sangat membantu saat mendesain layout, serta prosesor Intel i3 yang kuat untuk menjalankan berbagai aplikasi desain dan coding secara bersamaan.
Baca Juga: Cara Membuat Header, Footer, dan Section dengan HTML5 untuk Struktur Website
Dengan perangkat yang tepat, kamu bisa lebih leluasa berkreasi dan mengembangkan keterampilan web development. Advan Laptop 360 Stylus juga mendukung produktivitas dengan desain 2-in-1 yang fleksibel, menjadikannya pilihan yang ideal untuk kamu yang sering bekerja di berbagai situasi.
Membuat layout grid sederhana dengan HTML dan CSS sebenarnya cukup mudah jika kamu mengikuti langkah-langkah yang tepat. Dengan bantuan CSS Grid, kamu bisa dengan cepat membuat tata letak yang responsif dan elegan. Jika kamu mencari perangkat yang bisa meningkatkan produktivitas coding dan desainmu, Advan Laptop 360 Stylus adalah pilihan yang tepat.***
Editor: Andik Chefasa