Dasar-Dasar Grid

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 31 dari 43.

CSS Grid adalah sistem tata letak yang memudahkanmu membuat halaman web dengan baris dan kolom. Sistem ini cocok untuk membuat tata letak yang kompleks dan responsif tanpa perlu menggunakan float atau pengaturan posisi yang rumit. Selain itu, sistem ini berfungsi di semua browser modern.

Untuk membuat container grid, gunakan property display:

.container {
  display: grid;
}

Tentukan kolom di grid-mu menggunakan grid-template-columns dengan satuan px atau fr (pecahan):

/* Ini membuat tiga kolom, dengan kolom tengah memakai ruang dua kali lebih luas daripada dua kolom lainnya. */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Tentukan baris dengan grid-template-rows. Gunakan property gap untuk menambahkan jarak di antara item grid.

/* Membuat grid dengan dua baris: baris pertama setinggi 100px, baris kedua 200px */
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

Tantangan

Mudah

Buat aturan CSS untuk class bernama grid-container yang:

Mengatur property display untuk membuat grid
Membuat tiga kolom dengan lebar yang sama menggunakan unit fr
Membuat dua baris: baris pertama setinggi 150px dan baris kedua setinggi 250px
Menambahkan jarak 20px di antara semua item grid

Tulis hanya kode CSS untuk class grid-container.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <style>
        .item{
            border: 2px solid black;
            background-color: #82f5d0;
        }
     /* Add your CSS code here: */
    
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>