CSS Grid alanları

 (ishadeed.com)
2 puan yazan GN⁺ 2024-08-17 | 1 yorum | WhatsApp'ta paylaş
  • CSS Grid, 2017 Mart'tan beri başlıca tarayıcılarda geniş ölçüde destekleniyor olsa da grid-template-areas hâlâ daha az kullanılıyor; buna rağmen satır numarası hesaplamadan yerleşimi doğrudan CSS içinde görsel olarak ifade etmeyi sağlıyor
  • grid-template-areas, alan adlarını string olarak yerleştirip çocuk öğeleri grid-area ile bunlara bağlayan bir yaklaşımdır; aynı ad mutlaka dikdörtgen bir alan oluşturmalıdır
  • Adlandırılmış grid çizgileri, content-start / content-end gibi çizgilere isim vermeye dayanır ve *-start ile *-end deseni tarayıcı tarafından örtük alanlar gibi kullanılabilir
  • Kart çevirme, duyarlı header, editoryal yerleşim, Threads tarzı gönderiler, üst üste binen kartlar ve :has() ile koşullu yerleşimlerde, yalnızca ebeveynin alan stringlerini değiştirerek yerleşim varyasyonları yönetilebilir
  • Chrome, Safari ve Firefox’un tümü Grid alanları için DevTools sunar; özellikle Firefox, alan adlarını göstermesi ve grid-area düzenlerken olası çizgi adı otomatik tamamlama özelliğiyle öne çıkar

grid-template-areas ile yerleşimi daha okunabilir hale getirmek

  • Klasik CSS Grid yerleşiminde genellikle grid-column: 1 / 3 gibi çizgi numaraları doğrudan belirtilir
  • Çizgi numaraları, DevTools’ta bakana kadar görünmez; satır ve sütunun birlikte olduğu yerleşimlerde doğru numarayı zihinden hesaplamak zordur
  • grid-template-areas, her hücreye isim vererek yerleşim kurduğu için CSS kodunun kendisi yerleşimin bir haritası gibi görünür
.page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "item1 item2";
  gap: 1rem;
}

.item-1 {
  grid-area: item1;
}

.item-2 {
  grid-area: item2;
}
  • Çocuk öğeler, grid-area ile adlandırılmış alanlara eşlenir
  • Kart örneğinde "featured featured article" gibi bir tanımla featured alanının 2 sütun, article alanının ise 1 sütun kaplaması sağlanabilir

Sözdizimi ve mutlaka uyulması gereken kurallar

  • grid-template-areas, bir veya daha fazla alan stringi alır
    • Tek bir string, yalnızca sütunlardan oluşan tek boyutlu bir yerleşim oluşturur
    • Birden fazla string, satır ve sütun içeren çok boyutlu bir yerleşim kurar
  • Birden fazla string kullanırken satırları ayrı yazmak, yerleşimi okumayı kolaylaştırır
.element {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "aside main"
    "footer footer";
}
  • Her string, grid’in bir satırını temsil eder; bunu bir tablo gibi düşünebilirsiniz
  • Aynı adla tanımlanan alanlar kod içinde dikdörtgen olmalıdır
/* invalid */
.layout {
  grid-template-areas:
    "header header"
    "sidebar main"
    "header footer";
}

/* valid */
.layout {
  grid-template-areas:
    "header header"
    "sidebar main"
    "sidebar footer";
}
  • Tüm satırlar aynı sayıda alan token’ına sahip olmalıdır; ihtiyaç duyulan alan kullanılmasa bile hücrenin kendisi yine de tanımlanmalıdır
  • Boş hücreler tek nokta veya birden fazla noktayla gösterilebilir
.element {
  grid-template-areas:
    "aside main"
    "... footer";
}
  • Nokta, CSS Grid spesifikasyonundaki null cell token olup boş grid hücresini ifade eder

Adlandırılmış grid çizgileri ile alanlar arasındaki ilişki

  • CSS Grid’de çizgi sayısı, sütun sayısından bir fazladır
    • 3 sütun varsa 4 grid çizgisi oluşur
  • Adlandırılmış grid çizgileri, varsayılan sayıların yerine çizgilere benzersiz adlar vermeye dayanır
.layout {
  grid-template-columns:
    [full-start] 1fr
    [content-start] 2fr
    [content-end] 1fr [full-end];
}

