CSS Podcast - 011: Izgara
Web tasarımında gerçekten yaygın olarak kullanılan bir düzen başlık, kenar çubuğu, gövde ve alt bilgi düzenidir.
Yıllar içinde bu düzeni çözmek için pek çok yöntem vardı. CSS ızgarasında ise bu oldukça basit olmakla kalmıyor, aynı zamanda birçok seçeneğiniz de var. Izgara, dış boyutlandırmanın doğal boyutlandırma esnekliğiyle sağladığı kontrolü birleştirmede oldukça kullanışlıdır. Bu nedenle, bu tür düzenler için idealdir. Bunun nedeni, ızgaranın iki boyutlu içerik için tasarlanmış bir düzen yöntemi olmasıdır. Diğer bir deyişle, öğeleri aynı anda satırlar ve sütunlar halinde yerleştirme.
Izgara düzeni oluştururken satırlar ve sütunlar içeren bir ızgara tanımlarsınız. Ardından bu ızgaraya öğeler yerleştirir veya tarayıcının bunları oluşturduğunuz hücrelere otomatik olarak yerleştirmesini sağlarsınız. Izgarada kullanılacak çok fazla şey var, ancak mevcut seçeneklerin genel bir özetiyle hemen ızgara düzenleri oluşturmaya başlayabilirsiniz.
Genel bakış
Peki, ızgara ile neler yapabilirsiniz? Izgara düzenlerinde aşağıdaki özellikler bulunur. Bu kılavuzda bunların tümü hakkında bilgi edinebilirsiniz.
- Izgara, satırlar ve sütunlarla tanımlanabilir. Bu satır ve sütun kanallarının nasıl boyutlandırılacağını seçebilirsiniz veya bunlar içeriğin boyutuna göre değişebilir.
- Izgara kapsayıcısının doğrudan alt öğeleri otomatik olarak bu ızgaraya yerleştirilir.
- Alternatif olarak, öğeleri tam olarak istediğiniz konuma yerleştirebilirsiniz.
- Izgaradaki çizgiler ve alanlar, yerleşimi kolaylaştırmak için adlandırılabilir.
- Izgara kapsayıcısındaki boş alan, kanallar arasında dağıtılabilir.
- Izgara öğeleri, kendi alanları içinde hizalanabilir.
Grid terminolojisi
CSS ilk kez gerçek bir düzen sistemine sahip olduğundan ızgara, birçok yeni terminolojiyle sunuluyor.
Kılavuz çizgileri
Izgara, yatay ve dikey olarak ilerleyen çizgilerden oluşur. Izgaranızda dört sütun varsa, son sütundan sonraki satır dahil beş sütun satırı bulunur.
Çizgiler 1'den başlayarak numaralandırılır. Numaralandırma, bileşenin yazma moduna ve komut dosyası yönünü takip eder. Bu, 1. sütun satırının İngilizce gibi soldan sağa doğru bir dilde solda, Arapça gibi sağdan sola yazılan bir dilde ise sağda olacağı anlamına gelir.
Izgara kanalları
Parkur, iki ızgara çizgisi arasındaki boşluktur. Satır yolu, iki satır satırı ve sütun yolu arasında iki sütun satırı arasındadır. Izgaramızı oluştururken bu izlere bir boyut atayarak oluştururuz.
Tablo hücresi
Izgara hücresi, bir ızgarada satır ve sütun kanallarının kesişimiyle tanımlanan en küçük alandır. Tablo hücresi veya e-tablodaki hücre gibidir. Bir ızgara tanımlar ve öğelerden hiçbirini yerleştirmezseniz tanımlanan her ızgara hücresine otomatik olarak bir öğe yerleştirilir.
Izgara alanı
Birkaç ızgara hücresi birlikte. Izgara alanları, bir öğenin birden fazla kanal boyunca yayılmasıyla oluşturulur.
Boşluklar
Parkurlar arasındaki oluk veya ara sokak. Boyutlandırma açısından, bunlar normal bir parkur gibi çalışır. İçeriği boşluğa yerleştiremezsiniz, ancak ızgara öğelerini bu boşluk içine alabilirsiniz.
Izgara kapsayıcısı
display: grid
uygulanmış olan HTML öğesi, bu nedenle doğrudan alt öğeler için yeni bir ızgara biçimlendirme bağlamı oluşturur.
.container {
display: grid;
}
Izgara öğesi
Izgara öğesi, ızgara kapsayıcısının doğrudan alt öğesi olan öğedir.
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Satırlar ve sütunlar
Basit bir ızgara oluşturmak için aşağıdaki gibi üç sütunlu yol, iki satırlık yol ve 10 piksellik bir boşluk içeren bir ızgara tanımlayabilirsiniz.
.container {
display: grid;
grid-template-columns: 5em 100px 30%;
grid-template-rows: 200px auto;
gap: 10px;
}
Bu çizelge, terminoloji bölümünde açıklanan birçok şeyi gösterir. Üç sütunlu kanal vardır. Her parça için farklı bir uzunluk birimi kullanılır. Birinde uzunluk birimi, diğeri ise otomatik olan iki satırdan oluşur. Araç, parça boyutu olarak kullanıldığında içerik kadar büyük olarak düşünülebilir. Parçalar varsayılan olarak otomatik olarak boyutlandırılır.
.container
sınıfına sahip öğenin alt öğeleri varsa bunlar hemen bu tabloda yer alır. Bunu aşağıdaki demoda uygulamalı olarak görebilirsiniz.
Chrome Geliştirici Araçları'ndaki ızgara yer paylaşımı, tablonun çeşitli bölümlerini anlamanıza yardımcı olabilir.
Chrome'da demoyu açın.
container
kimliğine sahip gri arka plana sahip öğeyi inceleyin.
DOM'da, .container
öğesinin yanındaki ızgara rozetini seçerek ızgarayı vurgulayın.
Düzen sekmesinin içinde, ızgaranızdaki satır numaralarını görmek için açılır listeden Satır Numaralarını Görüntüle'yi seçin.
![Altyazıda ve talimatlarda açıklandığı gibi](https://web.developers.google.cn/static/learn/css/grid/image/as-described-the-caption-3a7c065047c37.jpg?authuser=5&hl=tr)
Yerleşik boyutlandırma anahtar kelimeleri
Izgara kanalları, birimleri boyutlandırma bölümünde açıklanan uzunluk ve yüzde boyutlarına ek olarak doğal boyutlandırma anahtar kelimeleri kullanabilir. Bu anahtar kelimeler Kutu Boyutlandırma spesifikasyonunda tanımlanır ve yalnızca kılavuz parçalarında değil, CSS'de kutu boyutlandırma için başka yöntemler de ekler.
min-content
max-content
fit-content()
min-content
anahtar kelimesi, parça içeriğini taşmadan mümkün olduğunca küçük bir parça oluşturur.
Örnek ızgara düzeninin üç sütunlu kanalı tümü min-content
boyutunda olacak şekilde değiştirilmesi, bunların kanaldaki en uzun kelime kadar dar olacağı anlamına gelir.
max-content
anahtar kelimesi ise tam tersi bir etkiye sahiptir.
Parça, tüm içeriğin uzun bir bölünmemiş dizede gösterileceği kadar geniş olur.
Bu, dizenin kaydırılmayacağından taşmalara neden olabilir.
fit-content()
işlevi başlangıçta max-content
gibi çalışır.
Ancak, parça işleve geçirdiğiniz boyuta ulaştığında içerik sarmalanmaya başlar.
Dolayısıyla, max-content
boyutu 10em'den küçükse ancak hiçbir zaman 10em'den büyük değilse fit-content(10em)
10em'den kısa bir parça oluşturur.
Bir sonraki demoda, ızgara kanallarının boyutunu değiştirerek farklı doğal boyut anahtar kelimelerini deneyin.
fr
birimi
Mevcut uzunluk boyutları, yüzdeler ve bu yeni anahtar kelimeler de mevcuttur.
Yalnızca ızgara düzeninde çalışan özel bir boyutlandırma yöntemi de vardır.
Bu fr
birimi, ızgara kapsayıcısındaki kullanılabilir alanın payını belirten esnek bir uzunluktur.
fr
birimi, flexbox'ta flex: auto
kullanımına benzer bir şekilde çalışır.
Öğeler yerleştirildikten sonra alanı dağıtır.
Dolayısıyla, tümü aynı kullanılabilir alan payını alan üç sütuna sahip olmak için:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Fr birimi kullanılabilir alanı paylaştıkça sabit boyutlu bir boşlukla veya sabit boyutlu parçalarla birleştirilebilir.
Sabit boyutlu bir öğeye sahip bir bileşen ve kalan alanı kaplayan ikinci parçaya sahip olmak için grid-template-columns: 200px 1fr
parça listesi olarak kullanabilirsiniz.
Fr birimi için farklı değerler kullanmak, alanı orantılı olarak paylaşır. Daha büyük değerler, daha fazla boş alan yaratıyor. Aşağıdaki demoda üçüncü parçanın değerini değiştirin.
minmax()
işlevi
Bu işlev, bir parça için minimum ve maksimum boyut belirleyebileceğiniz anlamına gelir.
Bu oldukça kullanışlı olabilir.
Yukarıda kalan alanı dağıtan fr
birimi örneğini ele alırsak minmax(auto, 1fr)
olarak minmax()
kullanılarak yazılabilir.
Izgara, içeriğin doğuştan gelen boyutuna bakar ve ardından, içeriğe yeterince yer verdikten sonra mevcut alanı dağıtır.
Yani, her birinin ızgara kapsayıcısındaki mevcut tüm alandan eşit paya sahip olduğu kanallar alamayabilirsiniz.
Bir parkuru, ızgara kapsayıcısındaki alandan eşit boşluklardan eşit pay almaya zorlamak için minimum değeri kullanın.
Parça boyutu olarak 1fr
değerini minmax(0, 1fr)
ile değiştirin.
Bu, minimum içerik boyutunu değil, parçanın minimum boyutunu 0 yapar.
Daha sonra ızgara, kapsayıcıdaki mevcut tüm boyutları alır, boşluklar için gereken boyutu çıkarır ve geri kalanını fr birimlerinize göre paylaşır.
repeat()
gösterimi
Eşit sütunlara sahip 12 sütunlu bir kanal ızgarası oluşturmak istiyorsanız aşağıdaki CSS'yi kullanabilirsiniz.
.container {
display: grid;
grid-template-columns:
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr);
}
İsterseniz repeat()
kullanarak da yazabilirsiniz:
.container {
display: grid;
grid-template-columns: repeat(12, minmax(0,1fr));
}
repeat()
işlevi, kanal girişinizin herhangi bir bölümünü tekrarlamak için kullanılabilir.
Örneğin, bir parça kalıbını tekrarlayabilirsiniz.
Ayrıca normal parçalarınız ve tekrarlanan bir bölümünüz de olabilir.
.container {
display: grid;
grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}
auto-fill
ve auto-fit
Izgara düzeniyle kullanışlı bir kalıp oluşturmak için parkur boyutu, minmax()
ve tekrar hakkında öğrendiğiniz her şeyi birleştirebilirsiniz.
Sütun sayısı belirlemek yerine kapsayıcınıza sığacak kadar kanal oluşturmak isteyebilirsiniz.
Bu bilgiye, repeat()
ve auto-fill
veya auto-fit
anahtar kelimeleri ile ulaşabilirsiniz.
Aşağıdaki ızgarada, kapsayıcıya sığacak sayıda 200 piksellik parkur oluşturulacaktır.
Demoyu yeni bir pencerede açın ve görüntü alanının boyutunu değiştirdiğinizde ızgaranın nasıl değiştiğini görün.
Demoda uygun sayıda parça bulabilirsiniz.
Ancak yollar esnek değildir.
Bu örnekte, 200 piksellik bir parkur için yeterli alan kalana kadar bir boşluk oluşur.
minmax()
işlevini eklerseniz minimum 200 piksel ve en fazla 1 fr olacak şekilde sığacak sayıda parça isteyebilirsiniz.
Daha sonra ızgara, 200 piksellik izleri yerleştirir ve kalan alan bunlara eşit olarak dağıtılır.
Bu, herhangi bir medya sorgusuna gerek kalmadan iki boyutlu, duyarlı bir düzen oluşturur.
auto-fill
ile auto-fit
arasında küçük bir fark var.
Bir sonraki demoda, yukarıda açıklanan söz dizimi kullanılarak ızgara düzeniyle oynanacaktır, ancak ızgara kapsayıcısında yalnızca iki ızgara öğesi bulunmalıdır.
auto-fill
anahtar kelimesini kullanarak boş kanalların oluşturulduğunu görebilirsiniz.
Anahtar kelimeyi auto-fit
olarak değiştirdiğinizde kanallar 0 boyuta küçültülür.
Bu, esnek kanalların artık alanı kaplayacak şekilde büyüdüğü anlamına gelir.
Bunun dışında, auto-fill
ve auto-fit
anahtar kelimelerinin işleyişi tam olarak aynıdır.
İlk parça doldurulduktan sonra arasında fark olmaz.
Otomatik yerleşim
Şimdiye kadar demolarda ızgara otomatik yerleşiminin çalıştığını görmüştünüz. Öğeler, kaynakta göründükleri sırayla ızgaraya her hücre için bir tane gelecek şekilde yerleştirilir. Birçok düzen için ihtiyacınız olan tek şey bu olabilir. Daha fazla kontrole ihtiyacınız varsa, yapmak isteyebileceğiniz birkaç şey vardır. İlki, otomatik yerleşim düzenini değiştirmektir.
Öğeleri sütunlara yerleştirme
Izgara düzeninin varsayılan davranışı, öğelerin satırlar boyunca yerleştirilmesidir.
Bunun yerine, grid-auto-flow: column
kullanarak öğelerin sütunlara yerleştirilmesini sağlayabilirsiniz.
Satır kanalları tanımlamanız gerekir. Aksi takdirde öğeler, içsel sütun kanalları oluşturur ve tümünü tek bir uzun satırda düzenler.
Bu değerler dokümanın yazma moduyla ilişkilidir.
Doküman veya bileşenin yazma modunda bir satır her zaman cümlenin çalıştığı yönde çalışır.
Bir sonraki demoda modu grid-auto-flow
değerini ve writing-mode
özelliğini değiştirebilirsiniz.
Parçalar genişliyor
Otomatik olarak yerleştirilen bir düzendeki öğelerin bazılarının veya tümünün birden fazla kanalı kapsamasına neden olabilirsiniz.
grid-column-end
veya grid-row-end
için değer olarak, span
anahtar kelimesini ve dahil edilecek satır sayısını kullanın.
.item {
grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}
grid-column-start
belirtmediğiniz için bu, auto
başlangıç değerini kullanır ve otomatik yerleştirme kurallarına göre yerleştirilir.
grid-column
kısayolunu kullanarak da aynı şeyi belirtebilirsiniz:
.item {
grid-column: auto / span 2;
}
Boşlukları doldurma
Birden fazla kanala yayılan bazı öğelerin otomatik olarak yerleştirildiği bir düzen, bazı doldurulmamış hücreler içeren bir ızgarayla sonuçlanabilir.
Tamamen otomatik olarak yerleştirilmiş bir düzene sahip ızgara düzeninin varsayılan davranışı, her zaman ileriye ilerlemektir.
Öğeler, kaynaktaki sıraya veya order
özelliğinde yapılan herhangi bir değişikliğe göre yerleştirilir.
Bir öğeyi sığdırmak için yeterli alan yoksa ızgara bir boşluk bırakır ve bir sonraki kanala geçer.
Bir sonraki demoda bu davranış gösterilmektedir.
Onay kutusu yoğun paketleme modunu uygular.
Bu, grid-auto-flow
öğesine dense
değeri verilerek etkinleştirilir.
Bu değer uygulandığında ızgara, düzendeki öğeleri daha sonra alır ve boşlukları doldurmak için kullanır.
Bu, ekranın mantıksal sırayla bağlantısının kesileceği anlamına gelebilir.
Öğeleri yerleştirme
CSS Grid'de zaten birçok işleviniz var. Şimdi de öğeleri oluşturduğumuz tabloya nasıl yerleştirdiğimize bir göz atalım.
Unutulmaması gereken ilk şey CSS Izgara Düzeni'nin numaralı satırlardan oluşan bir ızgaraya dayalı olduğudur. Öğeleri ızgaraya yerleştirmenin en basit yolu bunları bir satırdan diğerine yerleştirmektir. Bu kılavuzda öğeleri yerleştirmenin başka yollarını da keşfedeceksiniz, ancak bu numaralı satırlara her zaman erişebilirsiniz.
Öğeleri satır numarasına göre yerleştirmek için kullanabileceğiniz özellikler şunlardır:
Başlangıç ve bitiş satırlarını aynı anda ayarlamanızı sağlayan kısaltmalar vardır:
Öğenizi yerleştirmek için, yerleştirilmesi gereken ızgara alanının başlangıç ve bitiş çizgilerini ayarlayın.
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 200px 100px);
}
.item {
grid-column-start: 1; /* start at column line 1 */
grid-column-end: 4; /* end at column line 4 */
grid-row-start: 2; /*start at row line 2 */
grid-row-end: 4; /* end at row line 4 */
}
Chrome Geliştirici Araçları, öğenizin nereye yerleştirildiğini kontrol etmeniz için size satırlarla ilgili görsel bir kılavuz sunabilir.
Satır numaralandırma, bileşenin yazma modunu ve yönünü izler. Bir sonraki demoda, öğelerin yerleşiminin metnin akış şeklinde nasıl tutarlı kaldığını görmek için yazma modunu veya yönünü değiştirin.
Öğeleri yığma
Çizgiye dayalı konumlandırmayı kullanarak öğeleri ızgaradaki aynı hücreye yerleştirebilirsiniz.
Yani öğeleri yığınlayabilirsiniz veya
bir öğenin başka bir öğeyle kısmen çakışmasını sağlayabilirsiniz.
Kaynakta daha sonra gelen öğeler, daha önce gelen öğelerin üstünde görüntülenir.
Bu yığma sırasını, konumlandırılmış öğelerde olduğu gibi z-index
öğesini kullanarak değiştirebilirsiniz.
Negatif satır numaraları
grid-template-rows
ve grid-template-columns
kullanarak bir ızgara oluşturduğunuzda uygunsuz ızgara olarak bilinen bir tablo oluşturursunuz.
Bu, tanımladığınız ve parçalara boyut verdiğiniz bir ızgaradır.
Bazen bu açık ızgaranın dışında gösterilen öğeleriniz olur.
Örneğin, sütun kanalları tanımlayabilir ve ardından satır kanalları tanımlamadan birkaç satır ızgara öğesi ekleyebilirsiniz.
Parçalar varsayılan olarak otomatik boyutlandırılır.
Ayrıca, tanımlanan açık ızgaranın dışında grid-column-end
kullanarak bir öğe de yerleştirebilirsiniz.
Her iki durumda da ızgara, düzenin çalışması için parçalar oluşturur ve bu kanallar örtük ızgara olarak adlandırılır.
Örtülü veya açık bir ızgara ile çalışıyorsanız çoğu zaman bir fark yaratmaz. Ancak, satır tabanlı yerleşimde bu ikisi arasındaki temel farkla karşılaşabilirsiniz.
Negatif satır numaralarını kullanarak açık ızgaranın son satırındaki öğeleri yerleştirebilirsiniz.
Bu, bir öğenin ilk sütun satırından son sütuna kadar geçerli olmasını istiyorsanız yararlı olabilir.
Bu durumda, grid-column: 1 / -1
kullanabilirsiniz.
Öğe, açık ızgaranın tamamında genişler.
Bununla birlikte, bu yalnızca açık ızgara için çalışır. Otomatik olarak yerleştirilmiş öğelerden oluşan üç satırlık bir düzen alın. Bu düzende, ilk öğenin tablonun son satırına yayılmasını sağlayın.
Bu öğeye grid-row: 1 / -1
verebilirsiniz.
Aşağıdaki demoda bunun çalışmadığını görebilirsiniz.
Parkurlar örtülü ızgarada oluşturulur. -1
kullanarak ızgaranın sonuna ulaşmak mümkün değildir.
Örtülü kanalları boyutlandırma
Örtülü ızgarada oluşturulan izler varsayılan olarak otomatik boyutlandırılır.
Ancak satırların boyutlarını kontrol etmek istiyorsanız ve grid-auto-columns
sütunları için grid-auto-rows
özelliğini kullanın.
Tüm örtülü satırları en az 10em
ve maksimum auto
boyutunda oluşturmak için:
.container {
display: grid;
grid-auto-rows: minmax(10em, auto);
}
100 piksel ve 200 piksel genişliğinde parkur desenine sahip örtülü sütunlar oluşturmak için. Bu durumda, ilk örtülü sütun 100 piksel, ikinci 200 piksel, üçüncü 100 piksel vb. olur.
.container {
display: grid;
grid-auto-columns: 100px 200px;
}
Adlandırılmış kılavuz çizgileri
Satırlarda sayı yerine ad bulunursa bu, öğelerin bir düzene yerleştirilmesini kolaylaştırabilir. Köşeli parantezlerin arasına istediğiniz bir adı ekleyerek ızgaranızdaki herhangi bir çizgiyi adlandırabilirsiniz. Birden fazla ad eklenebilir ve aynı parantez içine bir boşluk eklenir. Satırları adlandırdıktan sonra, bu satırlar numaraların yerine kullanılabilir.
.container {
display: grid;
grid-template-columns:
[main-start aside-start] 1fr
[aside-end content-start] 2fr
[content-end main-end]; /* a two column layout */
}
.sidebar {
grid-column: aside-start / aside-end;
/* placed between line 1 and 2*/
}
footer {
grid-column: main-start / main-end;
/* right across the layout from line 1 to line 3*/
}
Izgara Şablonu Alanları
Ayrıca, ızgaradaki alanları adlandırabilir ve öğeleri bu adlandırılmış alanlara yerleştirebilirsiniz. Bu, bileşeninizin nasıl göründüğünü CSS'de görmenize olanak tanıdığı için harika bir tekniktir.
Başlamak için grid-area
özelliğini kullanarak ızgara kapsayıcınızın doğrudan alt öğelerine bir ad verin:
header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
footer {
grid-area: footer;
}
Bu ad, auto
ve span
anahtar kelimeleri dışında istediğiniz herhangi bir şey olabilir.
Tüm öğeleriniz adlandırıldıktan sonra, her bir öğenin hangi ızgara hücrelerini kaplayacağını tanımlamak için grid-template-areas
özelliğini kullanın.
Her satır tırnak işaretleri içinde tanımlanır.
.container {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-areas:
"header header header header"
"sidebar content content content"
"sidebar footer footer footer";
}
grid-template-areas
kullanılırken uyulması gereken birkaç kural vardır.
- Değer, boş hücre içermeyen tam bir ızgara olmalıdır.
- Parçaları genişletmek için adı tekrarlayın.
- Ad tekrar edilerek oluşturulan alanlar dikdörtgen şeklinde olmalıdır ve bu alanların bağlantısı kesilemez.
Yukarıdaki kurallardan herhangi birini ihlal ederseniz değer geçersiz sayılır ve silinir.
Izgarada boşluk bırakmak için aralarında boşluk olmayan .
veya katlar kullanın.
Örneğin, ızgaradaki ilk hücreyi boş bırakmak için .
karakterden oluşan bir dizi ekleyebilirim:
.container {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-areas:
"....... header header header"
"sidebar content content content"
"sidebar footer footer footer";
}
Tüm düzeniniz tek bir yerde tanımlandığından, medya sorguları kullanarak düzeni yeniden tanımlamanız kolaylaşır.
Sonraki örnekte, grid-template-columns
ve grid-template-areas
değerlerini yeniden tanımlayarak üç sütuna taşınan iki sütunlu bir düzen oluşturduk.
Görüntü alanı boyutuyla oynamak ve düzen değişikliğini görmek için örneği yeni bir pencerede açın.
Ayrıca, diğer ızgara yöntemlerinde olduğu gibi grid-template-areas
özelliğinin writing-mode
ve yön ile ilişkisini de görebilirsiniz.
Steno özellikler
Izgara özelliklerinin çoğunu tek seferde ayarlamanıza olanak tanıyan iki kısaltma özelliği vardır. Bunların birlikte nasıl çalıştığını gösterene kadar bunlar biraz kafa karıştırıcı görünebilir. Bunları kullanıp kullanmayacağınıza veya el yazısı kullanmayı tercih edip etmediğiniz size bağlıdır.
grid-template
grid-template
özelliği grid-template-rows
, grid-template-columns
ve grid-template-areas
kelimesinin kısaltmasıdır.
İlk olarak satırlar, grid-template-areas
değeriyle birlikte tanımlanır.
Sütun boyutlandırması /
işaretinden sonra eklenir.
.container {
display: grid;
grid-template:
"head head head" minmax(150px, auto)
"sidebar content content" auto
"sidebar footer footer" auto / 1fr 1fr 1fr;
}
grid
tesis
grid
kısaltması, grid-template
kısaltması ile tam olarak aynı şekilde kullanılabilir.
Bu şekilde kullanıldığında, kabul ettiği diğer ızgara özelliklerini başlangıç değerlerine sıfırlar.
Tam grup şunlardır:
grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow
Alternatif olarak bu kısaltmayı örtülü ızgaranın nasıl davranacağını tanımlamak için de kullanabilirsiniz. Örneğin:
.container {
display: grid;
grid: repeat(2, 80px) / auto-flow 120px;
}
Uyum
Izgara düzeni, flexbox kılavuzunda öğrendiğiniz hizalama özelliklerini kullanır.
Izgarada, justify-
ile başlayan özellikler her zaman satır içi eksende kullanılır. Bu yöndeki cümleler, yazma modunuzda ilerler.
align-
ile başlayan özellikler blok ekseninde kullanılır. Bu, yazma modunuzda blokların yerleştirildiği yöndür.
justify-content
vealign-content
: Izgara kapsayıcısında parçaların etrafına veya aralarında ek alan dağıtın.justify-self
vealign-self
: Öğeyi, yerleştirildiği ızgara alanı içinde taşımak için ızgara öğesine uygulanır.justify-items
vealign-items
: öğelerdeki tümjustify-self
özelliklerini ayarlamak için ızgara kapsayıcısına uygulanır.
Fazladan alan dağıtma
Bu demoda ızgara, sabit genişlikli parçaları yerleştirmek için gereken alandan daha büyüktür.
Bu, ızgaranın hem satır içi hem de blok boyutlarında alanımız olduğu anlamına gelir.
Kanalların nasıl davrandığını görmek için farklı align-content
ve justify-content
değerlerini deneyin.
space-between
gibi değerler kullanılırken boşlukların nasıl büyüdüğünü ve iki parçayı kapsayan tablo öğelerinin de boşluğa eklenen ek alanı kaplayacak şekilde büyüdüğünü unutmayın.
İçerik taşıma
Arka plan rengine sahip öğeler, justify-self
ve align-self
için başlangıç değeri stretch
olduğundan, yerleştirildikleri ızgara alanını tamamen doldurmuş gibi görünür.
Demoda, düzeni nasıl değiştirdiğini görmek için justify-items
ve align-items
değerlerini değiştirin.
Izgara alanının boyutu değişmemiştir,
bunun yerine öğeler tanımlanan alan içinde hareket etmektedir.
Öğrendiklerinizi sınayın
Şebeke bilginizi test edin
Aşağıdakilerden hangisi CSS ızgara terimleridir?
main { display: grid; }
Izgaranın varsayılan düzen yönü nedir?
grid-auto-flow: column
mevcut olsaydı, ızgara sütun olarak düzenlenirdi.auto-fit
ile auto-fill
arasındaki fark nedir?
auto-fit
, hücreleri kapsayıcıya sığacak şekilde uzatır. auto-fill
ise kapsayıcıya sığmaz.auto-fill
, uzatma yapmadan şablona mümkün olduğunca çok öğe yerleştirir. Fit, bu modelleri uygun kollara sığdırır.auto-fit
, kapsayıcıyı alt öğelere uyacak şekilde genişletir. Burada auto-fill
, alt öğeleri kapsayıcıya sığdırır.min-content
nedir?
min-content
ise kutudaki kelimeler ve resimlerle ilişkilidir.min-content
'ın kastettiği harf değildir.min-content
olur.max-content
nedir?
max-content
harflerini ifade etmez.min-content
.Otomatik yerleşim nedir?
grid-area
verildiğinde ve bu öğeler bu hücreye yerleştirildiğinde.Kaynaklar
Bu kılavuzda, ızgara düzeni spesifikasyonunun farklı bölümlerine genel bir bakış sunulmaktadır. Daha fazla bilgi edinmek için aşağıdaki kaynaklara göz atın.