Grid ile Kutsal Kâse Yerleşimi

Kutsal Kâse Düzeni, klasik bir web tasarım örüntüsüdür: üst bilgi, alt bilgi ve ortada üç sütunlu bir bölüm (sol kenar çubuğu, ana içerik, sağ kenar çubuğu) bulunan tam yükseklikte bir sayfa. Kayan öğelerle uygulanması herkesçe zor kabul edilirdi; CSS ızgarası bunu çok kolaylaştırır.

Düzeni adlandırılmış şablon alanları ve satırlarla tanımlayın: grid-template-areas, görsel yapıyı eşler. Üç sütun ve üç satır (üst bilgi tüm sütunlara, alt bilgi tüm sütunlara yayılır; ortada üç sütun bulunur), tüm düzeni okunabilir bir ASCII diyagramında ifade eder.

Her alt öğe, alanına adıyla başvurur: header { grid-area: header }, main { grid-area: main }, nav { grid-area: sidebar }, aside { grid-area: aside }, footer { grid-area: footer }. Izgara bunları otomatik olarak yerleştirir.

Orta satır, sabit yükseklikteki üst bilgi ve alt bilgiden sonra görünüm alanında kalan tüm yüksekliği dolduran 1fr değerini kullanır. Böylece kenar çubukları ve ana içerik, görünüm alanını dolduracak şekilde her zaman uzar; açık yükseklik hesaplamalarına gerek kalmaz.

Mobilde, grid-template-areas değerini tek sütunlu bir yığın olarak yeniden tanımlamak için bir medya sorgusu kullanın: üst bilgi, kenar çubuğu, ana içerik, yan bölüm ve alt bilgi dikey olarak sıralanır. DOM sırası korunur; yalnızca görsel ızgara şablonu değişir. Izgara alanları, duyarlı yeniden yapılandırmayı okunabilir kılar.

Tablette sağ yan bölümü kaldırıp ana içeriği genişletin: "header header" "sidebar main" "footer footer" olarak yeniden tanımlayın ve grid-template-columns: 240px 1fr kullanın. aside { display: none } ayarlayın veya alan tanımında yan bölümü ana içeriğin altına taşıyın.

Izgara izleri arasına boşluk ekleyin: gap: var(--spacing-4). Aralığı tutarlı tutmak için iç dolguyu ızgara kapsayıcısına değil, her alanın içine uygulayın. Üst bilgi ve alt bilgi genellikle ızgaranın maksimum genişlik hizasıyla eşleşen kendi yatay iç dolgularına sahip olur.

Ana içerik alanı da bir ızgara olabilir — ana alanın içinde makale ve kenar çubuğundan oluşan iki sütunlu bir düzen. İç içe ızgaralar, karmaşık sınıf hiyerarşileri veya derin iç içe konumlandırma olmadan sayfa kabuğu düzeninin içinde içerik düzeni oluşturur.

Üst bilgiyi yapışkan hâle getirin: header { position: sticky; top: 0; z-index: 10; }. Izgara düzeninde, ızgara alt öğesine uygulanan yapışkan konumlandırma beklendiği gibi çalışır; ana içerik, kenar çubuğu ve yan bölüm onun altında kaydırılırken üst bilgi sabit kalır.

Her iki kenar çubuğu da yapışkan olabilir: nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Ana içerik kaydırılırken görünür kalırlar; böylece yalnızca orta bölümün kaydırıldığı üç panelli bir düzen oluşur.

Kutsal Kâse gibi iki boyutlu sayfa kabuğu düzenleri için ızgarayı kullanın — ızgara, öğeleri adlandırılmış satır ve sütunlara aynı anda yerleştirmede üstündür. Izgara alanlarının içindeki tek boyutlu bileşen düzenleri (bir satırdaki gezinti öğeleri, bir sütundaki kart içeriği) için esnek kutu düzenini kullanın.

grid-template-areas, duyarlı Kutsal Kâse düzenleri için neden özellikle kullanışlıdır?

CSS ızgarası, geçmişte uygulanması zor olan Kutsal Kâse Düzenini kolaylaştırır: grid-template-areas bölgeleri adlandırır, orta satırdaki 1fr görünüm alanı yüksekliğini doldurur ve medya sorguları, duyarlı daraltma için alan eşlemesini yeniden tanımlar. Yapışkan üst bilgiler ve kenar çubukları ek karmaşıklık olmadan bunun üzerine eklenebilir.