Tablo

CSS Podcast'i - 011: Tablo 'nı inceleyin.

Web tasarımında gerçekten yaygın olarak kullanılan bir düzen üstbilgi, kenar çubuğu, gövde ve altbilgi düzenidir.

Yıllar içinde, bu düzeni çözmenin pek çok yöntemi oldu. CSS ızgarasında ise nispeten basit olmasının yanı sıra, ama birçok seçeneğiniz var. Izgara, kontrol ve kontrol tuşlarının birleştirilmesinde son derece yararlıdır. dışsal boyutlandırmanın içsel boyutlandırma esnekliğini sağladığını, Bu nedenle bu tür bir düzen için ideal. Bunun nedeni, ızgaranın iki boyutlu içerik için tasarlanmış bir düzen yöntemi olmasıdır. Yani, öğeleri aynı anda satırlar ve sütunlar halinde düzenleme.

Izgara düzeni oluştururken satır ve sütunlardan oluşan bir ızgara tanımlarsınız. Daha sonra öğeleri bu ızgaraya yerleştirirsiniz. veya tarayıcının bu hücreleri, oluşturduğunuz hücrelere otomatik olarak yerleştirmesine izin verin. Dilediğiniz her şey Ancak genel olarak nelerin izlendiğine dair ızgara düzenini hemen oluşturacaksınız.

Genel Bakış

Peki, ızgara özelliğiyle neler yapabilirsiniz? Izgara düzenleri aşağıdaki özelliklere sahiptir. Bu kılavuzda tüm bu etmenler hakkında bilgi edineceksiniz.

1. Bir ızgara, satır ve sütunlarla tanımlanabilir. Bu satır ve sütun kanallarının nasıl boyutlandırılacağını seçebilirsiniz veya içeriğin boyutuna tepki verebilirler.
2. Izgara kapsayıcısının doğrudan alt öğeleri bu ızgaraya otomatik olarak 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şluk, kanallar arasında dağıtılabilir.
6. Izgara öğeleri, kendi alanları içinde hizalanabilir.

Izgara terminolojisi

CSS ilk kez gerçek bir düzen sistemine sahip olduğu için ızgarada yeni terminoloji var.

Kılavuz çizgileri

Izgara çizgilerden oluşur, bir reklam grubudur. Izgaranızda dört sütun varsa son sütundan sonraki sütun dahil olmak üzere beş sütun satırı olur.

Satırlar 1'den başlayarak numaralandırılır. Bileşenin yazma moduna ve komut dosyası yönüne göre numaralandırmayla değiştirin. Bu, 1. sütun satırının İngilizce gibi soldan sağa bir dilde solda olacağı anlamına gelir. ve Arapça gibi sağdan sola okunan bir dilde sağlandığından emin olun.

Izgara yolları

Parkur, iki ızgara çizgisi arasındaki boşluktur. Satır kanalı, iki satır satırı ile iki sütun satırı arasında kalan bir sütun izidir. Izgaramızı oluşturduğumuzda, bu parçalara bir boyut atayarak oluştururuz.

Tablo hücresi

Izgara hücresi, satır ve sütun yollarının kesişimiyle tanımlanan bir ızgaradaki en küçük alandır. Bu tıpkı bir tablo hücresi veya e-tablodaki bir hücreye benzer. Bir ızgara tanımlar ve öğelerin hiçbirini yerleştirmezseniz tanımlanan her tablo hücresine otomatik olarak bir öğe yerleştirilir.

Izgara alanı

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

Boşluklar

Raylar arasındaki oluk veya ara sokak. Boyutlandırma amacıyla bunlar normal bir parça gibi işlev görür. İçeriği boşluk içine yerleştiremezsiniz ancak ızgara öğelerini ilgili boşluğa yerleştirebilirsiniz.

Izgara kapsayıcısı

display: grid uygulanmış HTML öğesi, Böylece 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 bir öğedir.

<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 bir ızgara tanımlayabilirsiniz. ve kanallar arasında 10 piksellik bir boşluk bırakın.

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

Terminoloji bölümünde açıklanan birçok şey bu çizelgede gösterilmektedir. Üç sütunlu kanal içerir. Her parça farklı bir uzunluk birimi kullanır. İki satırdan oluşur. diğerinde otomatik olarak yapılacak. "Otomatik" ayarı parça boyutu olarak kullanıldığında içerik kadar büyük olduğu düşünülebilir. Parçalar varsayılan olarak otomatik boyutlandırılır.

