Grid Implisit dalam CSS

Grid implisit dibuat secara otomatis oleh browser, ketika jumlah elemen tidak muat dalam grid eksplisit. Mari kita lihat bagaimana ini terjadi.

Misalkan kita memiliki empat blok:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem3">4</div>
</div>

Misalkan grid kita berukuran 3 kali 3:

css#parent {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
}

Mari tempatkan tiga blok kita pada grid:

css#elem1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

Dan blok keempat kita tempatkan pada baris dan kolom keempat:

css#elem4 {
  grid-row: 4 / 5;
  grid-column: 4 / 5;
}

Karena grid kita berukuran 3 kali 3, maka baris dan kolom keempat seperti itu tidak akan ada dalam grid ini. Tapi itu tidak ada dalam bentuk eksplisit, yaitu yang kita tentukan. Namun browser akan membuatnya secara implisit, yaitu sendiri.

Sementara itu, karena kita hanya menentukan ukuran untuk grid eksplisit, maka untuk sel di luar grid ini ukurannya akan dihitung oleh browser. Artinya dalam kasus kita, ukuran blok keempat akan ditetapkan secara otomatis oleh browser.

Mari kita lihat, apa yang kita dapatkan:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}
#elem4 {
  grid-row: 4 / 5;
  grid-column: 4 / 5;
}

Результат: