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 öğ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.

Diyelim ki 8 öğeli basit bir kapsayıcımız var ve ilk öğenin ızgaradaki 1. satır çizgisinden 4. satır çizgisine kadar uzanmasını istiyoruz:

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

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

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

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

Bu, item2'yi satır çizgisi 2'den başlayarak ve 2 satır boyunca uzanacak şekilde yerleştirir.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Görev

Kolay

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

Kopya kağıdı

grid-row özelliği, bir öğenin CSS Izgarasında (CSS Grid) dikey olarak nereye yerleştirileceğini kontrol eder ve öğenin hangi satırda başlayıp biteceğini belirtir.

Temel sözdizimi:

.item {
  grid-row: start-line / end-line;
}

1. satır çizgisinden 4. satır çizgisine kadar uzanan örnek:

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

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

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

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>

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.