Izgara sistemleri CSS düzenlerinde kullanılan çok yaygın bir özelliktir. CSS Izgara Düzeni’nden önce float’lar veya diğer düzen özellikleri kullanılarak uygulanma eğilimindeydiler. Düzeninizi belirli sayıda sütun (örneğin 4, 6 veya 12) olarak hayal edersiniz ve ardından içerik sütunlarınızı bu hayali sütunların içine sığdırırsınız. Bu makalede, eski bir proje üzerinde çalışıyorsanız nasıl kullanıldıklarını anlayabilmeniz için bu eski yöntemlerin nasıl çalıştığını inceleyeceğiz.
| Ön Koşullar: | HTML temelleri (HTML’ye Giriş bölümünü çalışın) ve CSS’nin nasıl çalıştığına dair bir fikir edinin (CSS’ye Giriş ve Stil tabloları bölümlerini çalışın). |
|---|
CSS Izgara Düzeni öncesinde düzen ve ızgara sistemleri
Yakın zamana kadar CSS’in dahili bir ızgara sistemine sahip olmaması ve bunun yerine ızgara benzeri tasarımlar oluşturmak için çeşitli alt-optimal yöntemler kullanıyor olmamız, tasarım geçmişinden gelen herkes için şaşırtıcı görünebilir. Artık bunları “eski” yöntemler olarak adlandırıyoruz.
Yeni projeler için, çoğu durumda CSS Izgara Düzeni, herhangi bir düzen için temel oluşturmak üzere bir veya daha fazla diğer modern düzen yöntemiyle birlikte kullanılır. Ancak zaman zaman bu eski yöntemleri kullanan “ızgara sistemleri” ile karşılaşırsınız. Bunların nasıl çalıştığını ve CSS Izgara Düzeni’nden neden farklı olduklarını anlamakta fayda var.
Bu makale, floats ve flexbox tabanlı ızgara sistemlerinin ve ızgara çerçevelerinin nasıl çalıştığını açıklayacaktır. Grid Layout çalıştıktan sonra muhtemelen tüm bunların ne kadar karmaşık göründüğüne şaşıracaksınız! Bu bilgi, bu tür sistemleri kullanan mevcut projeler üzerinde çalışmanıza izin vermesinin yanı sıra, daha yeni yöntemleri desteklemeyen tarayıcılar için geri dönüş kodu oluşturmanız gerektiğinde size yardımcı olacaktır.
Bu sistemleri incelerken, hiçbirinin aslında CSS Izgara Düzeni’nin bir ızgara oluşturduğu şekilde bir ızgara oluşturmadığını akılda tutmakta fayda var. Öğelere bir boyut vererek ve onları bir ızgara gibi görünecek şekilde sıralamak üzere bir takım ittirme ile çalışırlar.
İki sütunlu bir düzen
Mümkün olan en basit örnekle başlayalım – iki sütunlu bir düzen. Bilgisayarınızda yeni bir index.html dosyası oluşturup basit bir HTML şablonuyla doldurarak ve aşağıdaki kodu uygun yerlere ekleyerek takip edebilirsiniz.
Her şeyden önce, sütunlarımıza koyacak bazı içeriklere ihtiyacımız var. Şu anda gövdenin içinde ne varsa aşağıdaki ile değiştirin:
<h1>2 column layout example</h1>
<div>
<h2>First column</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
</div>
<div>
<h2>Second column</h2>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
Sütunların her biri içeriğini içerecek bir dış öğeye ihtiyaç duyar. Hepsini aynı anda manipüle edelim. Bu örnek için “div “leri seçtik, ancak siz <article>lar, <section>lar ve <aside>lar gibi anlamsal olarak daha uygun bir şey seçebilirsiniz.
Şimdi CSS. Öncelikle, bazı temel kurulumları sağlamak için HTML’nize aşağıdakileri uygulayın:
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
Copy to Clipboard
The body will be 90% of the viewport wide until it gets to 900px wide, in which case it will stay fixed at this width and center itself in the viewport. By default, its children (the <h1> and the two <div>s) will span 100% of the width of the body. If we want the two <div>s to be floated alongside one another, we need to set their widths to total 100% of the width of their parent element or smaller so they can fit alongside one another. Add the following to the bottom of your CSS:
div:nth-of-type(1) {
width: 48%;
}
div:nth-of-type(2) {
width: 48%;
}
Burada her ikisini de üst genişliklerinin %48’i olacak şekilde ayarladık – bu toplamda %96 eder ve bize iki sütun arasında bir oluk görevi görerek içeriğe nefes alması için biraz alan sağlayan %4’lük bir boşluk bırakır. Şimdi sütunları kaydırmamız gerekiyor:
div:nth-of-type(1) {
width: 48%;
float: left;
}
div:nth-of-type(2) {
width: 48%;
float: right;
}
Tüm bunları bir araya getirdiğimizde şöyle bir sonuç elde ederiz:
Burada tüm genişlikler için yüzdeler kullandığımızı fark edeceksiniz – bu oldukça iyi bir strateji, çünkü farklı ekran boyutlarına uyum sağlayan ve daha küçük ekran boyutlarında sütun genişlikleri için aynı oranları koruyan değişken bir düzen oluşturuyor. Kendiniz görmek için tarayıcı pencerenizin genişliğini ayarlamayı deneyin. Bu, duyarlı web tasarımı için değerli bir araçtır.
Not: Bu örneği çalışırken görebilirsiniz (kaynak koduna da bakın).
Basit eski ızgara çerçeveleri oluşturma
Eski çerçevelerin çoğu, ızgara gibi görünen bir şey oluşturmak amacıyla bir sütunu diğerinin yanında kaydırmak için float özelliğini kullanır. Float’larla bir grid oluşturmaya çalışarak bunun nasıl çalıştığını görebilir ve float‘lar dersinde öğrendiklerinizin üzerine ekleyebileceğiniz daha gelişmiş kavramları öğrenebilirsiniz.
Oluşturulması en kolay ızgara çerçevesi türü sabit genişlikte olanıdır – sadece tasarımımızın toplam genişliğinin ne kadar olmasını istediğimizi, kaç sütun istediğimizi ve olukların ve sütunların ne kadar geniş olması gerektiğini belirlememiz gerekir. Bunun yerine tasarımımızı tarayıcı genişliğine göre büyüyen ve küçülen sütunlara sahip bir ızgara üzerine yerleştirmeye karar verirsek, sütunlar ve aralarındaki oluklar için yüzde genişliklerini hesaplamamız gerekir.
Sonraki bölümlerde her ikisinin de nasıl oluşturulacağına bakacağız. 12 sütunlu bir ızgara oluşturacağız – 12’nin 6, 4, 3 ve 2’ye güzel bir şekilde bölünebildiği göz önüne alındığında, farklı durumlara çok uyarlanabilir olduğu görülen çok yaygın bir seçim.
Basit bir sabit genişlik ızgarası
İlk olarak sabit genişlikte sütunlar kullanan bir ızgara sistemi oluşturalım.
Gövdesinde aşağıdaki gibi bir biçimlendirme içeren örnek simple-grid.html dosyamızın yerel bir kopyasını oluşturarak işe başlayın.
<div class="wrapper">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div class="col">10</div>
<div class="col">11</div>
<div class="col">12</div>
</div>
<div class="row">
<div class="col span1">13</div>
<div class="col span6">14</div>
<div class="col span3">15</div>
<div class="col span2">16</div>
</div>
</div>
Amaç, buradaki sütunları on iki sütunlu bir ızgara üzerinde iki satırdan oluşan bir gösteri ızgarasına dönüştürmektir – üst satır tek tek sütunların boyutunu, ikinci satır ise ızgara üzerindeki bazı farklı boyutlardaki alanları göstermektedir.
<style> öğesine, sarmalayıcı kapsayıcıya 980 piksel genişlik ve sağ tarafta 20 piksel dolgu sağlayan aşağıdaki kodu ekleyin. Bu bize toplam sütun/oluk genişliğimiz için 960 piksel bırakır – bu durumda, sitedeki tüm öğelerde kutu boyutlandırmasını border-box olarak ayarladığımız için dolgu toplam içerik genişliğinden çıkarılır.
* {
box-sizing: border-box;
}
body {
width: 980px;
margin: 0 auto;
}
.wrapper {
padding-right: 20px;
}
Şimdi bir satırı diğerinden temizlemek için ızgaranın her satırının etrafına sarılmış olan satır konteynerini kullanın. Aşağıdaki kuralı bir öncekinin altına ekleyin:
.row {
clear: both;
}
Bu temizlemeyi uygulamak, her satırı on iki sütunun tamamını oluşturan öğelerle tamamen doldurmamız gerekmediği anlamına gelir. Satırlar ayrı kalacak ve birbirlerine karışmayacaktır.
Sütunlar arasındaki oluklar 20 piksel genişliğindedir. Bu olukları, konteynerin sağ tarafındaki 20 piksellik dolguyu dengelemek için ilk sütun da dahil olmak üzere her sütunun sol tarafında bir kenar boşluğu olarak oluşturuyoruz. Yani toplamda 12 oluk var – 12 x 20 = 240.
Bunu toplam 960 piksel genişliğimizden çıkararak sütunlarımız için 720 piksel elde etmemiz gerekir. Şimdi bunu 12’ye bölersek, her bir sütunun 60 piksel genişliğinde olması gerektiğini biliyoruz.
Bir sonraki adımımız .col sınıfı için bir kural oluşturmak, sol tarafa kaydırmak, kenar boşluğunu oluşturmak için 20 piksellik bir marjin-left ve 60 piksellik bir genişlik vermektir. Aşağıdaki kuralı CSS’nizin en altına ekleyin:
.col {
float: left;
margin-left: 20px;
width: 60px;
background: rgb(255, 150, 150);
}
Tek sütunların üst sırası artık bir ızgara olarak düzgün bir şekilde yerleştirilecektir.
Not: Ayrıca her bir sütuna açık kırmızı bir renk verdik, böylece her birinin ne kadar yer kapladığını tam olarak görebilirsiniz.
Birden fazla sütuna yayılmasını istediğimiz düzen kapsayıcılarına, genişlik değerlerini gerekli sütun sayısına (artı aradaki oluklara) göre ayarlamak için özel sınıflar verilmesi gerekir. Kapsayıcıların 2 ila 12 sütuna yayılmasına izin vermek için ek bir sınıf oluşturmamız gerekir. Her genişlik, söz konusu sütun sayısının sütun genişliği artı oluk genişliklerinin toplanmasıyla elde edilir ve bu da her zaman sütun sayısından bir eksik olacaktır.
CSS’nizin altına aşağıdakileri ekleyin:
/* İki sütun genişliği (120px) artı bir oluk genişliği (20px) */
.col.span2 { width: 140px; }
/* Üç sütun genişliği (180 piksel) artı iki oluk genişliği (40 piksel) */
.col.span3 { width: 220px; }
/* Ve böyle devam eder... */
.col.span4 { width: 300px; }
.col.span5 { width: 380px; }
.col.span6 { width: 460px; }
.col.span7 { width: 540px; }
.col.span8 { width: 620px; }
.col.span9 { width: 700px; }
.col.span10 { width: 780px; }
.col.span11 { width: 860px; }
.col.span12 { width: 940px; }
Bu sınıflar oluşturulduktan sonra artık ızgaraya farklı genişlikte sütunlar yerleştirebiliriz. Etkilerini görmek için sayfayı kaydedip tarayıcınızda açmayı deneyin.
Not: Yukarıdaki örneğin çalışmasında sorun yaşıyorsanız, GitHub’daki bitmiş sürümle karşılaştırmayı deneyin (canlı olarak çalıştığını da görebilirsiniz).
Düzeni nasıl değiştirebileceğinizi görmek için öğelerinizdeki sınıfları değiştirmeyi ve hatta bazı kapsayıcıları ekleyip çıkarmayı deneyin. Örneğin, ikinci sıranın şu şekilde görünmesini sağlayabilirsiniz:
<div class="row">
<div class="col span8">13</div>
<div class="col span4">14</div>
</div>
Artık çalışan bir ızgara sisteminiz var, satırları ve her satırdaki sütun sayısını tanımlayabilir, ardından her bir kabı istediğiniz içerikle doldurabilirsiniz. Harika!
Akışkan bir ızgara oluşturma
Izgaramız güzel çalışıyor, ancak sabit bir genişliğe sahip. Tarayıcı görüntü alanındaki kullanılabilir alanla birlikte büyüyecek ve küçülecek esnek (akışkan) bir ızgara istiyoruz. Bunu başarmak için referans piksel genişliklerini yüzdelere dönüştürebiliriz.
Sabit bir genişliği esnek bir yüzdeye dayalı genişliğe dönüştüren denklem aşağıdaki gibidir.
hedef / içerik = sonuç
Sütun genişliğimiz için hedef genişliğimiz 60 piksel, içeriğimiz ise 960 piksellik sarmalayıcıdır. Yüzde hesaplamak için aşağıdakileri kullanabiliriz.
60 / 960 = 0.0625
Daha sonra ondalık noktayı 2 basamak kaydırarak %6,25’lik bir yüzde elde ederiz. Böylece, CSS’mizde 60 piksel sütun genişliğini %6,25 ile değiştirebiliriz.
Aynı şeyi oluk genişliğimiz için de yapmalıyız:
20 / 960 = 0.02083333333
Bu nedenle, .col kuralımızdaki 20 piksel margin-left ve .wrapper’daki 20 piksel padding-right değerlerini %2,08333333 ile değiştirmemiz gerekir.
Izgaramızı güncelleme
Bu bölüme başlamak için, önceki örnek sayfanızın yeni bir kopyasını oluşturun veya başlangıç noktası olarak kullanmak üzere simple-grid-finished.html kodumuzun yerel bir kopyasını oluşturun.
İkinci CSS kuralını (.wrapper seçicisi ile) aşağıdaki gibi güncelleyin:
body {
width: 90%;
max-width: 980px;
margin: 0 auto;
}
.wrapper {
padding-right: 2.08333333%;
}
Sadece yüzdelik bir genişlik vermekle kalmadık, aynı zamanda düzenin çok geniş olmasını engellemek için bir maksimum genişlik özelliği de ekledik.
Ardından, dördüncü CSS kuralını (.col seçicisi ile) aşağıdaki gibi güncelleyin:
.col {
float: left;
margin-left: 2.08333333%;
width: 6.25%;
background: rgb(255, 150, 150);
}
Şimdi biraz daha zahmetli kısım geliyor – tüm .col.span kurallarımızı piksel genişlikleri yerine yüzdeleri kullanacak şekilde güncellememiz gerekiyor. Bu işlem hesap makinesiyle biraz zaman alır; sizi biraz zahmetten kurtarmak için aşağıda bunu sizin için yaptık.
CSS kurallarının alt bloğunu aşağıdakilerle güncelleyin:
/* İki sütun genişliği (%12,5) artı bir oluk genişliği (%2,08333333) */
.col.span2 { width: 14.58333333%; }
/* Üç sütun genişliği (%18,75) artı iki oluk genişliği (4,1666666) */
.col.span3 { width: 22.91666666%; }
/* Ve böyle devam eder... */
.col.span4 { width: 31.24999999%; }
.col.span5 { width: 39.58333332%; }
.col.span6 { width: 47.91666665%; }
.col.span7 { width: 56.24999998%; }
.col.span8 { width: 64.58333331%; }
.col.span9 { width: 72.91666664%; }
.col.span10 { width: 81.24999997%; }
.col.span11 { width: 89.5833333%; }
.col.span12 { width: 97.91666663%; }
Şimdi kodunuzu kaydedin, bir tarayıcıda açın ve viewport genişliğini değiştirmeyi deneyin – sütun genişliklerinin uygun şekilde ayarlandığını göreceksiniz.
calc() fonksiyonunu kullanarak daha kolay hesaplamalar
Matematiği doğrudan CSS’nizin içinde yapmak için calc() işlevini kullanabilirsiniz – bu, bir değerin ne olması gerektiğini hesaplamak için CSS değerlerinize basit matematiksel denklemler eklemenize olanak tanır. Özellikle yapılması gereken karmaşık matematik olduğunda kullanışlıdır ve farklı birimler kullanan bir hesaplama bile yapabilirsiniz, örneğin “Bu öğenin yüksekliğinin her zaman ana yüksekliğinin %100’ü eksi 50px olmasını istiyorum” gibi.
Herneyse, ızgaralarımıza geri dönelim. Izgaramızın birden fazla sütuna yayılan herhangi bir sütunun toplam genişliği, yayılan sütun sayısı ile çarpılan %6,25 artı oluk sayısı ile çarpılan %2,08333333’tür (bu her zaman sütun sayısı eksi 1 olacaktır). calc() fonksiyonu bu hesaplamayı doğrudan genişlik değerinin içinde yapmamızı sağlar, böylece örneğin 4 sütuna yayılan herhangi bir öğe için bunu yapabiliriz:
.col.span4 {
width: calc((6.25%*4) + (2.08333333%*3));
}
Alttaki kural bloğunuzu aşağıdakiyle değiştirmeyi deneyin, ardından aynı sonucu alıp almadığınızı görmek için tarayıcıda yeniden açın:
.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
Not: Bunu çalıştıramıyorsanız, tarayıcınız calc() işlevini desteklemiyor olabilir, ancak bu işlev tarayıcılar arasında oldukça iyi desteklenmektedir – hatta IE9’a kadar.
Semantik ve “semantik olmayan” grid sistemleri
Düzeni tanımlamak için biçimlendirmenize sınıflar eklemek, içeriğinizin ve biçimlendirmenizin görsel sunumunuza bağlı hale gelmesi anlamına gelir. Bazen CSS sınıflarının bu kullanımının “anlamsız” olduğunu duyarsınız – içeriği tanımlayan sınıfların anlamsal kullanımından ziyade içeriğin nasıl göründüğünü tanımlar. Bu durum span2, span3, vb. sınıflarımız için geçerlidir.
Sadece bu yaklaşımlar mevcut değildir. Bunun yerine ızgaranıza karar verebilir ve ardından boyutlandırma bilgilerini anlamsal sınıflara sahip kurallara ekleyebilirsiniz. Örneğin, üzerinde 8 sütuna yayılmasını istediğiniz bir içerik sınıfı olan bir <div> varsa, genişliği span8 sınıfından kopyalayarak aşağıdaki gibi bir kural oluşturabilirsiniz:
.content {
width: calc((6.25%*8) + (2.08333333%*7));
}
Not: Sass gibi bir önişlemci kullansaydınız, bu değeri sizin için eklemek üzere basit bir mixin oluşturabilirdiniz.
Izgaramızda ofset etkinleştirme
Oluşturduğumuz ızgara, tüm konteynerleri ızgaranın sol tarafı ile aynı hizada başlatmak istediğimiz sürece iyi çalışır. İlk kapsayıcıdan önce ya da kapsayıcılar arasında boş bir sütun alanı bırakmak isteyebiliriz. Bunun için görsel olarak ızgara boyunca itmek üzere sitemize bir sol kenar boşluğu eklemek için bir ofset sınıfı oluşturmamız gerekir. Daha fazla matematik!
Hadi deneyelim.
Önceki kodunuzla başlayın veya başlangıç noktası olarak fluid-grid.html dosyasını kullanın.
CSS’mizde bir kapsayıcı öğeyi bir sütun genişliğinde kaydıracak bir sınıf oluşturalım. Aşağıdakileri CSS’nizin en altına ekleyin:
.offset-by-one {
margin-left: calc(6.25% + (2.08333333%*2));
}
Ya da yüzdeleri kendiniz hesaplamayı tercih ederseniz, şunu kullanın:
.offset-by-one {
margin-left: 10.41666666%;
}
Artık bu sınıfı, sol tarafında bir sütun genişliğinde boş alan bırakmak istediğiniz herhangi bir konteynere ekleyebilirsiniz. Örneğin, HTML’nizde buna sahipseniz:
<div class="col span6">14</div>
Şununla değiştirmeyi deneyin
<div class="col span5 offset-by-one">14</div>
Not: Ofsete yer açmak için yayılan sütun sayısını azaltmanız gerektiğine dikkat edin!
Farkı görmek için sayfayı yenilemeyi deneyin. Tamamlanmış örnek şu şekilde görünmelidir:
Not: Ekstra bir alıştırma olarak, bir offset-by-two sınıfı (iki sütunda kaydırma) uygulayabilir misiniz?
Kayan ızgara sınırlamaları
Böyle bir sistem kullanırken, toplam genişliklerinizin doğru bir şekilde toplanmasına ve bir satıra, satırın içerebileceğinden daha fazla sütuna yayılan öğeler eklememeye dikkat etmeniz gerekir. Float’ların çalışma şekli nedeniyle, ızgara sütunlarının sayısı ızgara için çok geniş olursa, uçtaki öğeler bir sonraki satıra düşerek ızgarayı bozacaktır.
Ayrıca, öğelerin içeriği, kapladıkları satırlardan daha geniş olursa taşacağını ve dağınık görüneceğini unutmayın.
Bu sistemin en büyük sınırlaması, esasen tek boyutlu olmasıdır. Sütunlarla ve sütunlar arasında yayılan öğelerle uğraşıyoruz, ancak satırlarla değil. Bu eski düzen yöntemleriyle, açıkça bir yükseklik belirlemeden öğelerin yüksekliğini kontrol etmek çok zordur ve bu da çok esnek olmayan bir yaklaşımdır – yalnızca içeriğinizin belirli bir yükseklikte olacağını garanti edebiliyorsanız işe yarar.
Flexbox ızgaraları?
Flexbox hakkındaki önceki makalemizi okuduysanız, flexbox’ın bir ızgara sistemi oluşturmak için ideal çözüm olduğunu düşünebilirsiniz. Birçok flexbox tabanlı grid sistemi mevcuttur ve flexbox, yukarıdaki gridimizi oluştururken keşfettiğimiz sorunların çoğunu çözebilir.
Ancak flexbox hiçbir zaman bir ızgara sistemi olarak tasarlanmamıştır ve ızgara sistemi olarak kullanıldığında yeni bir dizi zorluk ortaya çıkarır. Bunun basit bir örneği olarak, yukarıda kullandığımız aynı örnek işaretlemeyi alabilir ve wrapper, row ve col sınıflarını şekillendirmek için aşağıdaki CSS’yi kullanabiliriz:
body {
width: 90%;
max-width: 980px;
margin: 0 auto;
}
.wrapper {
padding-right: 2.08333333%;
}
.row {
display: flex;
}
.col {
margin-left: 2.08333333%;
margin-bottom: 1em;
width: 6.25%;
flex: 1 1 auto;
background: rgb(255,150,150);
}
Burada her satırı bir flex konteynerine dönüştürüyoruz. Flexbox tabanlı bir ızgarada, %100’den daha az toplamı olan öğelere sahip olmamıza izin vermek için hala satırlara ihtiyacımız var. Bu konteyneri display: flex olarak ayarlıyoruz.
.col üzerinde flex özelliğinin ilk değerini (flex-grow) 1 olarak ayarlarız, böylece öğelerimiz büyüyebilir, ikinci değeri (flex-shrink) 1 olarak ayarlarız, böylece öğeler küçülebilir ve üçüncü değeri (flex-basis) auto olarak ayarlarız. Öğemizin ayarlanmış bir genişliği olduğundan, auto bu genişliği flex-basis değeri olarak kullanacaktır.
En üst satırda ızgara üzerinde on iki düzgün kutu elde ediyoruz ve görüntü alanı genişliğini değiştirdikçe eşit şekilde büyüyüp küçülüyorlar. Ancak bir sonraki satırda yalnızca dört öğemiz var ve bunlar da 60 piksel bazında büyüyüp küçülüyor. Sadece dördü ile yukarıdaki satırdaki öğelerden çok daha fazla büyüyebilirler, sonuç olarak hepsi ikinci satırda aynı genişliği kaplar.
Bunu düzeltmek için, flex-basis tarafından o öğe için kullanılan değerin yerini alacak bir genişlik sağlamak üzere span sınıflarımızı eklememiz gerekir.
Ayrıca, yukarıdaki öğeler tarafından kullanılan ızgaraya da saygı duymazlar çünkü bununla ilgili hiçbir şey bilmezler.
Flexbox tasarımı gereği tek boyutludur. Tek bir boyutla, bir satır veya bir sütunla ilgilenir. Sütunlar ve satırlar için katı bir ızgara oluşturamayız, yani ızgaramız için flexbox kullanacaksak, yine de kayan düzende olduğu gibi yüzdeleri hesaplamamız gerekir.
Projenizde, flexbox’ın kayan kutulara göre sağladığı ek hizalama ve alan dağıtımı özellikleri nedeniyle yine de bir flexbox ‘grid’ kullanmayı tercih edebilirsiniz. Bununla birlikte, bir aracı tasarlanma amacından başka bir şey için kullandığınızın farkında olmalısınız. Bu nedenle, istediğiniz sonucu elde etmek için fazladan çemberlerden atlamanıza neden oluyormuş gibi hissedebilirsiniz.
Üçüncü parti ızgara sistemleri
Artık ızgara hesaplamalarımızın arkasındaki matematiği anladığımıza göre, yaygın olarak kullanılan bazı üçüncü parti ızgara sistemlerine bakmak için iyi bir yerdeyiz. Web üzerinde “CSS Grid framework” araması yaparsanız, aralarından seçim yapabileceğiniz çok sayıda seçenek bulacaksınız. Bootstrap ve Foundation gibi popüler frameworkler bir grid sistemi içerir. CSS ya da önişlemciler kullanılarak geliştirilen bağımsız grid sistemleri de vardır.
Bir grid frameworkü ile çalışmak için yaygın teknikleri göstermesi açısından bu bağımsız sistemlerden birine bir göz atalım. Kullanacağımız grid, basit bir CSS çatısı olan Skeleton’un bir parçasıdır.
Başlamak için Skeleton web sitesini ziyaret edin ve ZIP dosyasını indirmek için “İndir “i seçin. Bunu açın ve skeleton.css ve normalize.css dosyalarını yeni bir dizine kopyalayın.
html-skeleton.html dosyasınını bir kopyasını oluşturun ve iskelet ile aynı dizine kaydedin ve CSS’yi normalleştirin.
HTML sayfasının başına aşağıdakileri ekleyerek iskeleti dahil edin ve CSS’yi normalleştirin:
<link href="normalize.css" rel="stylesheet">
<link href="skeleton.css" rel="stylesheet">
İskelet bir ızgara sisteminden daha fazlasını içerir – ayrıca tipografi ve başlangıç noktası olarak kullanabileceğiniz diğer sayfa öğeleri için CSS içerir. Ancak şimdilik bunları varsayılanlarda bırakacağız – burada asıl ilgilendiğimiz ızgara.
Not: Normalize, Nicolas Gallagher tarafından yazılmış, otomatik olarak bazı yararlı temel düzen düzeltmeleri yapan ve varsayılan öğe stilini tarayıcılar arasında daha tutarlı hale getiren gerçekten kullanışlı küçük bir CSS kütüphanesidir.
Daha önceki örneğimize benzer bir HTML kullanacağız. HTML gövdenize aşağıdakileri ekleyin:
<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div class="col">10</div>
<div class="col">11</div>
<div class="col">12</div>
</div>
<div class="row">
<div class="col">13</div>
<div class="col">14</div>
<div class="col">15</div>
<div class="col">16</div>
</div>
</div>
Skeleton’u kullanmaya başlamak için sarmalayıcı <div>’e bir konteyner sınıfı vermemiz gerekir – bu zaten HTML’imize dahil edilmiştir. Bu, içeriği maksimum 960 piksel genişlikle ortalar. Kutuların artık asla 960 pikselden daha geniş olmadığını görebilirsiniz.
Bu sınıfı uyguladığımızda kullanılan CSS’yi görmek için skeleton.css dosyasına bakabilirsiniz. <div> otomatik olarak sol ve sağ kenar boşlukları kullanılarak ortalanır ve sola ve sağa 20 piksellik bir dolgu uygulanır. Skeleton ayrıca daha önce yaptığımız gibi kutu boyutlandırma özelliğini border-box olarak ayarlar, böylece bu öğenin dolgusu ve kenarlıkları toplam genişliğe dahil edilir.
.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
Öğeler yalnızca bir satırın içindeyse ızgaranın bir parçası olabilir, bu nedenle daha önceki örneğimizde olduğu gibi, içerik “div “i ile gerçek içerik kapsayıcı “div “lerimiz arasında iç içe geçmiş satır sınıfına sahip ek bir “div” veya başka bir öğeye ihtiyacımız vardır. Ki, bunu da zaten yapmıştık.
Şimdi konteyner kutularını yerleştirelim. İskelet 12 sütunlu bir ızgaraya göre oluşturulmuştu. Üst satır kutularının hepsinin bir sütuna yayılması için bir sütunluk sınıflara ihtiyacı var.
Aşağıdaki kod parçasında gösterildiği gibi bunları şimdi ekleyin:
<div class="container">
<div class="row">
<div class="one column">1</div>
<div class="one column">2</div>
<div class="one column">3</div>
/* and so on */
</div>
</div>
Ardından, ikinci satırdaki konteynerlere, yayılmaları gereken sütun sayısını açıklayan sınıflar verin:
<div class="row">
<div class="one column">13</div>
<div class="six columns">14</div>
<div class="three columns">15</div>
<div class="two columns">16</div>
</div>
Etkisini görmek için HTML dosyanızı kaydedip tarayıcınızda açmayı deneyin.
Not: Bu örneği çalıştırmakta sorun yaşıyorsanız, html-skeleton-finished.html dosyasıyla karşılaştırmayı deneyin (canlı olarak çalıştığını da görebilirsiniz).
Skeleton.css dosyasına bakarsanız bunun nasıl çalıştığını görebilirsiniz. Örneğin, Skeleton, kendilerine “üç sütun” sınıfları eklenmiş öğeleri stilize etmek için aşağıdaki tanımlara sahiptir.
.three.columns { width: 22%; }
Skeleton’un (veya başka herhangi bir grid sisteminin) yaptığı tek şey, işaretlemenize ekleyerek kullanabileceğiniz önceden tanımlanmış sınıflar oluşturmaktır. Bu, yüzde hesaplama işini kendiniz yapmış olmanızla tamamen aynıdır.
Gördüğünüz gibi, Skeleton kullanırken çok az CSS yazmamız gerekiyor. Biçimlendirmemize sınıflar eklediğimizde bizim için tüm kayan kısımlarla ilgilenir. Düzen sorumluluğunu başka bir şeye devretme yeteneği, ızgara sistemi için bir çerçeve kullanmayı cazip bir seçim haline getirdi! Ancak bugünlerde CSS Izgara Düzeni ile birlikte birçok geliştirici CSS’in sağladığı dahili yerel ızgarayı kullanmak için bu çerçevelerden uzaklaşıyor.
Özet
Artık eski sitelerle çalışırken ve CSS Grid Layout’un yerel ızgarası ile bu eski sistemler arasındaki farkı anlamada faydalı olacak çeşitli ızgara sistemlerinin nasıl oluşturulduğunu anlıyorsunuz.