Tablo

The CSS Podcast - 011: Grid

Web tasarımında en yaygın düzen, başlık, kenar çubuğu, gövde ve altbilgi düzenidir.

Yıllar boyunca bu düzeni çözmek için birçok yöntem kullanıldı. Ancak CSS ızgara ile bu işlem hem nispeten basittir hem de birçok seçeneğiniz vardır. Grid, harici boyutlandırmanın sağladığı kontrolü, dahili boyutlandırmanın esnekliğiyle birleştirmede son derece faydalıdır. Bu da grid'i bu tür bir düzen için ideal kılar. Bunun nedeni, ızgaranın iki boyutlu içerikler için tasarlanmış bir düzen yöntemi olmasıdır. Yani öğeleri aynı anda satır ve sütunlar halinde düzenleme.

Izgara düzeni oluştururken satır ve sütun içeren bir ızgara tanımlarsınız. Ardından, öğeleri bu ızgaraya yerleştirir veya tarayıcının bunları oluşturduğunuz hücrelere otomatik olarak yerleştirmesine izin verirsiniz. Grid'de çok fazla şey yapabilirsiniz. Ancak mevcut özelliklere göz atarak kısa sürede grid düzenleri oluşturabilirsiniz.

Genel Bakış

Peki ızgara ile neler yapabilirsiniz? Izgara düzenleri aşağıdaki özelliklere sahiptir. Bunların hepsini bu kılavuzda öğreneceksiniz.

1. Izgara, satır ve sütunlarla tanımlanabilir. Bu satır ve sütun parçalarının boyutunu seçebilir veya içerik boyutuna göre ayarlanmasını sağlayabilirsiniz.
2. Izgara kapsayıcının doğrudan alt öğeleri otomatik olarak bu ızgaraya yerleştirilir.
3. Alternatif olarak, öğeleri tam olarak istediğiniz konuma yerleştirebilirsiniz.
4. Yerleşimi kolaylaştırmak için ızgaradaki çizgilere ve alanlara ad verilebilir.
5. Izgara kapsayıcısındaki boş alan parçalar arasında dağıtılabilir.
6. Izgara öğeleri, alanları içinde hizalanabilir.

Izgara terminolojisi

CSS'de ilk kez gerçek bir düzen sistemi bulunduğundan Grid, bir dizi yeni terim içerir.

Kılavuz çizgileri

Izgara, yatay ve dikey olarak çalışan çizgilerden oluşur. Tablonuzda dört sütun varsa son sütundan sonraki sütun satırı da dahil olmak üzere beş sütun satırı bulunur.

Satırlar 1'den başlayarak numaralandırılır. Numaralandırma, bileşenin yazma moduna ve komut dosyası yönüne göre yapılır. Bu, 1. sütun satırının İngilizce gibi soldan sağa okunan bir dilde solda, Arapça gibi sağdan sola okunan bir dilde ise sağda olacağı anlamına gelir.

Izgara parçaları

Parça, iki ızgara çizgisi arasındaki boşluktur. Satır yolu iki satır çizgisi arasında, sütun yolu ise iki sütun çizgisi arasındadır. Izgaramızı oluştururken bu parçaları bir boyut atayarak oluştururuz.

Tablo hücresi

Izgara hücresi, satır ve sütun kanallarının kesişimiyle tanımlanan bir ızgaradaki en küçük alandır. Tıpkı bir elektronik tablodaki tablo hücresi veya hücre gibidir. Bir ızgara tanımlar ve öğelerden hiçbirini yerleştirmezseniz öğeler, tanımlanan her ızgara hücresine otomatik olarak yerleştirilir.

Izgara alanı

Birkaç ızgara hücresi birlikte. Izgara alanları, bir öğenin birden fazla kanala yayılmasını sağlayarak oluşturulur.

Boşluklar

Raylar arasındaki oluklar veya ara sokaklar. Bu parçalar, boyutlandırma amacıyla normal bir parça gibi davranır. Boşluklara içerik yerleştiremezsiniz ancak ızgara öğelerini boşluklara sığdırabilirsiniz.