.container sınıfı olan öğenin alt öğeleri varsa çizelgeye hemen yerleştirilecektir. Bunun nasıl çalıştığını aşağıdaki demoda görebilirsiniz.

Chrome Geliştirici Araçları'ndaki ızgara yer paylaşımı, ızgaranın çeşitli bölümlerini anlamanıza yardımcı olabilir.

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

İçsel boyutlandırma anahtar kelimeleri

Şu bölümde açıklanan uzunluk ve yüzde boyutlarına ek olarak: boyutlandırma birimleri ızgara kanalı, doğal boyutlandırma anahtar kelimeleri kullanabilir. Bu anahtar kelimeler, Kutu Boyutları spesifikasyonunda tanımlanmıştır ve CSS'de kutuları boyutlandırmak için ek yöntemler ekleyin, zaman çizelgesine yer vermeyin.

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

min-content anahtar kelime, izleme içeriği taşmadan bir parçayı mümkün olduğunca küçük hale getirir. Örnek ızgara düzenini, tamamı min-content boyutunda üç sütun kanalı içerecek şekilde değiştirme kelime sayısı, parçadaki en uzun kelime kadar dar olacaktır.

max-content anahtar kelimesi tam tersi etkiye sahiptir. Parça, tüm içeriğin tek bir uzun ve bölünmemiş dizede gösterilmesine yetecek kadar geniş olur. Dize sarmalanacağından bu durum taşmalara neden olabilir.

fit-content() işlevi ilk başta max-content gibi çalışır. Bununla birlikte, parça işleve aktardığınız boyuta ulaştığında, içerik sarmalamaya başlar. Bu nedenle fit-content(10em), 10em'den kısa bir parça oluşturur. max-content boyutu 10em'den küçükse ancak hiçbir zaman 10 em'den büyük olmamalıdır.

Bir sonraki demoda ızgara yollarının boyutlarını değiştirerek farklı yerleşik boyutlandırma anahtar kelimelerini deneyin.

fr birimi

Mevcut uzunluk boyutlarımız, yüzdelerimiz ve ayrıca bu yeni anahtar kelimeler mevcuttur. Yalnızca ızgara düzeninde kullanılabilen özel bir boyutlandırma yöntemi de vardır. Bu, fr birimidir. ızgara kapsayıcısındaki kullanılabilir alanın payını tanımlayan esnek bir uzunluk.

fr birimi, flexbox'ta flex: auto kullanımına benzer şekilde çalışır. Bu öğ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;
}

Fra birimi kullanılabilir alanı paylaştıkça, Bu videolar sabit boyutlu boşluklarla veya sabit boyutlu parçalarla birleştirilebilir. Sabit boyutlu öğeye sahip bir bileşen ve kalan alanı kaplayan ikinci parça için grid-template-columns: 200px 1fr adlı parçayı parça listesi olarak kullanabilirsiniz.

fr birimi için farklı değerler kullanıldığında, alan orantılı olarak paylaşılır. Daha büyük değerler daha fazla boş alan sağlar. Aşağıdaki demoda üçüncü kanalın değerini değiştirin.

minmax() işlevi

Bu fonksiyon, bir parça için minimum ve maksimum boyut ayarlayabileceğiniz anlamına gelir. Bu çok yararlı olabilir. Yukarıdaki kalan alanı dağıtan fr birimi örneğini alırsak bu ifade minmax(auto, 1fr) tekniğiyle minmax(). Izgara, içeriğin esas boyutuna bakar. Ardından, içeriğe yeterli alan sağladıktan sonra kullanılabilir alanı dağıtır. Bu nedenle, her biri eşit oranda paylaşıma sahip olan parçaları alamayabilirsiniz mevcut alanı kapsıyor.

Bir kanalı, ızgara kapsayıcısındaki boşluktan boşluklar çıkarılarak eşit pay almaya zorlamak için minimum değer değerini kullanın. 1fr değerini, parça boyutu olarak 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 boyutların tamamını alır. ve tüm boşlukların tespit edilmesi için ve gerisini fr birimlerinize göre paylaşın.

repeat() gösterimi

Eşit sütunlara sahip 12 sütunlu bir kanal ızgarası oluşturmak isterseniz 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);
}

Ya da isterseniz repeat():

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

