Grid di CSS: Cara Membuat dan Codenya

Review by : Sutiono S.Kom., M.Kom., M.T.I

Section Artikel

1 Grid Layout
2 Browser Pendukung
3 Elemen Grid
4 Properti Tampilan
5 Kolom Grid
6 Baris Grid
7 Gap Grid
8 Garis Grid

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.

Contoh :

<!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 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>

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;
  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>Properti Tampilan:</h1>

<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>

<p> Setel properti <em> display  </em> ke <em> grid </em> untuk membuat kontainer grid tingkat blok. </p>


</body>
</html>

Contoh 2 :

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: inline-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>Properti Tampilan:</h1>

<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>

<p> Setel properti <em> display </em> ke <em> inline-grid </em> untuk membuat inline grid kontainer. </p>


</body>
</html>

Semua turunan langsung dari grid kontainer secara otomatis menjadi item grid.

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;
  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>The grid-column-gap Property:</h1>

<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>

<p> Gunakan properti <em> grid-column-gap </em> untuk menyesuaikan ruang antara kolom. </p>


</body>
</html>

Contoh
Properti grid-row-gap mengatur jarak antara baris:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-row-gap: 50px;
  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>The grid-row-gap Property:</h1>

<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>

<p> Gunakan properti <em> grid-row-gap </em> untuk menyesuaikan ruang di antara baris. </p>


</body>
</html>

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;
  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>The grid-gap Property:</h1>

<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>

<p> Gunakan properti <em> grid-gap </em> untuk menyesuaikan ruang antara kolom <em> dan </em> baris. </p>


</body>
</html>

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;
  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>The grid-gap Property:</h1>

<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>

<p> Gunakan properti <em> grid-gap </em> untuk menyesuaikan ruang antara kolom <em> dan </em> baris. </p>


</body>
</html>

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-template-columns: auto auto auto;
  grid-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;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>
</head>
<body>

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

<p> Kita bisa merujuk ke nomor baris saat menempatkan item grid. </p>

</body>
</html>

Contoh
Tempatkan item grid di baris 1 dan biarkan berakhir di baris 3:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-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;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}
</style>
</head>
<body>

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

<p> kita bisa merujuk ke nomor baris saat menempatkan item grid. </p>

</body>
</html>

Hanifah Nurbaeti

Tags: CSScss grid