CSS Grid Nedir?
CSS Grid Layout, modern tarayıcılara yerleşik iki boyutlu bir düzen sistemidir. display: grid ile bir ızgara kapsayıcısı tanımlarsınız, ardından grid-template-columns ile sütunları ve grid-template-rows ile satırları kontrol edersiniz. Kesirli birimler (fr), mevcut alanı orantılı olarak dağıtır. Alt öğeler grid-column: span N ve grid-row: span N kullanarak birden fazla sütun veya satıra yayılabilir.
CSS Grid Oluşturucu Nasıl Kullanılır
-
Sayı girişlerini (her biri 1–12) kullanarak sütun ve satır sayısını ayarlayın.
-
Boyutları kontrol etmek için grid-template-columns ve grid-template-rows değerlerini ayarlayın (örn. 1fr 2fr, 200px auto).
-
Hücreler arasındaki boşluğu ayarlayın (örn. 10px, 1rem).
-
Seçmek için önizlemede herhangi bir hücreye tıklayın (turuncuya döner).
-
Hücre Yayılımı panelinde col-span ve row-span değerlerini ayarlayın, ardından Uygula'ya tıklayın. Yayılan hücreler yeşile döner.
-
Çıktı biçimini değiştirmek için CSS veya HTML sekmesine tıklayın, ardından panoya Kopyala.
-
Yeni bir 3×3 ızgarayla baştan başlamak için Tümünü Sıfırla'ya tıklayın.