Grid Temelleri

Coddy'nin HTML Journey'sinin CSS Hakimiyeti 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ı sağlayan bir düzen sistemidir. Float'lara veya zahmetli konumlandırmaya ihtiyaç duymadan karmaşık ve duyarlı 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;
}

Görev

Kolay

grid-container adlı bir sınıf için şunları yapan bir CSS kuralı oluşturun:

Bir grid 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, ikincisi 250px yüksekliğinde
Tüm grid öğeleri arasına 20px boşluk ekler

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

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>