Mizanpajınızı Görselleştirmek (ve Referans Vermek) için Izgara Adlandırılmış Alanları Kullanma

CSS Izgarasını kullanarak basit veya karmaşık düzenler oluşturduğumuzda, öğeleri genellikle satır numaralarıyla konumlandırırız. Izgara düzenleri, pozitif ve negatif satır numaralarıyla otomatik olarak indekslenen ızgara çizgileri içerir (bu, biz açıkça adlandırın). Öğeleri satır numaralarıyla konumlandırmak, işleri düzenlemenin iyi bir yoludur, ancak CSS Grid'in aynı şeyi küçük boyutlu bir bilişsel engel ile gerçekleştirmenin birçok yolu vardır. Bu yollardan biri, “ASCII” yöntemi olarak düşünmeyi sevdiğim bir şey.

Özetle ASCII yöntemi

Yöntem kullanmak için aşağı kaynar grid-template-areas ızgara öğelerini satır numaraları yerine ızgara kapsayıcı düzeyinde özel adlandırılmış alanları kullanarak konumlandırmak için.

Bir öğeyi kullanarak bir ızgara kapsayıcı olarak tanımladığımızda display: grid, ızgara kapsayıcı, varsayılan olarak, ızgara öğelerini yeterince tutan tek sütunlu bir iz ve satırlar oluşturur. Kapsayıcının ızgara düzenine katılan alt öğeleri, yapılarına bakılmaksızın ızgara öğelerine dönüştürülür. display özelliği.

Örneğin, sütunları ve satırları açıkça tanımlayarak bir ızgara oluşturalım. grid-template-columns ve grid-template-rows özellikleri.

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

Bu küçük CSS parçacığı, ızgara öğelerinin sütunlarda eşit yer kapladığı ve ızgaranın iz boyutunda üç satır içerdiği 3×2'lik bir ızgara oluşturur. 200px.

Tüm düzeni şu şekilde tanımlayabiliriz: adlandırılmış ızgara alanları ile grid-template-areas Emlak. Göre özellik, başlangıç ​​değeri grid-template-areas is none.

grid-template-areas = none | <string>+

<string>+ bir alıntı ile çevrelenmiş dize grubunu listeliyor. Her dize bir hücre olarak temsil edilir ve alıntılanan her dize bir satır olarak temsil edilir. Bunun gibi:

grid-template-areas: "head head" "nav main" "foot foot";

Değeri grid-template-areas düzeni dört ızgara alanına sahip olarak tanımlar. Bunlar,

• head
• nav
• main
• foot

head ve foot iki sütun izini ve bir satır izini kapsar. Kalan nav ve main her biri bir sütun izini ve bir satır izini kapsar. Değeri grid-template-areas ASCII karakterlerini düzenlemeye çok benzer ve Chris önerdi Bir süre önce, onu anlamanın en sorunsuz yolu olan CSS'nin kendisinden mizanpajın genel yapısının bir görselleştirmesini alabiliriz.

Tamam, bu yüzden düzenimizi dört adlandırılmış ızgara alanıyla oluşturduk: head, nav, main, foot.

Şimdi ızgara öğelerini satır numaraları yerine adlandırılmış ızgara alanlarına göre konumlandırmaya başlayalım. Özellikle, bir yerleştirelim header öğeyi adlandırılmış ızgara alanına head ve adlandırılmış ızgara alanını belirtin head içinde header öğesini kullanarak grid-area özelliği.

Bir ızgara düzeninde adlandırılmış ızgara alanları kimlikler. Yani, az önce yaptığımız şey, adında özel bir kimlik oluşturmaktı. head öğeleri belirli ızgara izlerine yerleştirmek için kullanabileceğimiz.

header { grid-area: head; }

Diğer özel kimlikleri kullanarak başka HTML öğeleri yapabiliriz:

nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: foot; }

Adlandırılmış alan değerlerinin yazılması

Göre CSS Izgara Düzen Modülü Seviye 1, tüm dizeler aşağıdaki belirteçler altında tanımlanmalıdır:

• Adlandırılmış hücre belirteci: Bu, ızgaradaki adlandırılmış ızgara alanını temsil eder. Örneğin, head adlandırılmış bir hücre belirtecidir.
• Boş hücre belirteci: Bu, ızgara kapsayıcısındaki adsız ızgara alanını temsil eder. Örneğin, ızgaradaki boş bir hücre, bir boş hücre belirtecidir.
• Çöp belirteci: Bu, geçersiz bir bildirim gibi bir sözdizimi hatasıdır. Örneğin, ızgara öğelerinin sayısıyla karşılaştırıldığında farklı sayıda hücre ve satır, bir bildirimi geçersiz kılacaktır.