Izgara kapsayıcısı

display: grid uygulanmış olan ve bu nedenle doğrudan alt öğeler için yeni bir ızgara biçimlendirme bağlamı oluşturan HTML öğesi.

.container {
  display: grid;
}

Izgara öğesi

Izgara öğesi, ızgara kapsayıcının doğrudan alt öğesidir.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Satırlar ve sütunlar

Temel bir ızgara oluşturmak için üç sütunlu parça, iki satır parçası ve parçalar arasında 10 piksel boşluk olan bir ızgara tanımlayabilirsiniz.

.container {
    display: grid;
    grid-template-columns: 5em 100px 30%;
    grid-template-rows: 200px auto;
    gap: 10px;
}

Bu ızgara, terminoloji bölümünde açıklanan birçok şeyi göstermektedir. Üç sütun kanalı vardır. Her parça farklı bir uzunluk birimi kullanır. Biri uzunluk birimi, diğeri otomatik olmak üzere iki satır parçası vardır. Parça boyutlandırması için otomatik ayar kullanıldığında, içeriğin boyutu kadar büyük bir resim kullanabilirsiniz. Parçalar varsayılan olarak otomatik olarak boyutlandırılır.

.container sınıfına sahip öğenin alt öğeleri varsa bu öğeler hemen bu ızgara üzerinde düzenlenir. Bu özelliğin işleyiş şeklini aşağıdaki denemede görebilirsiniz.

Chrome DevTools'daki ızgara yer paylaşımı, ızgaranın çeşitli bölümlerini anlamanıza yardımcı olabilir.

Chrome'da demoyu açın. container kimliğine sahip gri arka planlı öğeyi inceleyin. DOM'da .container öğesinin yanındaki ızgara rozetini seçerek ızgarayı vurgulayın. Düzen sekmesinde, ızgaranızdaki satır numaralarını görmek için açılır listeden Satır Numaralarını Göster'i seçin.

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

Yerleşik boyutlandırma anahtar kelimeleri

Boyutlandırma birimleri bölümünde açıklanan uzunluk ve yüzde boyutlarına ek olarak, ızgara parçaları doğal boyutlandırma anahtar kelimelerini kullanabilir. Bu anahtar kelimeler, Kutu Boyutulandırma spesifikasyonunda tanımlanır ve CSS'de yalnızca ızgara kanalları için değil, kutuları boyutlandırmanın ek yöntemlerini ekler.

• min-content
• max-content
• fit-content()

min-content anahtar kelimesi, parça içeriği taşmadan parçayı olabildiğince küçük yapar. Örnek ızgara düzenini, tümü min-content boyutunda üç sütunlu parçalar olacak şekilde değiştirmek, parçaların parçadaki en uzun kelime kadar dar olacağı anlamına gelir.

max-content anahtar kelimesinin etkisi tam tersidir. Parça, tüm içeriğin tek bir uzun ve kesintisiz dize halinde gösterilebileceği kadar geniş olur. Bu durum, dize kaydırılmadığından taşmalara neden olabilir.

fit-content() işlevi ilk başta max-content gibi çalışır. Ancak parça, işleve ilettiğiniz boyuta ulaştığında içerik sarmalanır. Dolayısıyla fit-content(10em), max-content boyutu 10 em'den küçükse 10 em'den küçük ancak hiçbir zaman 10 em'den büyük olmayan bir parça oluşturur.

Sonraki denemede, ızgara kanallarının boyutunu değiştirerek farklı doğal boyutlandırma anahtar kelimelerini deneyin.

Not: Bu demoda, otomatik ayar kullanıldığında ızgara sütunlarının kapsayıcıyı dolduracak şekilde uzadığını görebilirsiniz. Otomatik boyutlandırılmış parçalar, ızgara kapsayıcısında ek alan varsa varsayılan olarak uzar.

fr birimi

Mevcut uzunluk boyutları, yüzdeler ve bu yeni anahtar kelimelerimiz var. Yalnızca ızgara düzeninde çalışan özel bir boyutlandırma yöntemi de vardır. Bu, fr birimidir. fr, ızgara kapsayıcısındaki kullanılabilir alanın bir payını tanımlayan esnek bir uzunluktur.