.item {
  grid-column: content-start / content-end;
}
  • Çizgilere ad verseniz de sayısal çizgileri kullanmaya devam edebilirsiniz
  • Track size, bir sütun ya da satırın boyutunu ifade eder; 1fr 1fr gibi değerler track size’dır
  • Adlandırılmış çizgilerde, track’lerin çevresindeki çizgiler adlandırılır
.layout {
  display: grid;
  grid-template-columns:
    [aside-start] 200px [aside-end main-start] 1fr [main-end];
}
  • Tek bir çizgi birden fazla adı paylaşabilir; yukarıdaki örnekte aside-end ile main-start aynı çizgidir
  • aside-start ve aside-end gibi *-start / *-end adları tanımlandığında tarayıcı, örtük çizgi adları üzerinden grid-column: aside gibi kullanımlara izin verebilir
  • Tüm çizgilere isim vermek zorunda değilsiniz; yalnızca önemli çizgileri seçerek adlandırabilirsiniz
  • Yerleşim sırasında sayı ve isimleri karıştırarak grid-column: 1 / content-end gibi kullanımlar yapılabilir

Ebeveynin alan stringleriyle yerleşim varyasyonlarını yönetmek

  • grid-template-areas kullanıldığında çocuk öğelerin grid-area adları aynı kalır, sadece ebeveynin alan stringleri değiştirilerek tüm yerleşim değiştirilebilir
.aside {
  grid-area: aside;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}
  • Aynı aside, main, footer adlarını koruyup yalnızca grid-template-areas stringlerini değiştirerek tüm yerleşim otomatik güncellenebilir
  • Yerleşim kontrolü, ebeveynin alan tanımında merkezileşir ve bu da düzenlemeyi kolaylaştırır

Kart yönünü tersine çevirme

  • Flexbox’ta flex-direction: row-reverse ile kart yönü kolayca ters çevrilebilir
  • CSS Grid’de çizgi numaraları kullanıldığında yönü değiştirmek için sütun tanımıyla birlikte her çocuğun grid-column değeri de güncellenmelidir
  • Adlandırılmış alanlar kullanıldığında kartın görseli ve içeriği alan olarak tanımlanır; ardından yalnızca ebeveynin alan sırası değiştirilir
.card {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-areas: "thumb content";
}

.card__thumb {
  grid-area: thumb;
}

.card__content {
  grid-area: content;
}

.card--flip {
  grid-template-columns: 1fr 150px;
  grid-template-areas: "content thumb";
}
  • Aynı yerleşim grid-template kısayol özelliğiyle de ifade edilebilir
.card--flip {
  grid-template: "content image" / 1fr 150px;
}
  • Kısayol özelliği isteğe bağlıdır; uzun yazımın daha okunabilir olduğunu düşünenler de vardır

Duyarlı header yerleşimi

  • Logo, navigasyon ve aksiyon alanlarından oluşan bir header başlangıçta eşit genişlikte 3 sütunla kurulabilir
  • Çizgi numaraları kullanıldığında .logo, .nav, .actions için ayrı ayrı grid-column tanımlamak gerekir
  • Alan adları kullanıldığında her çocuk logo, nav, actions alanlarına eşlenir ve her viewport için yalnızca ebeveynin grid-template-areas değeri değiştirilir
.header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "logo nav actions";
}

.logo {
  grid-area: logo;
}

.nav {
  grid-area: nav;
}

.actions {
  grid-area: actions;
}
  • Daha küçük boyutlarda logo ve aksiyonlar ilk satıra alınabilir, navigasyon ise tam genişliğe yayılabilir
.header {
  grid-template-areas:
    "logo logo actions"
    "nav nav nav";
}
  • 380px ve üzerindeyse logo solda tutulup navigasyon ile aksiyonlar sağa yerleştirilebilir
@media (min-width: 380px) {
  .header {
    grid-template-areas:
      "logo nav nav"
      "logo actions actions";
  }

  .nav {
    justify-self: end;
  }
}
  • 900px ve üzerinde tekrar tek satırlı yerleşime dönülebilir
@media (min-width: 900px) {
  .header {
    grid-template-areas: "logo nav actions";
  }
}
  • Alan stringleri, CSS içinde UI yerleşimini doğrudan gösteren bir eşleme gibi çalışır