In grid-template-area, alıntılanan her dizenin (satırlar) aynı sayıda hücreye sahip olması ve herhangi bir hücreyi yok saymadan tam ızgarayı tanımlaması gerekir.

Bir hücreyi görmezden gelebilir veya bir hücre olarak bırakabiliriz. boş hücre nokta karakterini kullanarak (.)

.grid { 
  display: grid;
  grid-template-areas:
    "head head"
    "nav main"
    "foot .";
}

Bu size görsel olarak garip veya dengesiz geliyorsa, aralarında boşluk bırakmadan birden çok noktalı karakter kullanabiliriz:

.grid {
  display: grid;
  grid-template-areas:
    "head head"
    "nav main"
    "foot ....";
}

Adlandırılmış bir hücre belirteci birden çok ızgara hücresine yayılabilir, ancak bu hücreler dikdörtgen bir düzen oluşturmalıdır. Başka bir deyişle, spesifikasyona göre “L” veya “T” şeklinde mizanpajlar oluşturamıyoruz. destek ipucu gelecekte bağlantısız bölgeleri olan dikdörtgen olmayan düzenler için.

ASCII, satır tabanlı yerleşimden daha iyidir

Satır tabanlı yerleşim, grid-column ve grid-row bir sayı tarafından otomatik olarak dizine eklenen ızgara çizgi numaralarını kullanarak bir öğeyi ızgarada konumlandırma özellikleri:

.grid-item {
  grid-column: 1 / 3; /* start at grid column line 1 and span to line 3 */
}

Ancak, düzenimiz bir kesme noktasında değişirse, ızgara öğesi satır numaraları değişebilir. Bu durumlarda, belirli bir kesme noktasında kullandığımız aynı satır numaralarına güvenemeyiz. Kodu anlamak için fazladan bilişsel zorunluluk gerektiren yer burasıdır.

Bu yüzden ASCII tabanlı bir yaklaşımın en iyi sonucu verdiğini düşünüyorum. Kullanarak her kesme noktası için düzeni yeniden tanımlayabiliriz. grid-template-areas düzenin doğrudan CSS'de nasıl görüneceğine dair uygun bir görsel sunan ızgara kapsayıcı içinde - bu, kendi kendini belgeleyen kod gibidir!

.grid {
  grid-template-areas:
    "head head"
    "nav main"
    "foot ...."; /* much easier way to see the grid! */
}

.grid-item {
  grid-area: foot; /* much easier to place the item! */
}

Aslında DevTools'ta bir ızgaranın satır numaralarını ve ızgara alanlarını görebiliriz. Örneğin Firefox'ta Düzen paneline gidin. Daha sonra, altında Grid sekmesinde, “Izgara görüntüleme ayarları” ve etkinleştir "Satır numarasını görüntüle" ve "Alan adlarını görüntüle" seçenekleri.

Adlandırılmış alanları kullanan bu ASCII yaklaşımı, öğelerin yerleşimini görselleştirmek ve kolayca bulmak için çok daha az çaba gerektirir.

"Evrensel" kullanım durumuna bakalım

Adlandırılmış ızgara alanları hakkında bir öğretici gördüğümde, genel örnek genellikle aşağıdakileri içeren bazı düzen kalıplarıdır: header, main, sidebar, ve footer alanlar. Bu kadar geniş bir ağ oluşturduğu için bunu “evrensel” kullanım durumu olarak düşünmeyi seviyorum.

Nasıl olduğunu göstermek için harika bir örnek grid-template-areas çalışır, ancak gerçek hayattaki bir uygulama genellikle düzeni belirli görüntü alanı genişliklerinde değiştirmek için ayarlanmış medya sorgularını içerir. Yeniden beyan etmek zorunda kalmak yerine grid-area her şeyi yeniden konumlandırmak için her kesme noktasındaki her ızgara öğesinde kullanabiliriz grid-template-areas bunun yerine kesme noktasına "yanıt vermek" için - ve süreçteki her kesme noktasında düzenin güzel bir görselini elde edin!