repeat() işlevi, parça girişinizin herhangi bir bölümünü tekrarlamak için kullanılabilir. Örneğin, parça kalıpları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

Parça boyutlandırmayla ilgili olarak öğrendiğiniz her şeyi, minmax() ve tekrarlayın, kullanarak yararlı bir desen oluşturabilirsiniz. Belki de sütun kanallarının sayısını belirtmek istemiyor, ancak bunun yerine, kapsayıcınıza sığacak kadar çok öğe oluşturmak istiyorsanız.

Bunu repeat() ve auto-fill veya auto-fit anahtar kelimeleriyle yapabilirsiniz. Aşağıdaki demoda, kapsayıcıya sığacak şekilde en fazla 200 piksellik kanal oluşturulur. 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 bulabiliyoruz. Ancak kanallar esnek değildir. En sonda 200 piksellik başka bir parça için yeterli alan olana kadar bir boşluk oluşur. minmax() işlevini eklerseniz en az 200 piksel ve en fazla 1fr boyutunda olacak şekilde, uygun sayıda parça isteyebilirsiniz. Izgara daha sonra 200 piksellik izleri yerleştirir ve kalan alan bunlara eşit olarak dağıtılır.

Bu sayede, medya sorgusuna gerek kalmadan iki boyutlu duyarlı bir düzen oluşturulur.

auto-fill ile auto-fit arasında küçük bir fark var. Bir sonraki demoda, yukarıda açıklanan söz dizimini kullanarak ızgara düzeniyle oynayabilirsiniz, ızgara kapsayıcıda yalnızca iki ızgara öğesi bulunur. 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 daraltılır. Yani esnek kanallar artık büyüyerek alanı kullanabiliyor.

Aksi takdirde auto-fill ve auto-fit anahtar kelimeleri tam olarak aynı şekilde davranır. İlk parça doldurulduktan sonra bunlar arasında fark yoktur.

Otomatik yerleştirme

Şimdiye kadar demolarda ızgara otomatik yerleşimini iş başında gördünüz. Öğeler, kaynakta göründükleri sırayla ızgaraya her hücre için bir tane olacak şekilde yerleştirilir. Birçok düzen için ihtiyacınız olan tek şey bu olabilir. Daha fazla kontrole ihtiyacınız varsa yapabileceğ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ışı, öğeleri satırlara yerleştirmektir. Bunun yerine, grid-auto-flow: column kullanarak öğelerin sütunlara yerleştirilmesine neden olabilirsiniz. Satır kanalları tanımlamanız gerekir. Aksi takdirde öğeler, dahili sütun kanalları oluşturur. uzun bir satır olacak şekilde düzenleyin.

Bu değerler dokümanın yazma moduyla ilgilidir. Satır her zaman bir cümlenin, dokümanın veya bileşenin yazma modunda çalıştığı yönde çalışır. Bir sonraki demoda modu grid-auto-flow değeri ile writing-mode özelliğini değiştirebilirsiniz.

Genişleme kanalları

Otomatik olarak yerleştirilen düzendeki öğelerin bazılarının veya tümünün birden fazla kanalı kaplamasına neden olabilirsiniz. grid-column-end veya grid-row-end için değer olarak kapsanacak satır sayısı ile birlikte span anahtar kelimesini kullanın.

.item {
    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}

Bir 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. Aynı şeyi grid-column kısaltmasını kullanarak da belirtebilirsiniz:

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

Boşlukları doldurma

Bazı öğelerin birden çok kanala yayılan otomatik olarak yerleştirildiği düzen bazı doldurulmamış hücrelerden oluşan bir ızgaraya neden olabilir. Tamamen otomatik olarak yerleştirilmiş düzenle varsayılan ızgara düzeni davranışı daima ileriye doğru ilerlemek. Öğeler kaynaktaki sıralarına göre yerleştirilir. veya order özelliğindeki herhangi bir değişiklik. Bir öğeyi sığdıracak kadar alan yoksa bir boşluk bırakır ve sonraki kanala geçer.

Bir sonraki demoda bu davranış gösterilmektedir. Onay kutusu, yoğun paketleme modunu uygular. Bu, grid-auto-flow için dense değeri sağlayarak etkinleştirilir. Bu değer uygulandıktan sonra, ızgara düzeninde öğeler düzenin ilerleyen bölümlerinde alınır ve boşlukları doldurmak için kullanılır. Bu durum, ekranın mantıksal sırayla bağlantısının kesileceği anlamına gelebilir.

