Grid Temelleri

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

CSS Grid, satırlar ve sütunlar içeren web sayfalarını kolayca oluşturmanıza olanak tanıyan bir düzen sistemidir. Float'lara veya karmaşık konumlandırmalara ihtiyaç duymadan karmaşık ve duyarlı (responsive) düzenler oluşturmak için harikadır. Üstelik tüm modern tarayıcılarda çalışır.

Bir grid kapsayıcısı oluşturmak için display özelliğini kullanın:

.container {
  display: grid;
}

Izgaranızdaki sütunları px veya fr birimleri (kesirler) ile grid-template-columns kullanarak tanımlayın:

/* Bu, orta sütunun diğer ikisinin iki katı kadar yer kapladığı üç sütun oluşturur. */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Satırları grid-template-rows ile tanımlayın. Izgara öğeleri arasına boşluk eklemek için gap özelliğini kullanın.

/* İki satırlı bir ızgara oluşturur: ilki 100px yüksekliğinde, ikincisi 200px'dir */
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

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

grid-container adlı bir sınıf için şu özellikleri taşıyan bir CSS kuralı oluşturun:

Bir ızgara oluşturmak için display özelliğini ayarlar
fr birimini kullanarak eşit genişlikte üç sütun oluşturur
İki satır oluşturur: ilki 150px yüksekliğinde ve ikincisi 250px yüksekliğinde
Tüm ızgara öğeleri arasına 20px boşluk ekler

Sadece grid-container sınıfı için CSS kodunu yazın.

Kopya kağıdı

CSS Grid, satırlar ve sütunlar içeren web sayfaları oluşturmak için kullanılan bir düzen sistemidir. Bir ızgara (grid) kapsayıcısı oluşturmak için display: grid kullanın:

.container {
  display: grid;
}

px veya fr birimlerini (kesirler) kullanarak grid-template-columns ile sütunları tanımlayın:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Üç sütun, ortadaki iki kat daha geniştir */
}

grid-template-rows ile satırları tanımlayın ve gap ile boşluk ekleyin:

.container {
  display: grid;
  grid-template-rows: 100px 200px; /* Belirli yüksekliklere sahip iki satır */
  gap: 20px; /* Izgara öğeleri arasındaki boşluk */
}

Kendin dene

<!DOCTYPE html>
<html>
<head>
    <style>
        .item{
            border: 2px solid black;
            background-color: #82f5d0;
        }
     /* Add your CSS code here: */
    
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</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.