CSS Düzeni Eğitimi: Klasik Yaklaşımlardan En Son Tekniklere

Yayınlanan: 2022-03-11

CSS'de uzmanlaşmadan web düzenine hakim olmak, karada yüzmeyi öğrenmek kadar mümkün. Ancak, bir kez ustalaştıktan sonra sizinle ömür boyu kalan bir beceri olan yüzmenin aksine, CSS'de ustalaşmak, CSS'nin kendisi sürekli olarak evrimleştiği için asla bitmeyen bir süreçtir.

Zorluk, CSS uygulamasındaki farklılıklar ve farklı tarayıcılar arasındaki (ve hatta aynı tarayıcının farklı sürümleri arasındaki) destek ve ayrıca CSS önerilerinin farklı benimsenme oranları nedeniyle daha da ağırlaşıyor. On yıldan fazla bir süredir, web tasarımcıları ve geliştiricileri, her yeni tarayıcı sürümünde desteklenen ek CSS3 özelliklerinin ara sıra ve tutarsız patlamalarıyla boğuşuyor.

Ancak, her ne olursa olsun, CSS'de uzmanlaşmak, herhangi bir katı web tasarımcısı veya geliştiricisi için mutlak bir zorunluluktur. Bu makale, klasik CSS2 tekniklerinden CSS3'teki en son yerleşim yaklaşımlarına kadar bazı temel CSS yerleşim ilkelerinde size yol gösterecektir.

NOT: Bu makaledeki tüm kod örnekleri HTML5 öğelerini ve Sass sözdizimini kullanır. Tam çalışma kodu https://github.com/laureanoarcanio/css-layout-examples adresinden klonlanabilir.

Kullanım Örneği

Bir teknolojiyi öğrenmenin en iyi yollarından biri, desteklemeye çalıştığınız belirli bir kullanım örneğine veya çözmeye çalıştığınız belirli bir soruna sahip olmaktır. Bu amaçla, belirli bir dizi gereksinime sahip bir kullanım durumuna odaklanacağız.

Kullanım durumumuz, bazı dinamik davranışlara sahip bir Web Uygulaması düzeninden oluşur. Sayfada üstbilgi, altbilgi, gezinme menüsü ve alt gezinme gibi sabit öğelerin yanı sıra kaydırılabilir içerik bölümü olacaktır. Özel yerleşim gereksinimleri şunlardır:

Temel Düzen
- Üstbilgi, altbilgi, gezinme menüsü ve alt gezinme, kaydırma sırasında sabit kalır
- Gezinme ve alt gezinme öğeleri tüm dikey boş alanı kaplar
- İçerik bölümü, sayfada kalan tüm boş alanı kullanır ve kaydırılabilir bir alana sahiptir
Dinamik Davranış
- Gezinme menüsü varsayılan olarak yalnızca simgeleri gösterir, ancak metni de gösterecek şekilde genişletilebilir (ve daha sonra yeniden yalnızca simgeleri gösterecek şekilde daraltılabilir)
Düzen Varyasyonları
- Bazı sayfalarda gezinme menüsünün yanında alt gezinme bulunur ve bazılarında yoktur.

Klasik CSS2 Tekniklerini Kullanan CSS Eğitimi

Yeni başlayanlar için, klasik CSS kullanarak örnek uygulamamızda kullanacağımız HTML5 işaretlemesi:

 <body class="layout-classic"> <header></header> <nav></nav> <aside></aside> <main></main> <footer></footer> </body>

Sabit Konumlandırma

BB2'de, sabit konumlandırma kullanan konumlanmış bir yerleşim modeli kullanarak sayfadaki sabit öğeleri (üstbilgi, altbilgi vb.) elde edebiliriz.