fr birimi, flexbox'ta flex: auto kullanılmasına benzer şekilde çalışır. Öğeler yerleştirildikten sonra boşluğu dağıtır. Bu nedenle, mevcut alandan eşit pay alan üç sütun oluşturmak için:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

fr birimi, kullanılabilir alanı paylaştığı için sabit boyutlu bir boşluk veya sabit boyutlu parçalarla birleştirilebilir. Sabit boyut öğesi içeren bir bileşene sahip olmak ve kalan alanı ikinci parçanın kaplaması için grid-template-columns: 200px 1fr parça listesi kullanabilirsiniz.

fr birimi için farklı değerler kullanmak, alanı orantılı olarak paylaşır. Daha büyük değerler, yedek alandan daha fazla yer kaplar. Aşağıdaki denemede üçüncü parçanın değerini değiştirin.

minmax() işlevi

Browser Support

• 57
• 16
• 52
• 10.1

Source

Bu işlev, bir parça için minimum ve maksimum boyut belirleyebileceğiniz anlamına gelir. Bu, oldukça yararlı olabilir. Kalan alanı dağıtan yukarıdaki fr birimini örnek alırsak bu birim, minmax(auto, 1fr) olarak minmax() kullanılarak yazılabilir. Izgara, içeriğin doğal boyutuna bakar ve içeriğe yeterli alan bıraktıktan sonra mevcut alanı dağıtır. Bu, her birinin ızgara kapsayıcısında bulunan tüm alandan eşit paya sahip parçalar elde edemeyeceğiniz anlamına gelir.

Bir kanalın, ızgara kapsayıcısındaki boşluklar hariç alandan eşit pay almasını sağlamak için minmax değerini kullanın. Parça boyutu olarak 1fr yerine minmax(0, 1fr) yazın. Bu durumda, minimum içerik boyutu değil, parçanın minimum boyutu 0 olur. Ardından ızgara, kapsayıcıdaki kullanılabilir boyutun tamamını alır, boşluklar için gereken boyutu çıkarır ve kalanı fr birimlerinize göre dağıtır.

repeat() gösterim

Browser Support

• 57
• 16
• 76
• 10.1

Source

Eşit sütunlara sahip 12 sütunlu bir parça ı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);
}

Alternatif olarak, repeat() kullanarak da yazabilirsiniz:

.container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
}

repeat() işlevi, parça listenizin 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 ve tekrarlanan bir bölüm de ekleyebilirsiniz.