Editoryal yerleşim örneği

  • Başlık, metin ve görsel içeren bir bölümde grid-template-areas, viewport boyutuna göre yerleşimi kolayca değiştirmeyi sağlar
.section {
  display: grid;
  grid-template-areas:
    ". title title"
    "thumb content content";
  gap: 1rem;
}
  • Başlığın solundaki nokta, boş alanı gösteren bir null cell token’dır
  • time.com tarzı bölüm örneğinde feature, secondary, most-read alanları ile birlikte her iki yanda boş sütunlar kullanılır
.featured-section {
  display: grid;
  grid-template-areas:
    ". feature most-read ."
    ". secondary most-read .";
  grid-template-columns: 1fr minmax(auto, 57.313rem) minmax(12rem, 18.75rem) 1fr;
  grid-template-rows: minmax(auto, 25rem) 1fr;
}
  • Yanlardaki boş sütunlar çoğunlukla sağ-sol boşluk işlevi görür
  • Duyarlı sürümde küçük ekranlarda feature, secondary, most-read dikey olarak sıralanır; 500px ve 900px üzerindeyse sütun ve alan tanımları değiştirilir
  • grid-template-rows, alan tanımıyla ikame edilebildiği için mutlaka gerekli değildir

Threads tarzı gönderi bileşeni

  • Threads app by Meta incelemesinde gönderi bileşeninde CSS Grid’in nasıl kullanıldığı görülebilir
  • Orijinal örnekte öğeler grid-template-columns, grid-template-rows ve çizgi numaralarıyla yerleştirilir
.postBody {
  grid-column-start: 2;
  grid-row-start: 2;
  grid-row-end: span 3;
}
  • Çeşitli gönderi varyasyonları grid-template-areas ile daha kolay ifade edilebilir
.post {
  grid-template-areas:
    "avatar header"
    "avatar body"
    ". body"
    ". footer";
}

.post--reply {
  grid-template-rows: 40px max-content max-content;
  grid-template-areas:
    "avatar header"
    "body body"
    "body body"
    "footer footer";
}

.post--nested {
  grid-template-areas:
    "avatar header"
    "avatar body"
    "line body"
    "footer footer";
}
  • Varsayılan, yanıt ve iç içe geçmiş gönderi varyasyonları yalnızca alan stringlerine bakılarak ayırt edilebilir

Üst üste binen öğeler ve alan adları

  • grid-template-areas içinde aynı ad dikdörtgen olmak zorunda olduğundan, aynı adı dikdörtgen olmayan bir biçimde tekrar etmek geçersizdir
.layout {
  display: grid;
  grid-template-columns: 1fr 1fr fr;
  grid-template-areas:
    "card tag tag"
    "title title card";
}
  • Yukarıdaki örnekte card, dikdörtgen oluşturmadığı için invalid sayılır
  • Üst üste binen kartlarda thumb-1, thumb-2 gibi yeni alan adları tanımlanabilir ve bu adlar grid-column ile grid-row içinde kullanılabilir
.card {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "thumb-1 tag"
    "title thumb-2";
}

.thumb {
  grid-column: thumb-1 / thumb-2;
  grid-row: thumb-1 / thumb-2;
}
  • Etiket ve başlık ayrı ayrı grid-area ile yerleştirilebilir, ardından align-self ve justify-self ile hizalanabilir
  • Gerekirse çocuk öğelerin yığılma sırası yönetilmelidir, ancak örnekte kaynak sırası bunun için yeterlidir
  • Bu üst üste binme örneği Oddbird’s Cascading Layouts sayfasından ilham alır

:has() ve koşullu yerleşim

  • CSS :has() seçicisi Grid alanlarıyla birleştirildiğinde, belirli bir öğenin varlığına göre yerleşim değiştirilebilir
  • <figure> içinde figcaption olduğunda ve olmadığında farklı alan tanımları uygulanabilir
figure {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "img img img";
  gap: 0.5rem;
}

img {
  grid-area: img;
}

figcaption {
  grid-area: caption;
}

.card:has(figcaption) {
  grid-template-areas:
    "img img caption"
    "img img .";
}