Ayrıca, sabit öğelerimizin sayfadaki diğer içeriğin "üstünde" kalmasını sağlamak için z-index CSS özelliğini kullanacağız. z-index özelliği, bir öğenin yığın sırasını belirtir; burada daha büyük yığın sırasına sahip bir öğe, her zaman daha düşük bir yığın sırasına sahip bir öğenin "üstünde" olur. z-index özelliğinin yalnızca konumlandırılmış öğelerle çalıştığını unutmayın. Örneğimizde, sabit öğelerimizin görsel olarak ön planda kalmasını sağlamak için isteğe bağlı olarak 20 (varsayılandan daha yüksek olan) bir z-index değeri kullanacağız.

Ayrıca, tarayıcıya öğe için yatay olarak tüm kullanılabilir alanı kullanmasını width özelliğini %100'e ayarlayacağız.

 #header, #footer { position: fixed; width: 100%; z-index: 20; } #header { top: 0; height: 5em; } #footer { bottom: 0; height: 3em; }

Tamam, üst bilgi ve alt bilgi bu kadar. Peki ya #nav ve #subnav ?

CSS Genişletme

#nav ve #subnav için, CSS Genişletme olarak bilinen ve öğeleri sabit (yani, sayfada sabit bir konumda) veya mutlak (yani, bir en yakın konumlandırılmış ataya veya içeren bloğa göre belirtilen konum).

Dikey genişleme, bir öğenin hem top hem de bottom özelliklerini sabit bir değere ayarlayarak elde edilir, böylece öğe, kalan dikey boşluğu uygun şekilde kullanmak için dikey olarak genişler. Temel olarak yaptığınız şey, öğenin üstünü sayfanın üstünden belirli bir mesafeye ve öğenin alt kısmını sayfanın altından belirli bir mesafeye bağlamaktır, böylece öğe tüm dikey alanı dolduracak şekilde genişler. bu iki nokta arasında.

Benzer şekilde, bir elemanın hem left hem de right özelliklerini sabit bir değere ayarlayarak yatay genişleme elde edilir, böylece eleman kalan yatay boşluğu uygun şekilde kullanmak için yatay olarak genişleyecektir.

Kullanım durumumuz için dikey genişleme kullanmamız gerekiyor.

 #nav, #subnav { position: fixed; top: 6em; /* leave 1em margin below header */ bottom: 4em; /* leave 1em margin above footer */ z-index: 20; } #nav { left: 0; width: 5em; } #subnav { left: 6em; /* leave 1em margin to right of nav */ width: 13em; }

Varsayılan (Statik) Konumlandırma

Ana kaydırılabilir içerik alanı, öğelerin belge akışında göründükleri sırayla işlendiği varsayılan (statik) konumlandırmaya güvenebilir. Sayfamızdaki diğer her şey sabit bir konumda olduğundan, belge akışında olan tek öğe bu öğedir. Sonuç olarak, onu doğru şekilde konumlandırmak için tek yapmamız gereken, sabit üstbilgi, altbilgi ve gezinme/alt gezinme ile herhangi bir çakışmayı önlemek için margin özelliğini belirtmektir:

 #main { margin: 6em 0 4em 20em; }

Ve bununla, CSS2 kullanarak kullanım senaryomuzun temel yerleşim gereksinimlerini karşıladık, ancak yine de dinamik işlevsellik için ek gereksinimleri karşılamamız gerekiyor.

Klasik CSS2 Tekniklerini Kullanan Dinamik Davranış

Gereksinimler, Gezinme menümüzün varsayılan olarak yalnızca simgeleri göstereceğini, ancak metni de gösterecek şekilde genişletilebileceğini (ve daha sonra yeniden yalnızca simgeleri gösterecek şekilde daraltılabileceğini) belirtti.

Genişletildiğinde gezinme menüsünün genişliğine 5em ekleyerek başlayalım. Bunu, gezinme menüsü öğesine dinamik olarak ekleyebileceğimiz veya kaldırabileceğimiz bir "genişletilmiş" CSS sınıfı oluşturarak yapacağız:

 #nav { left: 0; width: 5em; &.expanded { /* Sass notation */ width: 10em; } }

