Bu sayfa, Cloud Translation API ile çevrilmiştir.

CSS alt ızgarası

CSS ızgarası çok güçlü bir düzen motorudur ancak satır ve üst ızgarada oluşturulan sütun kanalları yalnızca doğrudan konumlandırmak için kullanılabilir alt öğeleridir. Adlandırılmış ızgara alanları ve çizgileri doğrudan alt öğedir. subgrid ile parça boyutlandırma, şablonlar ve adlar paylaşılabilir. bir tablo da var. Bu makalede, sürecin işleyiş şekli açıklanmaktadır.

Alt ızgara önce, içerikler genellikle düzensiz düzenlerden (ör. bunu.

Yan yana üç kart gösterilir ve her birinde üç içerik bulunur:
paragraf ve bağlantıdan oluşur. Her biri farklı uzunluktaki metinler, yan yana duran kartlarda bazı garip hizalamalara neden oluyor.

Alt ızgaradan sonra, değişken boyutlardaki içerikleri uyumlu hale getirmek mümkündür.

Yan yana üç kart gösterilir. Her kartta üç içerik parçası bulunur: başlık, paragraf ve bağlantı. Her biri farklı metin uzunluğuna sahiptir ancak alt ızgara, her içerik öğesinin en uzununun satır yüksekliğini ayarlamasına izin vererek tüm hizalama sorunlarını düzelterek hizalamaları düzeltmiştir.

Tarayıcı Desteği

Kaynak

Alt ızgaralarla ilgili temel bilgiler

CSS'nin temellerini tanıtan basit bir kullanım alanı örneğini aşağıda bulabilirsiniz subgrid. CEVAP ızgara, ilki 20ch genişliğinde ve ikincisi olmak üzere iki adlandırılmış sütunla tanımlanmış "gerisi" mi? 1fr alanı. Sütun adları zorunlu değildir ancak gösterim ve eğitim amacıyla çok iyidir.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

Ardından, söz konusu ızgaranın bu iki sütunu kapsayan alt öğeleri bir ızgara kapsayıcısı olarak ayarlanır. ve grid-template-columns değerini subgrid.

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}

CSS ızgara DevTools'unun ekran görüntüsü. Yan yana iki sütun ve sütun satırlarının başında bir ad gösterilmektedir. — https://codepen.io/web-dot-dev/pen/NWezjXv

Hepsi bu kadar. Bir üst ızgaranın sütunları, etkili bir şekilde alt ızgara. Bu alt tablo artık bu sütunlardan birine alt öğeler atayabilir.

Meydan okuma Aynı demoyu tekrarla ama bu işlemi grid-template-rows boyunca yap.

Sayfa düzeyinde "makro" paylaşma ızgara

Tasarımcılar genellikle paylaşımlı ızgaralar kullanır, tüm tasarımın üzerine çizgiler çizer. hizalamak için kullanırlar. Artık web geliştiricileri de bu avantajlardan yararlanabilir. Artık bu iş akışını ve daha fazlasını gerçekleştirebilirsiniz.

Makro ızgaradan son tasarıma. Izgarada adlandırılmış alanlar önceden oluşturulur ve sonraki bileşenler istenilen şekilde yerleştirilir.

En yaygın tasarımcı ızgara iş akışını uygulamak, subgrid özellikleri, iş akışları ve potansiyelleri hakkında analizler.

Burada, Chrome Geliştirici Araçları'ndan bir mobil sayfa düzeni makrosuna ait ekran görüntüsünü görebilirsiniz ızgara. Satırların adları vardır ve bileşen yerleşimi için net alanlar bulunur.

CEVAP
Chrome CSS ızgarası Geliştirici Araçları'nda mobil boyutlu ızgara düzenini gösteren ekran görüntüsü
Burada satırlar ve sütunlar hızlı tanımlama için adlandırılır: full-bleed,
sistem durumu, birincil gezinme, birincil-üstbilgi, ana, altbilgi ve sistem hareketleri.

Aşağıdaki CSS, cihaz için adlandırılmış satır ve sütunlarla bu ızgarayı oluşturur kullanır. Her satır ve sütunun bir boyutu vardır.

.device {
    display: grid;
    grid-template-rows:
      [system-status] 3.5rem
      [primary-nav] 3rem
      [primary-header] 4rem
      [main] auto
      [footer] 4rem
      [system-gestures] 2rem
    ;
    grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}

Bazı ek stiller aşağıdaki tasarımı oluşturur.