LTR/RTL çok dilli yön desteği

  • CSS Grid, sayfanın yönü LTR mi RTL mi olduğuna göre yerleşimi ayarlar
  • Adlandırılmış grid alanları da sayfa yönünü takip eder; bu yüzden RTL’de yerleşim tersine döner
  • RTL yerleşim tasarımıyla ilgili olarak RTL Styling 101 rehberine bakılabilir

DevTools desteğindeki farklar

  • Chrome, Safari ve Firefox’un tümü Grid alanları için DevTools desteği sunar
  • Chrome
    • Alan adlarını sol üstte konumlandırdığı için alanlar üst üste görünüyormuş gibi olabilir
    • Renkli overlay, tasarımın algılanışını değiştirebilir
  • Safari
    • Pembe dış çizgi, öğeleri daha net ayırt etmeye yardımcı olur
    • Çizgi adları görülebilir
    • Çizgi adlarının gösterim biçimi, satırları üst üste yığarak gösterdiği için geliştirilmeye açıktır
  • Firefox
    • Alan adları Chrome ve Safari’ye göre daha net görünür
    • *-start, *-end gibi özel adlar girilirken otomatik tamamlama listesi sunar
    • Çocuk öğenin grid-area değeri düzenlenirken kullanılabilecek tüm çizgi adlarını listeler

Kaynaklar

İlgili okumalar

