Grid-row Öğe Yerleşimi

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 32 / 43.

grid-row özelliği, bir ögenin bir CSS Grid içinde dikey olarak nereye yerleştirileceğini kontrol etmenizi sağlar. Ögenin hangi satırda başlayıp biteceğini (start ve end) belirtir.

Başlamadan önce, grid lines ile grid tracks arasındaki farkı anlamak önemlidir.

Grid çizgileri, grid yapısını oluşturan bölücü çizgilerdir (1, 2, 3 vb. şeklinde numaralandırılır). Bir grid track ise iki bitişik grid çizgisi arasındaki alandır—esas olarak row veya column'ın kendisidir.

Diyelim ki 8 öğeli basit bir `container` yapımız var ve ilk öğenin `grid` üzerinde satır çizgisi 1'den satır çizgisi 4'e kadar uzamasını istiyoruz:

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

İşte böyle görünüyor:

Birden fazla satıra yayılmak (span) için span anahtar kelimesini de kullanabilirsiniz:

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

Bu işlem, item2'yi row line 2'den başlatır ve 2 row (veya 2 tracks) boyunca span ettirir.

Görev

Kolay

Dördüncü grid öğesinin satır çizgisi 2'den satır çizgisi 4'e kadar uzanmasını sağlamak için grid-row özelliğini kullanın.

Kendin dene

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