Düzeni tanımlamadan önce, her elemana bir ident atayalım. grid-area temel stil olarak özellik.

header {
  grid-area: head;
}

.left-side {
  grid-area: left;
}

main {
  grid-area: main;
}

.right-side {
  grid-area: right;
}

footer {
  grid-area: foot;
}

Şimdi layout'u tekrar temel stil olarak tanımlayalım. Her şeyin varsayılan olarak üst üste gelmesi için mobil öncelikli bir yaklaşımla gidiyoruz:

.grid-container {
  display: grid;
  grid-template-areas:
    "head"
    "left"
    "main"
    "right"
    "foot";
}

Her ızgara öğesi otomatik boyutlu bu konfigürasyonda - ki bu biraz garip görünüyor - böylece ayarlayabiliriz min-height: 100vh Bize çalışmak için daha fazla alan sağlamak için ızgara kabında:

.grid-container {
  display: grid;
  grid-template-areas:
    "head"
    "left"
    "main"
    "right"
    "foot";
  min-height: 100vh;
}

şimdi istediğimizi söyleyelim main yığılmışın sağına oturacak eleman left ve right biraz daha geniş bir görüntü alanı genişliğine ulaştığımızda kenar çubukları. yeniden ilan ediyoruz grid-template-areas Bunu elde etmek için güncellenmiş bir ASCII düzeniyle:

@media (min-width: 800px) {
  .parent {
    grid-template-columns: 0.5fr 1fr;
    grid-template-rows: 100px 1fr 1fr 100px;
    grid-template-areas:
      "head head"
      "left main"
      "right main"
      "foot foot";
  }
}

Tamamen estetik için bazı sütun ve satır boyutlarını oraya attım.

Tarayıcı daha da genişledikçe, düzeni tekrar değiştirmek isteyebiliriz, böylece main arasına sıkıştırılır left ve right kenar çubukları. Düzeni görsel olarak yazalım!

.grid-container {
  grid-template-columns: 200px 1fr 200px; /* again, just for sizing */
  grid-template-areas:
    "head head head"
    "left main right"
    "left main right"
    "foot foot foot";
}

Esneklik için örtük satır adlarından yararlanma

Spesifikasyona göre, grid-template-areas adlandırılmış ızgara alanları tarafından oluşturulan ızgara çizgileri için otomatik olarak adlar oluşturur. Bu örtük olarak adlandırılan ızgara çizgileri diyoruz çünkü bunlar bizim için herhangi bir ek çalışma olmadan ücretsiz olarak adlandırılıyor.

Her adlandırılmış ızgara alanı, ikisi sütun yönünde ve ikisi satır yönünde olmak üzere, örtük olarak adlandırılmış dört ızgara çizgisi alır. -start ve -end kimliğine eklenir. Örneğin, adlı bir ızgara alanı head gets head-start ve head-end toplam dört dolaylı olarak adlandırılan ızgara çizgisi için her iki yönde çizgiler.

Bu çizgileri avantajımıza kullanabiliriz! Örneğin, bir öğenin üst üste binmesini istiyorsak main, left, ve right ızgaramızın alanları. Daha önce, yerleşimlerin nasıl dikdörtgen olması gerektiğinden bahsetmiştik - “T” ve “L” şeklinde yerleşimlere izin verilmez. Sonuç olarak, kaplamayı yerleştirmek için ASCII görsel yerleşim yöntemini kullanamıyoruz. Bununla birlikte, örtük satır adlarımızı aynı kullanarak kullanabiliriz. grid-area diğer öğeleri konumlandırmak için kullandığımız bindirme üzerindeki özellik.

Bunu biliyor muydun grid-area stenografi bir özelliktir, aynı şekilde margin ve padding steno özellikleri nelerdir? Aynı şekilde birden fazla değer alır, ancak "saat yönünde" bir yön izlemek yerine, margin - hangi sırayla gider margin-block-start, margin-inline-end, margin-block-end, ve margin-inline-start - grid-area şöyle gider:

grid-area: block-start / inline-start / block-end / inline-end;

Ama biz satırlar ve sütunlardan bahsediyoruz, blok ve satır içi yönlerden değil, değil mi? Eh, birbirlerine karşılık gelirler. Satır ekseni blok yönüne ve sütun ekseni satır içi yöne karşılık gelir:

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