1 yorum

 
GN⁺ 2024-08-17
Hacker News yorumları

  • Animasyon demosu epey ilginçti; meğer o animasyonun CSS ile yapılmamış olması hayal kırıklığı yarattı
    Flexbox’ı öğrendikten sonra “bu kadarı yeterli” diye düşündüm ve Grid’i derinlemesine öğrenmedim. Grid’i tercih etmek için nedenler var gibi görünüyor [0], ama genel olarak yalnızca Grid ile yapılabilecek bir işe ihtiyaç duyduğum olmadı; veri tabloları için de gerçek <table> kullanıyorum
    [0] https://css-tricks.com/css-grid-replace-flexbox/

    • İhtiyacın olan her şeyi kapsayan bir aracı öğrenmiş olmak iyi bir şey
      Grid’i yalnızca https://labs.jensimmons.com/2016/examples/image-gallery-grid... gibi duyarlı görüntü galerileri veya https://every-layout.dev/demos/grid-cards/ gibi duyarlı kartlar için kullandım. grid-template-columns öğrenmeye değer, grid-gap ise kullanışlı. Bunun dışında Flexbox neredeyse her şeyi hallediyor gibi
      Ancak grid-template-areas hâlâ bana biraz belirsiz geliyor. Yazıda kırılma noktalarına göre yerleşimi ayarlamak ya da “bir ekip üyesinin yerleşimi değiştirmesi gerektiğinde” kolay olması gibi gerekçeler veriliyor, ama belki de hedef okur ben değilimdir
    • Grid öğrenmek için eğlenceli bir araç: https://cssgridgarden.com/
    • Flex çoğu durumda yeterli, ama Grid’in de kullanılacağı yerler var. Küçük ekranda satır başına tek karta düşen 3 sütunlu kart yerleşimi, özel kenar çubuğu olan sayfa yapısı, yeniden boyutlandırma sırasında belirli bir düzeni koruması gereken öğeler gibi durumlar buna örnek
      İhtiyaca göre ikisini de kullanabilirsiniz; birlikte çok güçlü bir yerleşim aracı hâline geliyorlar
    • “Hayır, Flexbox ‘yeterince iyi’ değil”
      https://www.youtube.com/watch?v=MWWcZzossc8

  • Bir dakika, 1/3 kesir değil de 1’den 3’e kadar bir aralık mı? Neden özellikle böyle bir söz dizimi seçtiklerini anlamıyorum. Programlamada aralık belirtmek için makul ve iyi bilinen pek çok söz dizimi var; örneğin 1..3 gibi

    • CSS hakkında ilk bilinmesi gereken şey, CSS’in programlama dili ifadelerini değil, basılı sayfa yerleşiminin dilini kullandığıdır
      Programcıların CSS’te yaşadığı sorunların önemli bir kısmı sanki bu yanlış anlamadan kaynaklanıyor
    • Grid özelliklerini seviyorum ama söz dizimi CSS’in geri kalanından epey farklı olduğu için kafa karıştırıyor. Sanki bu köşe ayrı yalıtılarak tasarlanmış ya da “bu kez düzgün yapalım” yaklaşımının izlerini taşıyor
    • Eğik çizginin iki tarafında yalnızca sayılar olmak zorunda değil; birden fazla kelime de gelebilir: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column...
    • Bir programcıya CSS’te !important ifadesinin “önemli değil” değil, “önemli!” anlamına geldiğini söylediğinizi hayal edin

  • Ne Grid’i ne de Flexbox’ı tam oturtabildim. En son nispeten iyi kullanabildiğim yerleşim stratejisi float idi. Bu yazıyı görünce bir sonraki yerleşimi tasarlarken CSS Grid’i denemek için güvenim arttı; yazı da iyi hazırlanmış

    • float ile uğraştıysan Grid ve Flex çok daha kolay gelecektir. Bir iki gün ayırıp birkaç yerleşim yapmak yeterli. Eski tarayıcılarla boğuşmanın aksine bu ikisi doğrudan iyi çalışıyor; hatta aslında biraz sıkıcı bile
      İyi yazı çok, ama CSS-Tricks’in şu iki yazısını okumak bile benim için yeterli olmuştu
      https://css-tricks.com/snippets/css/a-guide-to-flexbox/
      https://css-tricks.com/snippets/css/complete-guide-grid/
    • Grid’i öğrenmeden bir süre idare edebilirsiniz, ama Flexbox neredeyse şart. Eski float hack’lerinden çok daha rahat ve modern CSS’in geneline yayılmış durumda
      Daha önce anılan CSS-Tricks yazılarına ek olarak MDN’nin Flexbox rehberini[1] ve “CSS flexible box layout” başvuru belgesini[2] öneririm. Flexbox’ın arkasındaki kavramları, özellikleri ve kısaltma özelliklerinin gerçekte nasıl çalıştığını daha derin anlamama yardımcı oldu
      [1]: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
      [2]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexibl...
    • Flexbox, float tabanlı ızgara sistemlerinin doğru yapılmış hâli gibi geliyor. Alt öğeleri ister dikey ister yatay yerleştirebiliyorsunuz; oysa clearfix hack’i kullanılan float aslında satır bazlı yerleşimden ibaretti
      Ancak Flexbox da satır kırabilen tek boyutlu yerleşime daha yakın olduğu için işin püf noktası iç içe geçirmek ve üst üste kurmak. Grid’de şablon var ve doğrudan çocuk öğeler önceden belirlenmiş alanları kaplıyor; bu yüzden Flexbox’tan daha statik ve içteki iç içe öğeleri etkilememek gibi bir sınırlaması var. Yine de subgrid’in bu kısmı değiştireceği görülüyor
    • float’ı anladıysan bu bile nadir bir başarıdır; Flex/Grid’i oldukça keyifle kullanabilirsin
    • Grid’in çok özelliği var, ama Flex yeterince basit olmasına rağmen hâlâ çok güçlü

  • İlgili kaynaklar:
    Grid Garden https://cssgridgarden.com
    Flexbox Froggy https://flexboxfroggy.com

  • Bu belgeden daha temel, “giriş öncesi” bir sürüm olsa iyi olurdu. Daha tanıtım kısmında takılıp ilerleyemedim. Özellikle “Grid içinde alt öğeleri yerleştirmek için grid-column ile her öğenin çizgi numarasını belirtmek gerekir” denilen yerde, buradaki çizgi numarasının ne olduğunu anlamadım.
    Bağlamdan anlarım diye zorladım ama hemen ardından 1 / 3, 1 / 4 gibi ifadelerde yine takıldım.

    • Çizgi numarası, sütunların arasını ayıran çizgidir. 2 sütun varsa 3 çizgi vardır: |a||b| içinde ortadaki iki çizgi fiilen tek çizgi sayıldığı için toplam 3 çizgi olur.
      Bu yüzden 1/3 bir kesir değil, sütun aralığıdır; “1 numaralı çizgide başlar ve 3 numaralı çizgide biter” anlamına gelir.
    • Biraz aşağı kaydırınca, doğrudan oynayıp ne olduğunu görebileceğiniz canlı bir demo var.
      “Çizgi numarası” adı pek iyi değil ama aslında sütunun kenarı demek. Bu yüzden 1/3, 1. kenardan, yani en soldan 3. kenara kadar gider ve 2 sütunun tamamını kaplar.

  • CSS Grid için Jen Simmons Mondrian with auto flow’u şiddetle öneririm. https://labs.jensimmons.com/2017/01-011.html adresinde C ve D tuşlarına basıp pencere boyutunu değiştirmeniz yeterli. Birlikte izlenebilecek bir YouTube videosu da var: https://www.youtube.com/watch?v=qNtJ5p3h2A4
    Gerçekten harika.
    auto flow konusunda hâlâ anlamak istediğim şey, boşlukları algılayıp doldurma yöntemi. Boyutları birbirinden farklı nesneler rastgele durduğunda, auto flow’un boşluk bırakmamasını nasıl sağlarız? Ya da boşlukları algılayıp bir şey eklemek mümkün mü?

  • Umarım aptalca bir soru değildir ama sözdizimi neden 1/2, 3/4 gibi eğik çizgiyle tanımlanmış? 1-2 gibi 1. sütundan 2. sütuna kadar ya da 1->2 gibi bir ifade daha doğal değil mi?

    • Sütun numarası negatif olabilir. O zaman 1--1, 1->-1, 1/-1 seçeneklerinden hangisi daha iyi olur?
    • Ok işareti belki mümkün olabilirdi ama iki yanda boşluk olmasının bir nedeni var. Yalnızca sayı gelmek zorunda değil: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column...
      CSS’te değerler zaten boşlukla ayrılıyor; ayrıca tire olduğunda genelde akla gelen sezgiyi de düşünürsek, aşağıdaki çok daha iyi:
      grid-column: 4 somegridarea / 6;
      grid-column: span 3 / 6;
      grid-column: span somegridarea / span someothergridarea;
      Aşağıdaki gibi yazmaktan çok daha anlaşılır:
      grid-column: 4 somegridarea-6;
      grid-column: span 3-6;
      grid-column: span 3->6;
      grid-column: span somegridarea-span someothergridarea;
      grid-column: span somegridarea->span someothergridarea;

  • Böyle interaktif blog yazılarını gerçekten seviyorum. Grid için https://grid.layoutit.com/ gibi araçlarda grid area’yı doğrudan kurcalamayı şiddetle öneririm.
    Yıllardır Grid düzenlerini o siteyle planlıyorum; aralık ayarlamak çok daha kolay hale geliyor.

  • CSS Grid’i gerçekten ilk kez şimdi anlamış olabilirim. Numara gösterimi gerçekten yardımcı oldu ve ileride sık sık başvuracağım bir yazı.

    • Firefox geliştirici araçlarında da bu numaralar varsayılan olarak gösterilebiliyor. Chrome’dan emin değilim.

  • CSS Grid’i ve area kavramını seviyorum ama bence hâlâ en zor kısım, özellikle mobil ve masaüstü boyutları arasında responsive yönetimi. Hangi UI öğesinin açılması gerektiğine, tam ekran olup olmamasına göre grid-template-area ile satır/sütun boyutlarını JavaScript ile güncellemek çoğu zaman gerekiyor.
    minmax ya da calc ile çözülen bir dünya henüz bulamadım; umarım cevabı bilen biri vardır.

    • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_contain...
    • Böyle durumlarda Grid’i aynen kullanıp satır/sütun değerlerini sabit değerler yerine var(--foo) gibi CSS değişkenleri olarak tutmak iyi bir yöntem.
      Böylece JavaScript’te yalnızca ilgili değişkenin değerini güncellemeniz yeterli olur; Grid de bu değeri yansıtır.
    • Yazıda template area’ların responsive için ne kadar iyi olduğunun vurgulanmamasına şaşırdım. Media query kullanarak her ekran için farklı Grid alanları tanımlayabilir, her öğeyi o ekran boyutunda istediğiniz yerleşime taşıyabilirsiniz. Belirli bir boyutta bir öğeyi gizlemeniz gerekiyorsa o boyutta display: none vermeniz yeterli.
      Çok basit bir örnek: https://codepen.io/trescenzi/pen/vYqpjvL
    • Bu tür durumların önemli bir kısmı :has() veya subgrid ile çözülebilir gibi geliyor ama doğrudan deneyimim fazla yok.
    • Media query denediniz mi?