Kullanıcının gezinme geçiş simgesini tıklamasına bağlı olarak gezinme menüsünü genişletilmiş ve daraltılmış mod arasında dinamik olarak değiştirmek için kullanılabilecek JavaScript kodunun bir örneği (bu örnekte jQuery kullanıyoruz):

 $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav'').toggleClass('expanded'); });

Ve bununla birlikte, gezinme menümüz artık dinamik olarak genişletilebilir veya daraltılabilir. Harika.

Şey, biraz harika, ama tam olarak değil. Gezinme menüsü artık genişleyip daralabilse de, sayfanın geri kalanıyla iyi çalışmıyor. Genişletilmiş gezinme menüsü artık kesinlikle istenen davranış olmayan alt gezinmeyle örtüşüyor.

Bu, CSS2'nin temel sınırlamalarından birini ortaya koymaktadır; yani, sabit konum değerleriyle kodlanması gereken çok fazla şey var . Sonuç olarak, genişletilmiş gezinme menüsüne uyum sağlamak için yeniden konumlandırılması gereken sayfadaki diğer öğeler için, daha sabit konum değerlerine sahip ek "genişletilmiş" CSS sınıfları tanımlamamız gerekir.

 #subnav { left: 6em; width: 13em; &.expanded { left: 11em; /* move it on over */ } } #main { margin: 6em 0 4em 20; z-index: 10; &.expanded { margin-left: 25em; /* move it on over */ } }

Daha sonra, gezinme geçişi kullanıcı tarafından tıklandığında bu diğer öğelerin de dinamik olarak ayarlanmasını eklemek için JavaScript kodumuzu genişletmemiz gerekir:

 $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav, #subnav, #main').toggleClass('expanded'); });

Tamam, bu daha iyi çalışıyor.

Klasik CSS2 Tekniklerini Kullanan Düzen Varyasyonları

Şimdi alt gezinme menüsünü gizleyen bazı sayfalara sahip olma gereksinimini ele alalım. Özellikle, kullanıcı ana gezinme alanındaki "kullanıcılar" simgesini tıkladığında alt gezinme menüsünün gizlenmesini istiyoruz.

İlk önce, display: none uygulayan yeni bir “hidden” sınıfı oluşturacağız:

 .hidden { display: none; }

Ve yine, kullanıcı kullanıcılar simgesini tıkladığında "gizli" CSS sınıfını #subnav öğesine uygulamak için JavaScript (jQuery) kullanacağız:

 $('#nav.fa-user').on('click', function() { $('#subnav').toggleClass('hidden'); });

Bu eklemeyle, #subnav öğesi, kullanıcı "kullanıcılar" simgesini tıkladığında düzgün bir şekilde gizlenir, ancak işgal ettiği alan, #subnav öğesi tarafından boşaltılan alanı kullanmak için genişleyen diğer öğeler yerine kullanılmadan kalır.

#subnav öğesini gizlediğimizde istenen davranışı elde etmek için, daha az bilinen, ancak oldukça kullanışlı olan, bitişik kardeş seçici olarak bilinen CSS seçicilerinden birini kullanacağız.

Bitişik Kardeş CSS Seçici

Bitişik kardeş seçici, yalnızca belirtilen ilk öğeyi hemen takip eden ikinci öğenin örneklerini seçerek iki öğe belirtmenize olanak tanır.

Örneğin, aşağıdakiler yalnızca main kimliğine sahip ve subnav kimliğine sahip bir öğeyi hemen takip eden öğeleri seçecektir:

 #subnav + #main { margin-left: 20em; }

Yukarıdaki CSS parçacığı, #main 20em sol kenar boşluğunu yalnızca ve yalnızca görüntülenen bir #main öğesinin hemen ardından #subnav olarak ayarlar.

Ancak, #nav genişletilirse (bu, önceki kodumuza dayanarak expanded sınıfın #main de eklenmesine neden olur), #main öğesinin sol kenar boşluğunu #main taşırız.

 #subnav + #main.expanded { margin-left: 25em; }