Bu kaplama öğesini yerleşimimizde bir ızgara öğesi olarak konumlandırmaya geri dönün. bu grid-area özelliği, örtük olarak adlandırılan ızgara çizgilerimizi kullanarak öğeyi konumlandırmaya yardımcı olacaktır:

.overlay {
  grid-area: left-start / left-start / right-end / main-end;
}

Minimal bir ızgara sistemi oluşturma

Az önce gördüğümüz “evrensel” kullanım durumu gibi düzenlere odaklandığımızda, ızgara alanlarını eleman başına bir alan olarak düşünmek cazip geliyor. Ama böyle çalışmak zorunda değil. Düzende onlara daha fazla yer ayırmak için kimlikleri tekrarlayabiliriz. tekrarladığımızda gördük. head ve foot son örnekteki idents:

.grid-container {
  grid-template-areas:
    "head head head"
    "left main right"
    "left main right"
    "foot foot foot";
}

Dikkat edin main, left, ve right da yinelenir, ancak blok yönünde.

Tam sayfa düzenlerini unutalım ve bir bileşende adlandırılmış ızgara alanlarını kullanalım. Izgara, bileşen düzenleri için tam sayfalar kadar iyidir!

İşte bir dizi görüntüyü ve ardından farklı metin bloklarını destekleyen oldukça standart bir kahraman bileşeni:

HTML oldukça basittir:

<div class="hero">
  <div class="image">
    <img src="..." alt="" />
  </div>
  <div class="text">
    <!-- ... -->
  </div>
</div>

Bunu gerçek hızlı yığılmış bir düzen için yapabiliriz:

.hero {
  grid-template-areas:
    "image"
    "text";
}

Ama sonra bazılarına ulaşmak zorundayız padding, max-width veya metin alanını resim satırından daha dar hale getirmek için ne olursa olsun. Kimliklerimizi her iki satırda da tekrarlayarak ASCII düzenimizi dört sütunlu bir ızgaraya genişletmeye ne dersiniz:

.hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* maintain equal sizing */
  grid-template-areas:
    "image image image image"
    "text  text  text  text";
}

Pekala, şimdi ızgara öğelerimizi adlandırılmış alanlara yerleştirebiliriz:

.hero .image {
  grid-area: image;
}

.hero .text {
  grid-area: text;
}

Şimdiye kadar çok iyi - her iki sıra da tüm genişliği kaplıyor. Bunu küçük ekranlar için temel düzenimiz olarak kullanabiliriz.

Ama belki de görüntü alanı daha geniş bir genişliğe ulaştığında daha dar metni tanıtmak istiyoruz. Sütunları "atlamak" için nokta karakteri hakkında bildiklerimizi kullanabiliriz. hadi text ident bu durumda ilk ve son sütunları atlayın.

@media (min-width: 800px) {
  main {
    grid-template-columns: repeat(6, 1fr); /* increase to six columns */
    grid-template-areas:
      "image image image image image image"
      "..... text  text  text  text  .....";
  }
}

Şimdi istediğimiz aralığa sahibiz:

Düzen, daha da büyük kesme noktalarında ek ince ayar gerektiriyorsa, daha fazla sütun ekleyebilir ve oradan gidebiliriz:

.hero {
  grid-template-columns: repeat(8, 1fr);
  grid-template-areas:
    "image image image image image image image image"
    "..... text  text  text  text  text  text  .....";
}

Geliştirme aracı görselleştirmesi:

12 sütunlu ve 16 sütunlu mizanpajların CSS çerçevelerinde büyük şeyler olduğunu hatırlıyor musunuz? Buna hızla ölçeklendirebilir ve kodda güzel bir görsel ASCII düzeni sağlayabiliriz:

main {
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "image image image image image image image image image image image image"
    "..... text  text  text  text  text  text  text  text  text  text  .....";
}

Daha karmaşık bir şeye bakalım

Oldukça genel bir örneğe ve nispeten basit bir örneğe baktık. Yine de daha karmaşık düzenlerle güzel ASCII düzen görselleştirmeleri elde edebiliriz.

Buna kadar çalışalım:

Bunu HTML'de iki öğeye böldüm, bir header ve main:

<header>
  <div class="logo"> ... </div>
  <div class="menu"> ... </div>
</header>
<main>
  <div class="image"> ... </div>
  <h2> ... </h2>
  <div class="image"> ... </div>
  <div class="image"> ... </div>
</main>