.container {
    display: grid;
    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fill ve auto-fit

Parça boyutlandırma hakkında öğrendiklerinizi birleştirebilir,minmax() ve tekrarlayarakminmax() ızgara düzeninde kullanışlı bir desen oluşturabilirsiniz. Sütun parçası sayısını belirtmek yerine kapsayıcınıza sığacak kadar parça oluşturmak isteyebilirsiniz.

Bu işlemi repeat() ve auto-fill veya auto-fit anahtar kelimelerini kullanarak yapabilirsiniz. Aşağıdaki demoda ızgara, kapsayıcıya sığacak kadar 200 piksellik parça oluşturur. Demoyu yeni bir pencerede açın ve görüntü alanının boyutunu değiştirirken ızgaranın nasıl değiştiğini görün.

Demoda, sığabilecek kadar parça alırız. Ancak parçalar esnek değildir. 200 piksellik başka bir parça için yeterli alan kalana kadar sonunda boşluk olur. minmax() işlevini eklerseniz minimum 200 piksel ve maksimum 1fr boyutunda sığacak kadar parça isteyebilirsiniz. Ardından ızgara, 200 piksellik parçaları düzenler ve kalan alan 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 vardır. Bir sonraki denemede, yukarıda açıklanan söz dizimini kullanarak bir ızgara düzeni oluşturun ancak ızgara kapsayıcısında yalnızca iki ızgara öğesi kullanın. auto-fill anahtar kelimesini kullanarak boş parçaların oluşturulduğunu görebilirsiniz. Anahtar kelimeyi auto-fit olarak değiştirdiğinizde parçalar 0 boyutuna küçülür. Bu, esnek parçaların artık alanı kaplayacak şekilde büyüdüğü anlamına gelir.

auto-fill ve auto-fit anahtar kelimeleri, aksi takdirde tam olarak aynı şekilde çalışır. İlk kanal doldurulduktan sonra bu iki kanal arasında fark yoktur.

Otomatik yerleşim

Bugüne kadarki demolarda ızgara otomatik yerleşimini görmüştünüz. Öğeler, kaynakta göründükleri sırada hücre başına bir tane olacak şekilde tabloya yerleştirilir. Birçok düzen için bu yeterli olabilir. Daha fazla kontrole ihtiyacınız varsa yapabileceğiniz birkaç şey vardır. İlki, otomatik yerleşim düzenini değiştirmek.

Öğeleri sütunlara yerleştirme

Izgara düzeninin varsayılan davranışı, öğeleri satırlara yerleştirmektir. Bunun yerine grid-auto-flow: column kullanarak öğelerin sütunlara yerleştirilmesini sağlayabilirsiniz. Satır kanallarını tanımlamanız gerekir. Aksi takdirde öğeler, doğal sütun kanalları oluşturur ve tümünü tek bir uzun satırda düzenler.

Bu değerler, belgenin yazma moduyla ilgilidir. Satırlar, her zaman dokümanın veya bileşenin yazma modunda bir cümlenin ilerlediği yönde ilerler. Bir sonraki denemede grid-auto-flow ve writing-mode mülkünün değerini değiştirebilirsiniz.

Parçaları birleştirme

Otomatik olarak yerleştirilmiş bir düzendeki öğelerin bir kısmının veya tamamının birden fazla kanala yayılmasını sağlayabilirsiniz. grid-column-end veya grid-row-end için değer olarak span anahtar kelimesini ve kapsanacak 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'ün ilk değerini kullanır ve otomatik yerleşim kurallarına göre yerleştirilir. Aynı şeyi grid-column kısaltmasını kullanarak da belirtebilirsiniz:

.item {
    grid-column: auto / span 2;
}

Boşlukları doldurma

Bazı öğelerin birden fazla kanala yayıldığı otomatik olarak yerleştirilmiş bir düzen, bazı hücrelerin doldurulmadığı bir ızgarayla sonuçlanabilir. Tamamen otomatik olarak yerleştirilmiş bir düzene sahip ızgara düzeninin varsayılan davranışı her zaman ileriye doğru ilerlemektir. Öğeler, kaynaktaki sıraya veya order mülkünde yapılan herhangi bir değişikliğe göre yerleştirilir. Bir öğenin sığabileceği yeterli alan yoksa ızgara bir boşluk bırakır ve sonraki parçaya geçer.

Bu davranış, sonraki demoda gösterilmektedir. İşaretlendiğinde yoğun paketleme modu uygulanır. Bu, grid-auto-flow için dense değeri verilerek etkinleştirilir. Bu değer uygulandığında ızgara, düzenin sonraki öğelerini alarak boşlukları doldurur. Bu, ekranın mantıksal düzenden ayrıldığı anlamına gelebilir.

Öğeleri yerleştirme

CSS Grid'de zaten birçok işleviniz var. Şimdi, öğeleri oluşturduğumuz ızgara üzerinde nasıl konumlandıracağımıza bakalım.

CSS ızgara düzeninin, numaralı satırlardan oluşan bir ızgaraya dayandığını unutmayın. Öğeleri ızgaraya yerleştirmenin en kolay yolu, bunları bir satırdan diğerine yerleştirmektir. Bu kılavuzda öğe yerleştirmenin diğer yollarını 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

Hem başlangıç hem de bitiş satırlarını aynı anda ayarlamanıza olanak tanıyan kısayollara sahiptirler:

• 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 etmek için çizgilerle ilgili görsel bir kılavuz sağlayabilir.

Satır numaralandırması, bileşenin yazma modunu ve yönünü takip eder. Bir sonraki denemede, öğelerin yerleşiminin metnin akışıyla tutarlı kalmasını sağlamak için yazım modunu veya yönünü değiştirin.

Öğeleri birleştirme

Satır tabanlı yerleşimi kullanarak öğeleri ızgaranın aynı hücresine yerleştirebilirsiniz. Bu sayede öğeleri üst üste yığabilir veya bir öğenin diğerini kısmen örtüşmesine neden olabilirsiniz. Kaynakta daha sonra gelen öğeler, daha önce gelen öğelerin üzerinde gösterilir. Konumlandırılmış öğelerde olduğu gibi z-index kullanarak bu yığınlama sırasını değiştirebilirsiniz.

Negatif satır numaraları

grid-template-rows ve grid-template-columns kullanarak bir ızgara oluşturduğunuzda açık ızgara olarak bilinen bir ızgara oluşturursunuz. Bu, tanımladığınız ve kanallara boyut verdiğiniz bir kılavuz yoldur.

Bazen bu açık ızgaranın dışında görünen öğeleriniz olur. Örneğin, sütun kanallarını tanımlayabilir ve ardından satır kanallarını hiç tanımlamadan birkaç satır ızgara öğesi ekleyebilirsiniz. Parçalar varsayılan olarak otomatik olarak boyutlandırılır. Ayrıca, tanımlanmış açık ızgaranın dışında bir öğe yerleştirmek için grid-column-end kullanabilirsiniz. Bu iki durumda da ızgara, düzenin çalışmasını sağlamak için izler oluşturur. Bu izler örtülü ızgara olarak adlandırılır.

Çoğu zaman, örtük veya açık bir ızgarayla çalışıyor olmanız fark etmez. Ancak satır tabanlı yerleşimde, bu ikisi arasındaki temel farkla karşılaşabilirsiniz.

Negatif satır numaralarını kullanarak, açık grid'in bitiş satırından öğe yerleştirebilirsiniz. Bir öğenin ilk sütun satırından son sütun satırına kadar uzanmasını istiyorsanız bu seçenek yararlı olabilir. Bu durumda grid-column: 1 / -1 kullanabilirsiniz. Öğe, net ızgaranın tamamına yayılır.

Ancak bu yalnızca açık ızgara için geçerlidir. İlk öğenin ızgaranın son satırına kadar uzanmasını istediğiniz üç satır otomatik yerleştirilmiş öğe içeren bir düzen oluşturun.

Bu öğeyi grid-row: 1 / -1 olarak değerlendirebilirsiniz. Aşağıdaki demoda bunun işe yaramadığını görebilirsiniz. Parçalar örtülü ızgara içinde oluşturulur. -1 kullanarak ızgaranın sonuna ulaşmak mümkün değildir.

Örtük parçaların boyutunu ayarlama

Örtülü ızgarada oluşturulan parçalar varsayılan olarak otomatik olarak boyutlandırılır. Ancak satırların boyutunu kontrol etmek istiyorsanız grid-auto-rows mülkünü, sütunlar için ise grid-auto-columns mülkünü kullanın.

Tüm gizli satırları minimum 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 izler içeren bir kalıpla örtük sütunlar oluşturmak için. Bu durumda, ilk gizli sütun 100 piksel, ikinci sütun 200 piksel, üçüncü sütun 100 piksel olur.

.container {
    display: grid;
    grid-auto-columns: 100px 200px;
}

Adlandırılmış kılavuz çizgileri

Satırların numara yerine bir adı olması, öğeleri bir düzene yerleştirmeyi kolaylaştırabilir. E-tablonuzdaki herhangi bir satırı, istediğiniz adı köşeli parantez içine ekleyerek adlandırabilirsiniz. Aynı parantez içinde boşluklarla ayrılmış birden fazla ad eklenebilir. Satırları adlandırdıktan sonra, sayılar yerine bu adları kullanabilirsiniz.

.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, kılavuzun alanlarını adlandırabilir ve bu adlandırılmış alanlara öğe yerleştirebilirsiniz. Bu teknik, bileşeninizin CSS'de nasıl göründüğünü görmenize olanak tanıdığı için oldukça kullanışlıdır.

Başlamak için grid-area mülkünü 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;
}