Öğeleri yerleştirme

CSS ızgarasında zaten birçok işleviniz var. Şimdi, oluşturduğumuz ızgarada öğeleri nasıl konumlandırdığımıza bakalım.

Unutulmaması gereken ilk şey, CSS Izgara Düzeni'nin numaralı çizgilerden oluşan bir ızgaraya dayalı olduğudur. Öğeleri ızgaraya yerleştirmenin en basit yolu, öğeleri bir satırdan bir başkasına yerleştirmektir. Bu kılavuzdaki öğeleri yerleştirmenin diğer yollarını, 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

Bu kısayollar, aynı anda hem başlangıç hem de bitiş çizgilerini ayarlamanızı sağlayan kısaltmalar içerir:

• grid-column
• grid-row

Öğenizi yerleştirmek için yerleştirilmesi gereken ızgara alanının başlangıç ve bitiş satırlarını 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 hatlarla ilgili görsel bir kılavuz sağlayabilir.

Satır numaralandırması, yazma modunu ve bileşenin yönünü izler. Bir sonraki demoda yazma modunu veya yönünü değiştirin öğelerinin yerleşiminin metnin akışıyla nasıl tutarlı kaldığını görebilirsiniz.

Öğeleri yığma

Satır tabanlı konumlandırmayı kullanarak öğeleri aynı ızgara hücresine yerleştirebilirsiniz. Bu, öğeleri gruplandırabileceğiniz, bir öğenin diğeriyle kısmen çakışmasına neden olabilir. Kaynakta daha sonra gelen öğeler, daha önce gelen öğelerin üzerinde görüntülenir. Yığın oluşturma sırasını, konumlandırılmış öğelerde olduğu gibi z-index kullanarak değiştirebilirsiniz.

Negatif satır sayıları

grid-template-rows ve grid-template-columns kullanarak bir ızgara oluşturduğunuzda açık ızgara olarak bilinen bir öğe oluşturursunuz. Bu, tanımladığınız ve kanallara boyut atadığınız bir tablodur.

Bazen bu açık ızgaranın dışında görünen öğeleriniz olabilir. Örneğin, sütun kanalları tanımlayabilir ve ardından satır kanalları tanımlamadan çok sayıda ızgara öğesi satırı ekleyebilirsiniz. Parçalar varsayılan olarak otomatik boyutlandırılır. Tanımlanan açık ızgaranın dışındaki grid-column-end kullanarak da öğe yerleştirebilirsiniz. Her iki durumda da ızgara, düzenin çalışması için kanallar oluşturur. ve bu yollar dolaylı tablo olarak adlandırılır.

Kapalı veya açık bir tabloyla çalışıyorsanız bunlar çoğu zaman herhangi bir fark yaratmaz. Ancak, satıra dayalı yerleşimde ikisi arasındaki temel farkla karşılaşabilirsiniz.

Negatif satır sayıları kullanarak, açık ızgaranın son satırına öğeler yerleştirebilirsiniz. Bu, bir öğenin ilk sütun satırından son sütun satırına kadar yayılmasını istiyorsanız yararlı olabilir. Bu durumda, grid-column: 1 / -1 kullanabilirsiniz. Öğe, açık tablo boyunca uzanır.

Bununla birlikte, bu yalnızca açık ızgarada işe yarar. Otomatik olarak yerleştirilmiş üç satırlık bir düzen alın ilk öğenin ızgaranın son satırına kadar uzanmasını istediğiniz yere.

Bu öğeyi grid-row: 1 / -1 verebileceğini düşünebilirsiniz. Aşağıdaki demoda bunun çalışmadığını görebilirsiniz. İzler, örtülü ızgarada oluşturulur. -1 kullanarak ızgaranın sonuna ulaşmanın bir yolu yoktur.

Örtülü parçaları boyutlandırma

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

Minimum 10em ve maksimum auto boyutunda tüm örtülü satırları oluşturmak için:

.container {
    display: grid;
    grid-auto-rows: minmax(10em, auto);
}

100 ve 200 piksel genişliğinde kanallar desenine sahip örtülü sütunlar oluşturmak için. Bu örnekte, ilk örtülü sütun 100 piksel olacaktır. ikinci 200 piksel ise üçüncü 100 piksel vb.

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

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

