Alt ızgara burada

Faydalı Alternatif Metin Yazma

İçin destek alt ızgara (CSS Grid Seviye 2 spesifikasyonunun bir parçası) Firefox Nightly’ye az önce geldi! Onunla denemeye başlamak için, şuraya giderek özelliği etkinleştirmeniz gerekir: hakkında:yapılandırma tarayıcıda, ardından arama alt ızgara. Aç/Kapat layout.css.grid-template-subgrid-value.enabled ve alt ızgara ile doğru.

Henüz çok erken, ama sadece birkaç saat denemek, bunun getireceği yerleşim olanakları konusunda beni gerçekten heyecanlandırdı. Alt ızgara daha yaygın bir şekilde desteklendiğinde, gerçekten ilginç, yaratıcı düzenler için kapıyı açacağını düşünüyorum.

İşte bugün oynadığım hızlı bir demo:

Kalemi Gör alt şebeke testi Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Bir alt ızgara oluşturmak oldukça basittir. Bir ebeveyn ızgarasının bir çocuğunun ihtiyacı display: gridve ya grid-template-columns: subgrid veya grid-template-rows: subgrid. Alt ızgara satır ekseninde, sütun ekseninde veya her ikisinde olabilir. Çok basit bir örnek için CSS şöyle görünebilir:

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 200px);
}

.grid-item {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / span 2;
}

.subgrid-item {
grid-column: 2 / 3;
}

zaten bazıları var MDN’deki dokümanlar tarafından yazılmıştır Rachel Andrew başlamak için istekli iseniz.

Bazı yaratıcı düzenler denemek ve oluşturmak için çok daha fazla zaman harcamak için sabırsızlanıyorum – ve kesinlikle yakında bunun hakkında daha fazla yazacağım!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.