CSS Grid
CSS Grid
Pengertian Grid
Grid dalam CSS adalah sistem tata letak dua dimensi yang digunakan untuk mengatur kolom dan baris dalam halaman web. CSS Grid dapat membagi halaman web menjadi beberapa bagian, baik secara horizontal maupun vertikal.
Fungsi Grid
CSS Grid memiliki beberapa fungsi, di antaranya:
- Membuat struktur halaman web yang responsif dan fleksibel
- Mendefinisikan hubungan ukuran, posisi, dan lapisan antara bagian-bagian kontrol
- Memudahkan developer untuk membuat layout dari design yang telah dibuat
- Sangat bagus dalam mengatur gambar yang besar
Praktek Grid
1. Grid Layout
code :
<!DOCTYPE html>
<html>
<title>Grid || Muhammad Fahmi 'Ainunnajib</title>
<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: 5px;
background-color: navy;
padding: 5px;
}
.grid-container>div {
background-color: yellowgreen;
text-align: center;
padding: 20px;
font-size: 30px;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">Latihan CSS Grid 1 Muhammad Fahmi 'Ainunnajib - Universitas Safin Pati</h1>
<p class="center">CSS Grid Module adalah sistem tata letak berbasis grid, dengan baris dan kolom,
sehingga memudahkan mendesain halaman web tanpa harus menggunakan float dan positioning.</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>
Hasil :
2. Grid Element
Code :
<!DOCTYPE html>
<html>
<title>Grid || Muhammad Fahmi 'Ainunnajib</title>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: navy;
padding: 5px;
}
.grid-item {
background-color: yellowgreen;
border: 1px solid black;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>display: grid</h1>
<p>Use display: grid; to make a block-level grid container:</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Hasil :
3. Inline Grid
<!DOCTYPE html>
<html>
<title>Inline Grid|| Muhammad Fahmi 'Ainunnajib</title>
<head>
<style>
.grid-container {
display: inline-grid;
grid-template-columns: auto auto auto;
background-color: navy;
padding: 20px;
}
.grid-item {
background-color: yellowgreen;
border: 1px solid black;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>display: grid</h1>
<p>Use display: inline-grid; sesuai dengan konten yang ada di dalam grid-item:</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Hasil :
4. Column Gap
Code :
<!DOCTYPE html>
<html>
<title>Column Gap || Muhammad Fahmi 'Ainunnajib</title>
<head>
<style>
.grid-container {
display: grid;
column-gap: 10px;
grid-template-columns: auto auto auto;
background-color: navy;
padding: 10px;
}
.grid-item {
background-color: yellowgreen;
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>latihan grid; column-gap </h1>
<p>column-gap adalah jarak column satu dengan colomn yang lainya:</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Hasil :
5. Row Gap
Code :
<!DOCTYPE html>
<html>
<title>Row Gap || Muhammad Fahmi 'Ainunnajib</title>
<head>
<style>
.grid-container {
display: grid;
row-gap: 30px;
grid-template-columns: auto auto auto;
background-color: navy;
padding: 10px;
}
.grid-item {
background-color: yellowgreen;
border: 1px solid black;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>latihan grid; row-gap </h1>
<p>Row gap adalah jarak antara baris satu dan yang lainya :</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Hasil :
Komentar
Posting Komentar