CSS Geliştirici Araçları ızgara yer paylaşımı önceden olduğu gibi, ancak bu kez
mobil sistem kullanıcı arayüzünde biraz gölge ve biraz renk var. Tasarımda nereye doğru ilerlediğinizi görmenize yardımcı olur.

Bu üst öğenin içinde çeşitli iç içe yerleştirilmiş öğeler bulunur. Tasarım için tam bir genişlikteki resmi bulun. En uzak sol ve sağ sütun satır adları fullbleed-start ve fullbleed-end şeklindedir. Kılavuz çizgileri bu şekilde adlandırılıyor yerleşim ile eş zamanlı olarak her biri için uyumlu hale getirmesini sağlıyor. kısaltma / fullbleed. Kısa süre içinde göreceğiniz gibi çok kullanışlı bir özellik.

CEVAP
ekran görüntüsünde özellikle 50 ve 50 kareye odaklanarak
tam-başlangıç ve tam-bitiş sütun adları.

Güzel adlandırılmış satırlar ve sütunlarla oluşturulan genel cihaz düzeninde, iyi adlandırılmış satır ve sütunları iç içe yerleştirilmiş ızgara düzenlerine aktarmak için subgrid'ü kullanın. Bu, subgrid sihirli an. Cihaz düzeni, adlandırılmış satırları ve verileri iletir. uygulama kapsayıcısına daha sonra da bu sütunları uygulama kapsayıcılarındaki

.device > .app,
.app > * {
    display: grid;
    grid: subgrid / subgrid;

    /* same as */
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

CSS alt ızgarası, ızgara kanalları listesinin yerine kullanılan bir değerdir. Satırlar ve öğenin üst öğesinden yayıldığı sütunlar artık aynı satırlar ve sütunlarından birini seçin. Bu sayede, .device ızgarasındaki satır adları yalnızca .app yerine .app'un alt öğeleri tarafından kullanılabilir. .app içindeki öğeler .device tarafından alt ızgaradan önce oluşturulan ızgara yollarına başvuruda bulunulamaz.

Tüm bunlar tanımlandıktan sonra, iç içe yerleştirilmiş görüntü artık çerçeve içinde tam çerçeveye geçebilir. düzeni subgrid sayesinde elde etti. Negatif değerler veya hile yok. Bunun yerine "düzenlemem fullbleed-start ile fullbleed-end arasında değişiyor" yazan güzel bir tek satırlık ifade var.

.app > main img {
    grid-area: fullbleed;
}

Birincil gezinme ve başlık satırlarında düzgün bir şekilde bulunan ve tam çerçeve adlandırılmış sütun satırlarının her birini kapsayacak şekilde uzanan tam genişlikte iç içe yerleştirilmiş bir resimle tamamlanmış makro düzeni. — https://codepen.io/web-dot-dev/pen/WNLyjzX

İşte tasarımcıların kullandığı makro ızgaranın CSS'de uygulanmış hali. Bu ve bu konsept geliştirerek ihtiyacınıza göre birlikte büyüyebilir.

Destek için kontrol edin

CSS ve alt ızgara ile aşamalı geliştirme, aşina olduğunuz ve kolay bir yöntemdir. @supports komutunu kullanın ve parantez içinde tarayıcıya kodu anlayıp anlamadığını sorun. alt ızgarayı şablon sütun veya satırlar için bir değer olarak kullanabilirsiniz. Aşağıdaki örnekte, grid-template-columns özelliği, subgrid anahtar kelimesini destekler. Bu anahtar true ise alt ızgaranın

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

Devtools

Chrome, Edge, Firefox ve Safari'nin hepsinde mükemmel CSS ızgarası Geliştirici Araçları ve Chrome, Edge ve Firefox alt ızgaralara yardımcı olmak için özel araçlara sahiptir. Chrome duyurdu araçlarında 115 Firefox bu oyunları bir yıl veya daha uzun süredir kullanıyor.

Öğeler panelindeki öğelerde bulunan alt ızgara rozetinin ekran görüntüsü önizlemesi.

Alt ızgara rozeti, ızgara rozeti gibi davranır ancak hangi alt ızgaradır, hangileri değildir.

Kaynaklar

Bu liste, başlangıç için alt ızgara makaleleri, demolar ve genel ilham kaynaklarının bir derlemesidir. Alt şebekenizde bir sonraki adımı arıyorsanız bu harika kaynakları keşfederek eğlenmenize bakın!