CSS Grid Deneme Alanı

CSS Grid Deneme Alanı Hakkında

CSS Grid Playground, gerçek grid düzenlerini görsel olarak oluşturmanızı sağlar. grid-template-columns ve grid-template-rows'u şekillendirmek için sütun ve satır izleri ekleyin veya kaldırın, sütun ve satır boşluklarını ayarlayın ve dört hizalama özelliğinin tamamını — justify-items, align-items, justify-content ve align-content — ince ayarlayın; önizleme her değişikliği anında yansıtır.

Öğe yerleşimi, grid'lerin asıl gücünü ortaya çıkardığı yerdir: öğeler ekleyin, önizlemede birini seçmek için tıklayın ve column start, column span, row start ve row span ile konumlandırın. Kenar çubukları, başlıklar ve öne çıkan hücrelerin birden fazla izi kaplaması işte böyle olur — neredeyse her gerçek grid düzeninin arkasındaki teknik budur.

Üç hazır şablon — holy grail, dashboard ve gallery — inceleyip uyarlayabileceğiniz klasik sayfa yapılarını yükler. Düzen istediğiniz gibi olduğunda, tam grid konteyner kurallarını ve her öğenin yerleşimini içeren oluşturulan CSS'i kopyalayın.

CSS Grid Deneme Alanı Nasıl Kullanılır

1. Grid şablonunu tanımlamak için sütun ve satır izleri ekleyin veya kaldırın.
2. Sütun boşluğunu ve satır boşluğunu ayarlayın.
3. Hizalama kontrollerini ayarlayın: justify-items, align-items, justify-content ve align-content.
4. Öğeler ekleyin, önizlemede birine tıklayın ve konumlandırmak için sütun/satır başlangıcını ve aralığını ayarlayın.
5. Klasik bir düzeni incelemek için holy grail, dashboard veya gallery şablonunu yükleyin.
6. Oluşturulan CSS'i stil dosyanıza kopyalayın.

Sıkça sorulan sorular