Grid Layout CSS (Dimas Rama)

Grid Layout
Modul Grid Layout CSS berfungsi untuk memudahkan kita dalam mendesain halaman web
dengan baris dan kolom tanpa menggunakan float dan pemosisian.
Browser Pendukung
Google Chrome Microsoft Edge Mozila Firefox Safari Opera
57.0 16.0 52.0 10 44
Elemen Grid
Elemen grid terdiri dari elemen induk dengan satu atau beberapa elemen anak.
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Elemen Grid</h1><p> Grid layout harus memiliki elemen induk
dengan properti <em> display </em> disetel ke <em> grid </em>
atau <em> inline-grid </em>. </p><p> Elemen turunan langsung dari
penampung petak secara otomatis menjadi item petak. </p>
<div class="grid-container">
<div class="grid-item">1</div>
</div>
</body>
</html>
Hasil :
Properti Tampilan
Elemen HTML menjadi kontainer grid ketika properti display diatur ke grid atau inline-grid.
Contoh 1:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
padding: 10px;
}
.grid-item {
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Properti Tampilan:</h1>
</div>
<p> Setel properti <em> display </em> ke <em> grid </em> untuk
membuat kontainer grid tingkat blok. </p>
</body>
</html>
Hasil :
Contoh 2:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: inline-grid;
padding: 10px;
}
.grid-item {
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Properti Tampilan:</h1>
</div>
<p> Setel properti <em> display </em> ke <em> inline-grid </em> untuk
membuat inline grid kontainer. </p>
</body>
</html>
Hasil :
Kolom Grid
Garis vertikal dari item grid disebut kolom.
Baris Grid
Garis horizontal dari item grid disebut baris.
Gap Grid
Spasi di antara setiap kolom / baris disebut gap.
Kita bisa menyesuaikan ukuran gap/celah dengan menggunakan salah satu properti berikut ini:
 grid-column-gap
 grid-row-gap
 grid-gap
Contoh
Properti grid-column-gap mengatur jarak antara kolom:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-column-gap: 50px;
padding: 10px;
}
.grid-item {
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The grid-column-gap Property:</h1>
</div>
<p> Gunakan properti <em> grid-column-gap </em> untuk menyesuaikan

ruang antara kolom. </p>
</body>
</html>
Hasil :
Contoh
Properti grid-row-gap mengatur jarak antara baris:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-row-gap: 50px;
padding: 10px;
}
.grid-item {
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The grid-row-gap Property:</h1>
</div>
<p> Gunakan properti <em> grid-row-gap </em> untuk menyesuaikan ruang

di antara baris. </p>
</body>
</html>
Hasil :
Contoh
Properti grid-gap adalah properti singkatan untuk grid-row-gap dan properti grid-column-gap:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-gap: 50px 100px;
padding: 10px;
}
.grid-item {
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The grid-gap Property:</h1>
</div>
<p> Gunakan properti <em> grid-gap </em> untuk menyesuaikan ruang

antara kolom <em> dan </em> baris. </p>
</body>
</html>
Hasil :
Contoh
Properti grid-gap juga dapat digunakan untuk mengatur gap baris dan kolom gap dalam satu nilai:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-gap: 50px;
padding: 10px;
}
.grid-item {
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The grid-gap Property:</h1>
</div>
<p> Gunakan properti <em> grid-gap </em> untuk menyesuaikan ruang

antara kolom <em> dan </em> baris. </p>
</body>
</html>
Hasil :
Garis Grid
Garis antar kolom disebut garis kolom.
Garis antar baris disebut garis baris.

Mengacu pada nomor baris saat menempatkan item grid dalam kontainer grid :
Contoh
Tempatkan item grid di baris kolom 1 dan biarkan berakhir di baris kolom 3:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-gap: 10px;
padding: 10px;
}
.grid-container > div {

text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
</style>
</head>
<body>
<h1>Grid Lines</h1>
<div class="item1">1</div>
</div>
<p> Kita bisa merujuk ke nomor baris saat menempatkan item grid. </p>
</body>
</html>
Hasil :
Contoh
Tempatkan item grid di baris 1 dan biarkan berakhir di baris 3:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-gap: 10px;
padding: 10px;
}
.grid-container > div {

text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
</style>
</head>
<body>
<h1>Grid Lines</h1>
</div>
<p> kita bisa merujuk ke nomor baris saat menempatkan item grid.
</p>
</body>
</html>
Hasil :

Grid Layout CSS (Dimas Rama)

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Grid Layout CSS (Dimas Rama)

Diunggah oleh

Hak Cipta:

Format Tersedia

Grid Layout

<h1>The grid-column-gap Property:</h1>

<p> Gunakan properti <em> grid-column-gap </em> untuk menyesuaikan

<h1>The grid-row-gap Property:</h1>

<p> Gunakan properti <em> grid-row-gap </em> untuk menyesuaikan ruang

<h1>The grid-gap Property:</h1>

<p> Gunakan properti <em> grid-gap </em> untuk menyesuaikan ruang

<h1>The grid-gap Property:</h1>

<p> Gunakan properti <em> grid-gap </em> untuk menyesuaikan ruang

Garis antar baris disebut garis baris.

.grid-container > div {

.grid-container > div {

Anda mungkin juga menyukai