Grid-row Öğe Yerleşimi

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

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

Başlamadan önce, ızgara çizgileri ile ızgara izleri arasındaki farkı anlamak önemlidir.

Izgara çizgileri, ızgara yapısını oluşturan bölme çizgileridir (1, 2, 3 vb. olarak numaralandırılır). Izgara hattı, birbirine bitişik iki ızgara çizgisi arasındaki alandır: temelde satırın veya sütunun kendisidir.

Diyelim ki 8 öğe içeren basit bir kapsayıcımız var ve ilk öğenin ızgarada satır çizgisi 1’den satır çizgisi 4’e kadar uzanmasını istiyoruz:

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

İşte görünümü:

Birden fazla satıra yayılmak için span anahtar sözcüğünü de kullanabilirsiniz:

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

Bu, item2 öğesini 2. satır çizgisinden başlatır ve 2 satır (veya 2 parça) boyunca uzatır.

Görev

Kolay

Dördüncü grid öğesinin 2. satır çizgisinden 4. satır çizgisine 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>