Ad, auto ve span anahtar kelimeleri dışında istediğiniz herhangi bir şey olabilir. Tüm öğelerinize ad verdikten sonra, her bir öğenin hangi hücreleri kapsayacağını tanımlamak için grid-template-areas mülkünü kullanın. Her satır tırnak 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ırken uyulması gereken birkaç kural vardır.

• Değer, boş hücre içermeyen eksiksiz bir ızgara olmalıdır.
• Parçaları birbirine bağlamak için adı tekrarlayın.
• Adı tekrarlayarak oluşturulan alanlar dikdörtgen şeklinde olmalı ve bağlantıları kesilmiş olmamalıdır.

Yukarıdaki kurallardan herhangi birini ihlal ederseniz değer geçersiz olarak değerlendirilir ve atılır.

Izgarada boşluk bırakmak için . veya aralarında boşluk olmayan birden fazla . kullanın. Örneğin, ızgaradaki ilk hücreyi boş bırakmak için bir dizi . karakteri 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ını kullanarak düzeni yeniden tanımlamak kolaydır. Sonraki örnekte, grid-template-columns ve grid-template-areas değerlerini yeniden tanımlayarak üç sütuna geçen iki sütunlu bir düzen oluşturdum. Görüntü alanı boyutuyla oynamak ve düzen değişikliğini görmek için örneği yeni bir pencerede açın.

