Penempatan Item dengan grid-row

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

Property grid-row memungkinkan kamu mengatur penempatan item secara vertikal dalam CSS Grid. Property ini menentukan baris tempat item dimulai dan diakhiri.

Sebelum kita mulai, penting untuk memahami perbedaan antara garis grid dan jalur grid.

Garis kisi adalah garis pembatas (bernomor 1, 2, 3, dan seterusnya) yang membentuk struktur kisi. Track kisi adalah ruang di antara dua garis kisi yang berdekatan: pada dasarnya, baris atau kolom itu sendiri.

Misalkan kita memiliki container sederhana dengan 8 item, dan kita ingin item pertama membentang dari garis baris 1 hingga garis baris 4 di grid:

.item1 {
  grid-row: 1 / 4;
}

Seperti inilah tampilannya:

Untuk membentang di beberapa baris, kamu juga dapat menggunakan kata kunci span:

.item2 {
  grid-row: 2 / span 2;
  background-color: lightpink;
}

Ini menempatkan item2 mulai pada garis baris 2 dan membentang sepanjang 2 baris (atau 2 track).

Tantangan

Mudah

Gunakan property grid-row agar item grid keempat membentang dari garis baris 2 hingga garis baris 4.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: dodgerblue;
  padding: 10px;
}

.grid-container > div {
  background-color: #f1f1f1;
  text-align: center;
  padding: 10px;
  font-size: 30px;
}
/* Add your CSS styles here */

</style>
</head>
<body>
<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>

</body>
</html>