Tablo

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.

1. 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.
2. Izgara kapsayıcısının doğrudan alt öğeleri otomatik olarak bu ızgaraya yerleştirilir.
3. Alternatif olarak, öğeleri tam olarak istediğiniz konuma yerleştirebilirsiniz.
4. Izgaradaki çizgiler ve alanlar, yerleşimi kolaylaştırmak için adlandırılabilir.
5. Izgara kapsayıcısındaki boş alan, kanallar arasında dağıtılabilir.
6. 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.

Chrome Geliştirici Araçları'nda vurgulanan ve satır numaralarını, hücreleri ve kanalları gösteren ızgara.

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.

Not: Bu demoda, otomatik ayarı kullanıldığında ızgara sütunlarının kapsayıcıyı dolduracak şekilde genişletildiğini görebilirsiniz. Izgara kapsayıcısında ek alan olursa otomatik olarak boyutlandırılmış parkurlar varsayılan olarak esnetir.

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

Tarayıcı Desteği

• 57
• 16
• 52
• 10.1

Kaynak

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

Tarayıcı Desteği

• 57
• 16
• 76
• 10.1

Kaynak

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:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

Başlangıç ve bitiş satırlarını aynı anda ayarlamanızı sağlayan kısaltmalar vardır:

• grid-column
• grid-row

Öğ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

Tarayıcı Desteği

• 57
• 16
• 52
• 10.1

Kaynak

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

Tarayıcı Desteği

• 57
• 16
• 52
• 10.1

Kaynak

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 ve align-content: Izgara kapsayıcısında parçaların etrafına veya aralarında ek alan dağıtın.
• justify-self ve align-self: Öğeyi, yerleştirildiği ızgara alanı içinde taşımak için ızgara öğesine uygulanır.
• justify-items ve align-items: öğelerdeki tüm justify-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.

Not: flexbox'ta olduğu gibi bu özellikler yalnızca dağıtılacak ek alan varsa çalışır. Izgara kanallarınız kapsayıcıyı düzgün bir şekilde dolduruyorsa paylaşılacak alan kalmaz.

İç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.

Not: Öğeniz bir resimse veya içsel en boy oranına sahip başka bir şeyse öğelerin şeklinin bozulmaması için stretch yerine başlangıç değeri start olur.

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?

çizgiler

Izgara, yatay ve dikey olarak çalışan bu ayırıcılara bölünür.

Çevreler

Maalesef CSS ızgarasında daire kavramı yok.

hücreler

Bir satır ile sütunun tek bir kesişimi, bir ızgara hücresi oluşturur.

bölgeler

Birden çok hücre bir arada.

trenler

Maalesef CSS tablosunda tren kavramı yok.

boşluklar

Hücreler arasındaki boşluk.

parkurlar

Tek bir satır veya sütun, ızgaradaki bir kanalı ifade eder.

main {
  display: grid;
}

Izgaranın varsayılan düzen yönü nedir?

Satırlar

Herhangi bir sütun tanımlanmadığında, ızgara alt öğeleri normalde olduğu gibi blok yönünde yerleştirilir.

Sütunlar

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.

Bu tesislerin davranışı bu şekilde değildir.

min-content nedir?

%0 ile aynı

%0 üst kutunun göreli bir değeridir. min-content ise kutudaki kelimeler ve resimlerle ilişkilidir.

En küçük harf

Küçük bir harf olsa da min-content'ın kastettiği harf değildir.

En uzun kelime veya resim.

"CSS mükemmel" kelime öbeğinde muhteşem kelimesi min-content olur.

max-content nedir?

En uzun cümle veya en büyük resim.

Bu, kutu içeriğinin istediği veya belirttiği maksimum boyuttur. En geniş genişlikte olan bir cümle veya en geniş kapsamda bir resimdir.

En uzun harf.

En uzun harf vardır ancak max-content harflerini ifade etmez.

En uzun kelime.

En uzun kelime min-content.

Otomatik yerleşim nedir?

Izgara, alt öğeleri alıp tarayıcı bulgularına göre en iyi sıraya yerleştirdiğinde.

Hiçbir tarayıcı içerik sıranızı değiştirmez. Bunu yalnızca kendi stilleriniz yapar.

Izgara alt öğelerine bir grid-area verildiğinde ve bu öğeler bu hücreye yerleştirildiğinde.

Bu, otomatik yerleşim değil, kesin yerleşimdir.

Atanmamış ızgara öğeleri, düzen şablonunda sonraki sıraya yerleştirildiğinde.

Belirgin bir alanı olmayan ızgara öğeleri bir sonraki uygun ızgara hücresine yerleştirilir

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.

• MDN CSS Izgara Düzeni
• Eksiksiz Kılavuz
• Izgara Kapsayıcısı Oluşturma
• Chrome Geliştirici Araçları'nda CSS ızgarasını inceleme
• Kapsamlı bir grup eğitim materyali