Diğer ızgara yöntemlerinde olduğu gibi, grid-template-areas mülkünün writing-mode ve yönle nasıl ilişkili olduğunu da görebilirsiniz.

Kısaltma özellikleri

Izgara özelliklerinin çoğunu tek seferde ayarlamanıza olanak tanıyan iki kısayol özelliği vardır. Bu özelliklerin tam olarak nasıl bir araya geldiğini anlayana kadar biraz kafa karıştırıcı görünebilirler. Bu kısaltmaları kullanmak isteyip istemediğiniz size bağlıdır.

grid-template

Browser Support

• 57
• 16
• 52
• 10.1

Source

grid-template özelliği, grid-template-rows, grid-template-columns ve grid-template-areas için kısa bir ifadedir. Önce satırlar, ardından grid-template-areas değeri tanımlanır. Sütun boyutlandırması, /'ten 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 mülkü

Browser Support

• 57
• 16
• 52
• 10.1

Source

grid kısayolu, grid-template kısayoluyla tam olarak aynı şekilde kullanılabilir. Bu şekilde kullanıldığında, kabul ettiği diğer ızgara özelliklerini ilk değerlerine sıfırlar. Tam set şu şekildedir:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

Alternatif olarak, gizli ızgaranın nasıl davranacağını tanımlamak için bu kısayolu kullanabilirsiniz. Örneğin:

.container {
    display: grid;
    grid: repeat(2, 80px) / auto-flow  120px;
}

Uyum

Grid düzeni, flexbox kılavuzunda öğrendiğiniz hizalama özelliklerini kullanır. justify- ile başlayan özellikler, ızgaralarda her zaman satır içi eksende (yazım modunuzda cümlelerin yazıldığı yön) kullanılır.

align- ile başlayan özellikler, yazma modunuzda blokların düzenlendiği yönde olan blok ekseninde kullanılır.

• justify-content ve align-content: tablo kapsayıcısında parçaların etrafında veya aralarında ek boşluk dağıtın.
• justify-self ve align-self: Bir ızgara öğesine uygulanarak öğenin yerleştirildiği ızgara alanında hareket etmesini sağlar.
• justify-items ve align-items: Öğelerdeki tüm justify-self özelliklerini ayarlamak için ızgara kapsayıcısına uygulanır.

Fazla alanı dağıtma

Bu demoda ızgara, sabit genişlikteki 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 yerimiz olduğu anlamına gelir. Parçaların nasıl davrandığını görmek için align-content ve justify-content için farklı değerler deneyin.