Satırlar sayı yerine ada sahipse öğeleri bir düzene yerleştirmek daha kolay olabilir. Köşeli parantezler arasından seçtiğiniz bir adı ekleyerek ızgaranızdaki herhangi bir satırı adlandırabilirsiniz. Birden çok ad eklenebilir bir boşlukla ayırın. Adlandırdıktan sonra sayıların yerine bu satırlar 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 Şablon Alanları

Izgaranın alanlarını adlandırabilir ve bu adlandırılmış alanlara öğe yerleştirebilirsiniz. Bu, bileşeninizin CSS'de nasıl göründüğünü görmenizi sağladığı için harika bir tekniktir.

Başlamak için ızgara kapsayıcınızın doğrudan alt öğelerine grid-area mülkü:

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 öğeleriniz adlandırıldıktan sonra her bir arama terimi 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 tablo olmalıdır.
• Parçaları yaymak için adı tekrarlayın.
• Ad tekrarlanarak oluşturulan alanlar dikdörtgen olmalıdır ve bağlantıları 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 bırakmadan . veya katlar kullanın. Örneğin, ızgaradaki ilk hücreyi boş bırakmak için . karakterden oluşan bir seri 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ımlamayı kolaylaştırır. Bir sonraki örnekte iki sütunlu bir düzen oluşturdum. Bu düzen, üç sütuna grid-template-columns ve grid-template-areas değerini yeniden tanımlayarak. 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, grid-template-areas özelliğinin writing-mode ve yön ile ilişkisini görebilirsiniz. diğer ızgara yöntemlerinde olduğu gibi.

Steno özellikleri

Izgara özelliklerinin çoğunu tek seferde ayarlamanıza olanak tanıyan iki kısa özellik vardır. Bunlar, tam olarak nasıl bir araya geldiklerini açıklayana kadar biraz kafa karıştırıcı görünebilir. Bunları mı yoksa uzun e-posta yöntemini mi tercih edeceğiniz size kalmış.

grid-template

grid-template özelliği grid-template-rows, grid-template-columns ve grid-template-areas için kullanılan bir kısaltmadır. Önce satırlar tanımlanır, ve grid-template-areas değeriyle birlikte kullanılı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 mülkü

grid kısaltmalar, grid-template ile tamamen aynı şekilde kullanılabilir. Bu şekilde kullanıldığında, kabul ettiği diğer ızgara özelliklerini başlangıç değerlerine sıfırlar. Tam set:

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

Örtülü çizelgenin nasıl davranacağını belirlemek için bu kısaltmayı da kullanabilirsiniz. örneğin:

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

Uyum

Izgara düzeni, aşağıdaki kılavuzda öğrendiğiniz hizalama özelliklerini kullanır ve flexbox. Izgarada, justify- ile başlayan özellikler satır içi eksende her zaman kullanılır. cümlelerin çalışma yönünü değiştirir.

align- ile başlayan özellikler blok ekseninde kullanılır, blokların yerleştirildiği yönü izleyin.

• justify-content ve align-content: ızgara kapsayıcısında parçaların etrafına veya aralarında ek boşluk bırakın.
• justify-self ve align-self: içinde bulunduğu ızgara alanı içinde taşımak için bir ızgara öğesine uygulanır.
• justify-items ve align-items: ifadeleri, öğelerdeki tüm justify-self özelliklerini ayarlamak için ızgara kapsayıcısına uygulanır.

Fazladan alan dağıtılıyor

Bu demoda ızgara, sabit genişlikli yolların yerleştirilmesi 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, Ayrıca, iki kanalı kapsayan herhangi bir ızgara öğesi de boşluğa eklenen ek alanı kaplayacak şekilde büyür.

İçeriği taşıma

Arka planı renkli öğeler, yerleştirildikleri ızgara alanını tamamen dolduruyor. çünkü justify-self ve align-self için ilk değer stretch.

Bunun düzeni nasıl değiştirdiğini görmek için demoda justify-items ve align-items değerlerini değiştirin. Izgara alanı boyutu değişmiyor, öğeler, tanımlanan alan içinde hareket ettiriliyor.

Öğrendiklerinizi sınayın

Şebeke bilginizi test edin

main {
  display: grid;
}

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 Bir Izgara Kılavuzu
• Izgara Kapsayıcısı Oluşturma
• Chrome Geliştirici Araçları'nda CSS tablosunu inceleme
• Kapsamlı bir ızgara öğrenme materyali koleksiyonu