Grid Container di CSS: Code dan Propertinya

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

Section Artikel

1 Kontainer Grid
2 Properti grid-template-kolom
3 Properti grid-template-rows
4 Properti konten justify
5 Properti align-content

Kontainer Grid

Untuk membuat elemen HTML berperilaku sebagai kontainer grid, kita harus menyetel properti display ke grid atau grid-inline.

Kontainer Grid terdiri dari item grid dan ditempatkan di dalam kolom dan baris.

Properti grid-template-kolom

Properti grid-template-columns menentukan jumlah kolom dalam layout grid dan ini bisa menentukan lebar setiap kolom.

Nilainya adalah daftar yang dipisahkan spasi, di mana setiap nilai menentukan lebar kolom masing-masing.

Jika kita ingin tata letak grid berisi 4 kolom, tentukan lebar 4 kolom, atau “otomatis” jika semua kolom harus memiliki lebar yang sama.

Contoh
Buat kisi dengan 4 kolom:

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

<h1> grid-template-columns </h1>

<p> Anda dapat menggunakan properti <em> grid-template-column </em> untuk menentukan jumlah kolom dalam tata letak grid Anda. </p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

</body>
</html>

Catatan: Jika kita memiliki lebih dari 4 item dalam grid 4 kolom grid akan secara otomatis menambahkan baris baru untuk memasukkan item.

Properti grid-template-columns juga dapat digunakan untuk menentukan ukuran (lebar) kolom.

Contoh
Tetapkan ukuran untuk 4 kolom:

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

<h1> grid-template-columns </h1>

<p> Gunakan properti <em> grid-template-column </em> untuk menentukan ukuran setiap kolom. </p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

</body>
</html>

Properti grid-template-rows

Properti grid-template-rows menentukan ketinggian setiap baris.

Nilainya adalah daftar yang dipisahkan spasi di mana setiap nilai menentukan tinggi baris masing-masing:

Contoh :

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

<h1>The grid-template-rows Property</h1>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

<p> Gunakan properti <em> grid-template-row </em> untuk menentukan ukuran (tinggi) setiap baris. </p>

</body>
</html>

Properti konten justify

Properti justify-content digunakan untuk meratakan seluruh grid di dalam kontainer.

Catatan: Lebar total grid harus kurang dari lebar kontainer agar properti konten rata-rata memiliki beberapa efek.

Contoh 1:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/  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;
}
</style>
</head>
<body>

<h1>The justify-content Property</h1>

<p> Gunakan properti <em> justify-content </em> untuk meratakan border di dalam kontainer. </p>

<p> Nilai "space-evenly" akan memberi kolom jumlah spasi yang sama di antara, dan di sekitarnya: </p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>


</body>
</html>

Contoh 2 :

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: space-around;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/  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;
}
</style>
</head>
<body>

<h1>The justify-content Property</h1>

<p> Gunakan properti <em> justify-content </em> untuk meratakan grid di dalam kontainer. </p>

<p> Nilai "space-around" akan memberikan jumlah ruang yang sama pada kolom di sekitarnya: </p>
  
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>


</body>
</html>

Contoh 3 :

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: space-between;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/  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;
}
</style>
</head>
<body>

<h1>The justify-content Property</h1>

<p> Gunakan properti <em> justify-content </em> untuk meratakan grid di dalam kontainer. </p>

<p> Nilai "space-between" akan memberikan jumlah ruang yang sama pada kolom di sekitarnya: </p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>


</body>
</html>

Contoh 4 :

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: center;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/  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;
}
</style>
</head>
<body>

<h1>The justify-content Property</h1>

<p> Gunakan properti <em> justify-content </em> untuk menyelaraskan grid di dalam container. </p>

<p> Nilai "center" akan menyejajarkan petak di tengah penampung: </p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>


</body>
</html>

Contoh 5 :

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: start;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/  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;
}
</style>
</head>
<body>

<h1>The justify-content Property</h1>

<p> Gunakan properti <em> justify-content </em> untuk meratakan grid di dalam kontainer. </p>

<p> Nilai "start" akan menyelaraskan grid di awal konotainer: </p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>


</body>
</html>

Contoh 6 :

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: end;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/  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;
}
</style>
</head>
<body>

<h1>The justify-content Property</h1>

<p> Gunakan properti <em> justify-content </em> untuk meratakan grid di dalam konainer. </p>

<p> Nilai "end" akan menyelaraskan grid di akhir konotainer: </p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>


</body>
</html>

Properti align-content

Properti align-content digunakan untuk menyelaraskan seluruh grid di dalam kontainer secara vertikal.

Catatan: Tinggi total grid harus kurang dari tinggi kontainer agar properti align-content memiliki beberapa efek.

Contoh 1 :

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
  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;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p> Gunakan properti <em> align-content </em> untuk meratakan grid di dalam kontainer secara vertikal. </p>

<p> Nilai "center" akan meratakan baris di tengah kontainer: </ p>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>


</body>
</html>