Flexbox'ın daha uygun olduğunu düşünüyorum. header çünkü alt öğelerini bu şekilde kolayca yerleştirebiliriz. Yani, hayır grid Orada:

header {
  display: flex;
  justify-content: space-between;
  /* etc. */
}

Fakat grid için çok uygundur main elemanın düzeni. Düzeni tanımlayalım ve kimlikleri, konumlandırmak için ihtiyaç duyduğumuz karşılık gelen öğelere atayalım. .text Ve üç .image elementler. Küçük ekranlar için temelimiz olarak bununla başlayacağız:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "image1 image1 .....  image2"
    "texts  texts  texts  texts"
    ".....  image3 image3 .....";
}

Bununla nereye gittiğimizi zaten görebilirsiniz, değil mi? Düzen bizim için görselleştirilir ve ızgara öğelerini özel kimliklerle yerine bırakabiliriz:

.image:nth-child(1) {
  grid-area: image1;
}

.image:nth-last-child(2) {
  grid-area: image2;
}

.image:nth-last-child(1) {
  grid-area: image3;
}

h2 {
  grid-area: texts;
}

Bu bizim temel düzenimiz, bu yüzden daha geniş bir kesme noktasına girelim:

@media (min-width: 800px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas:
      ". image1 image1 ...... ......  ...... image2 ."
      ". texts  texts  texts  texts   texts  image2 ."
      ". .....  image3 image3 image3  image3 ...... .";
  }
}

Bahse girerim, bunun nasıl görüneceğini tam olarak biliyorsunuzdur çünkü düzen tam orada, kodun içindedir!

Daha da büyütmeye karar verirsek aynı anlaşma:

.grid {
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    ". image1 image1 .....  .....   .....  .....  .....  .....  .....  .....  ."
    ". texts  texts  texts  texts   texts  texts  texts  texts  texts  image2 ."
    ". .....  image3 image3 image3  image3 .....  .....  .....  .....  .....  .";
}

İşte tam demo:

"negatif" kullanıyorum margin Başlığı üst üste gelecek ilk görüntüyü elde etmek için "hack".

Tamamlayan

başka kullanan var mı merak ettim grid-template-areas ızgara düzeninin bir ASCII görseline sahip olmanın yararına adlandırılmış alanlar oluşturmak. Bunu CSS kodumda referans olarak almak, satır numaralarıyla uğraşırken daha da karmaşık olabilecek bazı karmaşık tasarımların gizemini gidermeye yardımcı oldu.

Ancak, ızgara düzenlerini bu şekilde tanımlamak, bize bu yazı boyunca gördüğümüz CSS Izgarası hakkında bazı ilginç şeyler öğretir:

• The grid-template-areas özelliği, özel kimlikler veya "adlandırılmış alanlar" oluşturmamıza ve bunları kullanarak ızgara öğelerini konumlandırmak için kullanmamıza olanak tanır. grid-area özelliği.
• Üç tür "belirteç" vardır: grid-template-areas adlandırılmış hücre belirteçleri, boş hücre belirteçleri ve çöp hücresi belirteçleri dahil değerler olarak kabul eder.
• içinde tanımlanan her satır grid-template-areas aynı sayıda hücreye ihtiyaç duyar. Tek bir hücreyi yok saymak bir düzen oluşturmaz; bir çöp belirteci olarak kabul edilir.
• Tablodaki ızgara düzeninin görsel bir ASCII-benzeri diyagramını alabiliriz. grid-template-areas ızgara düzenini tanımlarken adlandırılmış hücre belirteçleri arasında gerekli boşlukları kullanarak özellik değeri.
• Boş hücre belirtecinin içinde boşluk olmadığından emin olun (örn. .....). Aksi takdirde, boş hücre belirteçleri arasındaki tek bir boşluk gereksiz boş hücreler oluşturarak geçersiz bir yerleşime neden olur.
• Kullanarak ızgara öğelerini yeniden konumlandırarak düzeni çeşitli kesme noktalarında yeniden tanımlayabiliriz. grid-area, ardından düzeni ile yeniden bildirmek grid-template-areas Gerekirse parça listesini güncellemek için ızgara kapsayıcısında. Izgara öğelerine dokunmanıza gerek yok.
• Özel adlandırılmış ızgara alanları, otomatik olarak örtük olarak atanmış dört satır adı alır — <custom-ident>-start ve <custom-ident>-end hem sütun hem de satır yönlerinde.