Ve #subnav gizliyse, #nav öğesinin hemen yanında olmak için #main öğesinin sol kenar boşluğunu #main kadar #nav :

 #subnav.hidden + #main { margin-left: 6em; }

(Not: Bitişik kardeş seçiciyi kullanmanın bir dezavantajı, görüntülenip görüntülenmediğine bakılmaksızın, bizi DOM'da her zaman #subnav bulunmasına zorlamasıdır.)

Son olarak, #subnav gizliyse ve #nav genişletilirse, #main öğesinin sol kenar boşluğunu #main olarak 11em :

 #subnav.hidden + #main.expanded { margin-left: 11em; }

Bu, herhangi bir ağır JavaScript kodu olmadan işleri birbirine bağlamamızı sağlar, ancak sayfaya daha fazla öğe eklersek bu kodun ne kadar karmaşık hale gelebileceğini de görebiliriz. Bir kez daha görüyoruz ki, CSS2 ile işlerin düzgün çalışması için çok sayıda konum değerlerinin sabit kodlanması gerekiyor.

CSS3'ten Yararlanma

CSS3, kullanımı çok daha kolay hale getiren ve sabit kodlanmış değerlere çok daha az bağımlı hale getiren önemli ölçüde geliştirilmiş işlevsellik ve düzen teknikleri sunar. CSS3, doğası gereği daha dinamik davranışı desteklemek üzere tasarlanmıştır ve bu anlamda daha "programlanabilir"dir. Bu yeni yeteneklerin bazılarını kullanım durumumuzla ilgili oldukları için inceleyelim.

CSS3 `calc()` İşlev

Yeni CSS3 calc() işlevi, CSS özellik değerlerini dinamik olarak hesaplamak için kullanılabilir (ancak bu desteğin tarayıcılar arasında farklılık gösterdiğini unutmayın). calc() işlevine sağlanan ifade, standart operatör öncelik kurallarını kullanan temel aritmetik operatörleri ( + , - , * , / ) birleştiren herhangi bir basit ifade olabilir.

calc() işlevinin kullanılması, CSS2'nin gerektirdiği değerlerin sabit kodlanmasının çoğundan kaçınmaya yardımcı olabilir. Bizim durumumuzda bu, CSS genişletmesini daha dinamik bir şekilde elde etmemizi sağlıyor. Örneğin:

 #nav, #subnav { position: fixed; height: calc(100% - 10em); /* replaces */ z-index: 20; }

calc() işlevini kullanan yukarıdaki height belirtimi ile, top:6em ve bottom:4em ile CSS2'de elde ettiğimiz sonucun aynısını, ancak çok daha esnek ve uyarlanabilir bir şekilde ve top ve bottom konumu sabit kodlamaya gerek duymadan elde ederiz. değerler.

CSS3 Flexbox Düzeni

Flexbox, CSS3'te tanıtılan yeni bir düzendir (destek tarayıcılar arasında değişiklik gösterir). Esnek kutu düzeni, bir sayfadaki öğeleri farklı ekran boyutları, çözünürlükler ve aygıtlar arasında tahmin edilebilir şekilde davranacak şekilde düzenlemeyi kolaylaştırır. Bu nedenle, duyarlı web tasarımı bağlamında özellikle yararlıdır.

Anahtar özellikler şunları içerir:

Alt öğeleri konumlandırmak çok daha kolaydır ve karmaşık düzenler daha basit ve daha temiz kodla elde edilebilir.
Alt elemanlar herhangi bir yöne yerleştirilebilir ve ekran alanına uyum sağlamak için esnek boyutlara sahip olabilir.
Alt öğeler, mevcut boş alana uyum sağlamak için sözleşmeyi otomatik olarak genişletir.

Flexbox, kendi benzersiz terim ve kavram setini sunar. Bunlardan birkaçı şunları içerir:

Esnek konteyner. Esnek öğeler için kap öğesi olarak işlev gören, display özelliği flex veya inline-flex esnek olarak ayarlanmış bir öğe.
Esnek öğe. Esnek bir kap içindeki herhangi bir öğe. (Not: Doğrudan bir esnek kapsayıcıda bulunan metin, anonim bir esnek öğeye sarılır.)
eksenler Her esnek kutu düzeninin, esnek öğelerin yerleştirildiği ana ekseni belirleyen bir flex-directio vardır. Çapraz eksen , ana eksene dik olan eksendir.
Çizgiler. Esnek öğeler, flex-wrap özelliğine göre tek bir satıra veya birkaç satıra yerleştirilebilir.
Boyutlar. Yükseklik ve genişliğin flexbox eşdeğerleri, sırasıyla esnek kabın ana ekseninin ve çapraz ekseninin boyutlarını belirten main size ve cross size .

Tamam, bu kısa girişle birlikte, bir esnek kutu düzeni kullanıyorsak kullanabileceğimiz alternatif işaretleme:

 <body class="layout-flexbox"> <header></header> <div class="content-area"> <nav></nav> <aside></aside> <main></main> </div> <footer></footer> </body>

Örnek kullanım durumumuz için ana düzenimiz (başlık, içerik, altbilgi) dikeydir, bu nedenle esnek kutumuzu bir sütun düzeni kullanacak şekilde ayarlayacağız:

 .layout-flexbox { display: flex; flex-direction: column; }

Ana yerleşimimiz dikey olmasına rağmen içerik alanımızdaki öğeler (nav, subnav, main) yatay olarak düzenlenmiştir. Her esnek kap yalnızca bir yön tanımlayabilir (yani, yerleşimi yatay veya dikey olmalıdır). Bu nedenle, düzen bundan daha fazlasını gerektirdiğinde (bir uygulama düzeni için yaygın bir durum), her biri farklı bir yön düzenine sahip birden çok kapsayıcıyı iç içe yerleştirebiliriz.

Bu nedenle, #nav , #subnav ve #main öğelerini sarmalayan fazladan bir kap ( content-area adını verdiğim) #main . Bu şekilde, genel düzen dikey olabilirken içerik alanının içeriği yatay olarak düzenlenebilir.

Şimdi flex öğelerimizi konumlandırmak için flex'in kısaltması olan flex özelliğini kullanacağız flex: <flex-grow> <flex-shrink> <flex-basis>; . Bu üç esnek özellik, esnek öğelerimizin aralarında kalan boş alanı akış yönünde nasıl dağıtacağını belirleyen özelliklerdir:

flex-grow: bir öğenin aynı kap içindeki diğer esnek öğelere göre ne kadar büyüyebileceğini belirtir
flex-shrink: bir öğenin aynı kap içindeki diğer esnek öğelere göre nasıl küçülebileceğini belirtir
esnek temel: bir öğenin ilk boyutunu belirtir (yani küçülmeden veya büyümeden önce)

Hem esnek flex-grow hem de flex-shrink sıfıra ayarlanması, öğenin boyutunun sabit olduğu ve daha fazla veya daha az boş alan olması nedeniyle büyüyüp küçülmeyeceği anlamına gelir. Sabit bir boyuta sahip oldukları için üstbilgi ve altbilgimiz için yaptığımız şey budur:

 #header { flex: 0 0 5em; } #footer { flex: 0 0 3em; }

Bir öğenin kullanılabilir tüm boş alanı kaplamasını sağlamak için, flex-grow ve flex-shrink değerlerini hem 1'e hem de flex-basis değerini auto olarak ayarlayın. Bu, içerik alanı için yaptığımız şeydir, çünkü mevcut tüm boş alanı kaplamasını istiyoruz.

Daha önce de belirttiğimiz gibi, content-area içindeki öğelerin satır yönünde düzenlenmesini istiyoruz, bu nedenle display: flex ; ve flex-direction: row; . Bu, içerik alanını #nav , #subnav ve `#main için yeni bir esnek kapsayıcı yapar.

İşte content-area için CSS için elde ettiğimiz şey:

 .content-area { display: flex; flex-direction: row; flex: 1 1 auto; /* take up all available space */ margin: 1em 0; min-height: 0; /* fixes FF issue with minimum height */ }

İçerik alanında hem #nav hem de #subnav sabit boyutlara sahiptir, bu nedenle flex özelliğini buna göre ayarladık:

 #nav { flex: 0 0 5em; margin-right: 1em; overflow-y: auto; } #subnav { flex: 0 0 13em; overflow-y: auto; margin-right: 1em; }

(Konteyner yüksekliğini aşan ve taşan içeriğin üstesinden gelmek için bu CSS spesifikasyonlarına overflow-y: hidden eklediğimi unutmayın. Chrome'un buna ihtiyacı yok ama FireFox'un ihtiyacı var.)

#main boş alanın geri kalanını kaplar:

 #main { flex: 1 1 auto; overflow-y: auto; }

Bunların hepsi iyi görünüyor, şimdi buna dinamik davranışımızı ekleyelim ve bunun nasıl gittiğini görelim.

JavaScript, daha önce sahip olduğumuzla aynıdır (burada belirttiğimiz CSS öğesi kapsayıcı sınıfının layout-flexbox olması dışında, daha önce layout-classic idi):

 $('.layout-flexbox #nav').on('click', 'li.nav-toggle', function() { $('#nav').toggleClass('expanded'); });

expanded sınıfı aşağıdaki gibi CSS'ye ekliyoruz:

 #nav { flex: 0 0 5em; /* collapsed size */ margin-right: 1em; overflow-y: auto; &.expanded { flex: 0 0 10em; /* expanded size */ } }

Ve işte!

Esnek kutu düzeni tüm bunları bizim için hallettiğinden, bu sefer genişlik değişikliği hakkında diğer öğeleri bilgilendirmemize gerek olmadığını unutmayın.

O zaman geriye kalan tek şey alt navigasyonu gizlemek. Ve tahmin et ne oldu? Bu, daha önce olduğu gibi aynı JavaScript kodunu kullanarak herhangi bir ek değişiklik yapmadan "sadece çalışır". Flexbox boş alan hakkında bilgi sahibidir ve düzenimizin otomatik olarak ekstra kod olmadan çalışmasını sağlar. Oldukça havalı.

Flexbox ayrıca hem dikey hem de yatay öğeleri ortalamanın bazı ilginç yollarını sunar. Burada, bir sunum dili için boş alan kavramını içermesinin ne kadar önemli olduğunu ve bu tür teknikleri kullanarak kodumuzun ne kadar ölçeklenebilir hale gelebileceğini anlıyoruz. Öte yandan, buradaki kavramlar ve gösterimde ustalaşmak klasik CSS'den biraz daha fazla zaman alabilir.

CSS3 Izgara Düzeni

Flexbox Düzeni, CSS3'ün ön kenarındaysa, Izgara Düzeni'nin en uç noktasında olduğu söylenebilir. W3C spesifikasyonu hala taslak durumunda ve hala oldukça sınırlı tarayıcı desteğine sahip. (Chrome'da chrome://flags içindeki "deneysel Web Platformu özellikleri" bayrağı aracılığıyla etkinleştirilir).

Bununla birlikte, kişisel olarak bu taslağı devrimci olarak görmüyorum. Bunun yerine, HTML5 tasarım ilkelerinin belirttiği gibi: "Yazarlar arasında bir uygulama zaten yaygınsa, onu yasaklamak veya yeni bir şey icat etmek yerine onu benimsemeyi düşünün."

Buna göre, biçimlendirme tabanlı ızgaralar uzun süredir kullanılmaktadır, bu nedenle şimdi CSS Izgara Düzeni gerçekten aynı paradigmayı takip ediyor, tüm avantajlarını ve çok daha fazlasını biçimlendirme gereksinimi olmadan sunum katmanında sunuyor.

Genel fikir, öğelerimizi konumlandırabileceğimiz önceden tanımlanmış, sabit veya esnek bir ızgara düzenine sahip olmaktır. Flexbox gibi, aynı zamanda boş alan ilkesi üzerinde çalışır ve aynı öğede hem dikey hem de yatay "yönleri" tanımlamamıza olanak tanır, bu da kod boyutu ve esneklik açısından avantajlar sağlar.

Izgara düzeni 2 tür ızgara sunar; yani açık ve örtük . Basitlik için, burada açık ızgaralara odaklanacağız.

Flexbox gibi, Izgara düzeni de kendi benzersiz terim ve kavram setini sunar. Bunlardan birkaçı şunları içerir:

Izgara kapsayıcı. display özelliği "ızgara" veya "inline-ızgara" olarak ayarlanmış ve içerilen elemanların önceden tanımlanmış bir ızgaraya (açık mod) konumlandırılarak ve hizalanarak yerleştirildiği bir eleman. Izgara, ızgara kabının alanını ızgara hücrelerine bölen kesişen yatay ve dikey ızgara çizgileri kümesidir. İki set ızgara çizgisi vardır; biri sütunları tanımlamak için, diğeri de satırları tanımlamak için ona dik.
Izgara izi. İki bitişik ızgara çizgisi arasındaki boşluk. Her ızgara izine, sütun veya satırın ne kadar geniş veya uzun olabileceğini ve dolayısıyla sınırlayıcı ızgara çizgilerinin ne kadar uzakta olduğunu kontrol eden bir boyutlandırma işlevi atanır.
Izgara hücresi. İki bitişik satır ve iki bitişik sütun ızgara çizgisi arasındaki boşluk. Izgara öğelerini konumlandırırken referans alınabilecek ızgaranın en küçük birimidir.
Esnek uzunluk. Izgara kapsayıcısındaki boş alanın bir kısmını temsil eden, fr birimiyle belirtilen bir boyut.

Bir Izgara düzeni kullanıyorsak kullanabileceğimiz alternatif işaretleme:

 <body class="layout-grid"> <header></header> <nav></nav> <aside></aside> <main></main> <footer></footer> </body>

Bu düzen ile, esnek kutu için yaptığımız gibi içerik alanı için fazladan bir sarmalayıcıya ihtiyacımız olmadığını unutmayın, çünkü bu tür düzen, aynı ızgara kabında her iki yönde eleman alanı atamasını tanımlamamıza izin verir.

Şimdi CSS'yi inceleyelim:

 .layout-grid { display: grid; grid-template-columns: auto 0 auto 1em 1fr; grid-template-rows: 5em 1em 1fr 1em 3em; }

display: grid; bizim konteyner üzerinde. grid-template-columns ve grid-template-rows özelliklerinin her biri, ızgara izleri arasındaki boşlukların bir listesi olarak belirtilir. Başka bir deyişle, bu değerler ızgara çizgilerinin konumu değildir; daha ziyade, iki iz arasındaki boşluk miktarını temsil ederler.

Ölçüm birimlerinin şu şekilde belirtilebileceğini unutmayın:

bir uzunluk
ızgara kapsayıcı boyutunun bir yüzdesi
sütunu veya satırı kaplayan içeriğin bir ölçümü veya
ızgaradaki boş alanın bir kısmı

Yani grid-template-columns: auto 0 auto 1em 1fr; sahip olacağız:

2 auto genişlik sütunu tanımlayan 1 iz ( #nav alanı)
1 oluk 0 ( #subnav marjı eleman seviyesindedir, mevcut olabilir veya olmayabilir, bu şekilde çift oluk oluşmasını önleriz)
2 auto genişlik sütunu tanımlayan 1 iz ( #subnav alanı)
1 oluk 1em
#main 1fr 1 parça (kalan tüm alanı alacaktır)

Burada, çizgilerin konumunun ve boyutunun maksimum içerikleriyle tanımlandığı dinamik sütunlara sahip olmamızı sağlayan iz için auto değerini yoğun bir şekilde kullanıyoruz. (Bu nedenle, birazdan yapacağımız #nav ve #subnav öğelerinin boyutlarını belirtmemiz gerekecek.)

Benzer şekilde, satır satırları için grid-template-rows: 5em 1em 1fr 1em 3em; bu, #footer #header ve arasındaki tüm öğeleri 1em olukları kullanırken kalan boş alanı kullanacak şekilde ayarlar.

Şimdi, konumlandırılacak gerçek öğeleri tanımlı ızgaramıza nasıl yerleştireceğimize bakalım:

 #header { grid-column: 1 / 6; grid-row: 1 / 2; } #footer { grid-column: 1 / 6; grid-row: 5 / 6; } #main { grid-column: 5 / 6; grid-row: 3 / 4; overflow-y: auto; }

Bu, başlığımızın 1 ve 6 ızgara çizgisi (tam genişlik) arasında ve satırlarımız için 1 ve 2 ızgara çizgileri arasında olmasını istediğimizi belirtir. Altbilgi için aynı, ancak son iki satır arasında (ilk iki satır yerine). Ve ana alan, işgal etmesi gereken alana uygun olarak ayarlanmıştır.

grid-column ve grid-row özelliklerinin sırasıyla grid-column-start / grid-column-end ve grid-row-start / grid-row-end belirtmek için kısa yol olduğuna dikkat edin.

Tamam, #nav ve #subnav geri dönelim. Daha önce #nav ve #subnav otomatik değerlerle yola yerleştirdiğimiz için, bu öğelerin ne kadar geniş olduğunu belirtmemiz gerekiyor (genişletilmiş mod için aynı, sadece genişliğini değiştiriyoruz ve Grid Düzeni gerisini hallediyor).

 #nav { width: 5em; grid-column: 1 / 2; grid-row: 3 / 4; &.expanded { width: 10em; } } #subnav { grid-column: 3 / 4; grid-row: 3 / 4; width: 13em; /* track has gutter of 0, so add margin here */ margin-left: 1em; }

Artık #nav değiştirebilir ve ayrıca # #subnav gizleyebilir/kaldırabiliriz ve her şey mükemmel çalışıyor! Izgara düzeni, satırlarımız için takma adlar kullanmamıza da izin verir, bu nedenle, sonunda ızgaraları değiştirmek, bir ızgara çizgisiyle değil bir adla eşlendiğinden kodu parçalamaz. Bunun daha fazla tarayıcı tarafından daha yaygın olarak desteklenmesini kesinlikle dört gözle bekliyoruz.

Çözüm

Klasik CSS teknikleriyle bile, birçok web geliştiricisinin fark ettiğinden veya yararlandığından çok daha fazlasını başarabilirsiniz. Bununla birlikte, bunların çoğu oldukça sıkıcı olabilir ve bir stil sayfası boyunca tekrar tekrar değerlerin sabit kodlanmasını içerebilir.

CSS3, programlaması önemli ölçüde daha kolay olan ve önceki CSS spesifikasyonlarının sıkıcılığının çoğunu ortadan kaldıran çok daha karmaşık ve esnek yerleşim teknikleri sunmaya başladı.

Hem CSS2 hem de CSS3 için bu tekniklere ve paradigmalara hakim olmak, hem kullanıcının deneyimini hem de kodunuzun kalitesini optimize etmek için CSS'nin sunduğu her şeyden yararlanmak için gereklidir. Bu makale, CSS'nin gücü ve esnekliği ile öğrenilebilecek ve yapılabilecek her şeyin buzdağının görünen ucunu temsil ediyor. ye!

İlgili: *SMACSS'yi Keşfetmek: CSS için Ölçeklenebilir ve Modüler Mimari*