space-between gibi değerler kullanıldığında boşlukların nasıl daha büyük hale geldiğini ve iki kanalı kapsayan tüm ızgara öğelerinin, boşluğa eklenen ek alanı absorbe etmek için de 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 parçalarınız kapsayıcıyı düzgün bir şekilde dolduruyorsa paylaşılacak yer olmaz.

İçerik taşıma

Arka plan rengi olan öğeler, justify-self ve align-self için başlangıç değeri stretch olduğundan yerleştirildikleri ızgara alanını tamamen doldurur.

Not: Öğeniz bir resim veya doğal en boy oranına sahip başka bir şeyse öğelerin şeklinin bozulmasını önlemek için başlangıç değeri stretch yerine start olur.

Demoda, düzenin nasıl değiştiğini görmek için justify-items ve align-items değerlerini değiştirin. Izgara alanı boyut değiştirmiyor, bunun yerine öğeler tanımlanan alan içinde taşınıyor.

Öğrendiklerinizi test etme

Izgara hakkındaki bilginizi test edin

Aşağıdakilerden hangileri CSS ızgara terimleridir?

çizgiler

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

Çevreler

Maalesef CSS ızgaralarında daire kavramı yoktur.

hücreler

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

alanlar

Birden fazla hücreyi birlikte.

trenler

Maalesef CSS ızgarasına tren ekleme özelliği yok.

boşluklar

Hücreler arasındaki boşluk.

parçalar

Tek bir satır veya sütun, ızgaradaki bir kanaldır.

main {
  display: grid;
}

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

Satırlar

Herhangi bir sütun tanımlanmamışsa ızgara alt öğeleri normalde olduğu gibi blok yönünde düzenlenir.

Sütunlar

grid-auto-flow: column varsa ızgara sütunlar halinde düzenlenir.

auto-fit ile auto-fill arasındaki fark nedir?

auto-fit, hücreleri kapsayıcıya sığacak şekilde uzatır. auto-fill ise bunu yapmaz.

auto-fill, şablona uzatma olmadan mümkün olduğunca çok öğe yerleştirir. Fit, kullanıcıların fit olmalarını sağlar.

auto-fit, bir kapsayıcıyı çocuklara sığacak şekilde genişletir. auto-fill ise çocukları kapsayıcıya sığdırır.

Bu mülkler böyle davranmaz.

min-content nedir?

%0 ile aynı

%0, üst kutuya göre göreli bir değerdir. min-content ise kutudaki kelimelere ve resimlere göre göreli bir değerdir.

En küçük harf

En küçük harf olsa da min-content harflerle ilgili değildir.

En uzun kelime veya resim.

"CSS muhteşem" ifadesindeki muhteşem kelimesi min-content olur.

max-content nedir?

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

Bu, kutunun içeriğinin istediği veya belirttiği maksimum boyuttur. En geniş haldeki bir cümle veya resimdir.

En uzun mektup.

En uzun harf olsa da max-content harflerle ilgili değildir.

En uzun kelime.

En uzun kelime min-content.

Otomatik yerleşim nedir?

Izgara, alt öğeleri alıp tarayıcı sezgilerine 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 grid-area atandığında ve bu hücreye yerleştirildiğinde.

Bu, otomatik yerleşim değil, açık yerleşimdir.

Atanmamış ızgara öğeleri bir düzen şablonunda yan yana yerleştirildiğinde.

Belirli bir alanı olmayan ızgara öğeleri, kullanılabilir bir sonraki ızgara hücresine yerleştirilir.

Kaynaklar

Bu kılavuzda, ızgara düzeni spesifikasyonunun farklı bölümlerine genel bir bakış sunulmuştur. Daha fazla bilgi edinmek için aşağıdaki kaynaklara göz atın.

• MDN CSS Grid Layout
• Izgara ile İlgili Tam Rehber
• Gri kapsayıcı oluşturma
• Chrome Geliştirici Araçları'nda CSS ızgarasına bakma
• Gri öğrenme materyallerinin kapsamlı bir koleksiyonu