Kolayca karmaşık düzenler oluşturmak için CSS ızgaralarını nasıl kullanacağınızı öğrenin.

Karmaşık düzenlerle çalışırken öğeleri bir web sayfasında konumlandırmak çok karmaşık olabilir. CSS ızgarasının kullanışlı olduğu yer burasıdır. Karmaşık düzenler oluşturma sürecini basitleştirmek için tasarlanmış bir düzen sistemidir.

Size nasıl yardımcı oluyor? Öğeleri yalnızca satırlara veya sütunlara yerleştirmenize izin veren geleneksel yerleşim yöntemlerinden farklı olarak, CSS ızgarası size her iki dünyanın da en iyisini sunar; satırları ve sütunları kullanan 2 boyutlu bir yaklaşım.

Izgara Kapları ve Öğeleri

CSS ızgara özelliklerini iki ana öğe türüne uygulayabilirsiniz: üst ve alt öğeler. Bir üst öğe için display özelliğini "grid" olarak ayarladığınızda bu öğe, bir ızgara kabına dönüştürülür. Bu ızgara kapsayıcısındaki herhangi bir alt öğe, uygulanan ızgara özelliklerini devralan bir ızgara öğesi haline gelir.

İşte nasıl temsil edildiği:

Bir ızgara öğesi aynı zamanda bir ızgara kapsayıcısı da olabilir. Artık mizanpajı iç içe geçmiş bir ızgara (ızgara içinde ızgara) olarak adlandırabilirsiniz. Ana ızgara kabı artık dış ızgara olarak anılırken, öğeye dönüştürülen ızgara kabı bir iç ızgara haline gelir.

instagram viewer

Bu ızgaraların her biri diğerinden bağımsız olarak çalışır; bu, iç ızgara için ayarlanan özelliklerin dış ızgaranın düzenini etkilemediği ve bunun tersi anlamına gelir.

İşte neye benziyor:

Izgara kapları ve öğeler arasındaki ilişkiye hakim olmak, iki boyutlu düzenler oluşturma etkili bir şekilde.

Izgara kapsayıcıları için ızgara özelliklerinin bulunduğunu, diğerlerinin ise ızgara öğeleri için olduğunu unutmayın.

Izgara Çizgileri ve İzler

CSS ızgarasını kullanmaya başlamadan önce bilmeniz gereken iki temel terim vardır:

  1. Izgara çizgileri: Izgara çizgileri, bir CSS ızgara düzeninde ızgarayı oluşturan yatay ve dikey çizgileri ifade eder. Satır ve sütunların başlangıç ​​ve bitiş noktalarını belirleyerek işlerin ızgarada nereye gideceğini düzenlemeye yardımcı olurlar. Bu çizgiler kutuların kenarları gibidir; konumlandırma sırasında öğelere referans vermenize yardımcı olacak numaraları vardır. Burada kırmızı kesikli çizgi onları temsil ediyor:
  2. Izgara izleri: Satır ve sütunları tanımlayan ızgara çizgileri arasındaki boşluklardır. Izgara düzeninin yapı taşları gibidirler. Yukarıdaki görüntüde, her öğenin içindeki renkli alan ızgara yolunu temsil eder.

Izgara çizgilerini ve izlerini, grafik kağıdındaki çizgiler gibi ızgara düzeninin yapı taşları olarak düşünün. Yatay bir ızgara çizgisi dikey bir ızgara çizgisiyle kesiştiğinde kutu şeklinde bir hücre oluşturur. Bu hücreler ızgara öğelerinizi yerleştirebileceğiniz kaplar görevi görür.

CSS Izgara Kabı Özellikleri

Bunlar, düzeni düzenlemek ve içindeki öğeleri konumlandırmaya yardımcı olmak için ızgara kabına uygulayabileceğiniz özelliklerdir. Daha önce de belirttiğimiz gibi bunlardan biri grid olarak ayarlanmış display özelliğidir. İşte daha fazlası:

Izgara Şablonu

Bu özellik satır ve sütunların boyutunu tanımlar. Bu özellikleri pikselleri, yüzdeleri veya kesirli birimi (fr) kullanarak boyutlandırabilirsiniz. Ayrıca, gibi anahtar kelimeleri de kullanabilirsiniz. Oto, en az en çok(), Ve tekrarlamak() Esnekliği arttırmak için.

  • ızgara-şablon-satırları: Satır yüksekliğini ayarlar.
  • ızgara-şablon-sütunları: Sütun genişliklerini tanımlar.

İşte bazı örnekler:

Pikselleri Kullanma:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Yüzdeleri Kullanma:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

fr kullanma:

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

Auto ve minmax() Anahtar Kelimelerini Kullanma:

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Tutarlı Boyutlandırma için Repeat() işlevini kullanma:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Otomatik Yerleştirme ve Izgara Şablon Alanları

Otomatik Yerleştirme: Otomatik yerleştirme, ızgaranın öğeleri nereye koyacağına karar vermesine izin vermek gibidir. Tam konumları belirtmezseniz ızgara, öğeleri işaretlemede göründükleri sıraya göre otomatik olarak yerleştirir. Bu, çok sayıda öğeniz olduğunda ve bunların ızgarayı eşit şekilde doldurmasını istediğinizde faydalıdır.

Izgara Şablon Alanları: Izgara şablonu alanlarını, adlandırılmış bölgeleri kullanarak bir düzen oluşturmak olarak düşünün. Bu, kat planındaki odalara isim vermek gibi bir şey. Izgara öğelerini konumlandırırken bu alan adlarına başvurabilirsiniz. Örneğin:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Bu düzen, üç sütun ve dört satırdan oluşan bir ızgaraya benzer. Ana içerik alanı için iki satır vardır. Etiketli alanlar arasında "başlık", "kenar çubuğu", "içerik" ve "alt bilgi" bulunur. Sonraki bölümlerde, bu alan etiketlerini her ızgara öğesinin özelliklerinde nasıl kullanacağınızı öğreneceksiniz.

CSS Izgarasında Hizalama

Izgara öğelerinin ızgara hücreleri içindeki konumlarını kontrol etmek için hizalama özelliklerini kullanabilirsiniz. Özellikler şunlardır:

  • öğeleri yasla: Izgara hücreleri içindeki öğelerin yatay hizalamasını kontrol eder.
    • Değerler: başlangıç, bitiş, merkezleme ve uzatma.
  • öğeleri hizala: Izgara hücreleri içindeki öğelerin dikey hizalamasını kontrol eder.
    • Değerler: başlangıç, bitiş, merkezleme ve uzatma.
  • gerekçeli içerik: Kabın içindeki ızgaranın tamamını yatay eksen boyunca hizalar.
    • Değerler: başlangıç, bitiş, merkez, uzatma, aradaki boşluk, etrafındaki boşluk ve eşit boşluk.
  • içeriği hizala: Kabın içindeki ızgaranın tamamını dikey eksen boyunca hizalar.
    • Değerler: başlangıç, bitiş, merkez, uzatma, aradaki boşluk, etrafındaki boşluk ve eşit boşluk.

İşte bir örnek:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

Bu örnekte öğeler, hücreleri içinde hem yatay hem de dikey olarak ortalanacaktır. Alan, tüm ızgaranın sütunları arasında eşit olarak dağıtılacak ve ızgara, kabın içinde dikey olarak ortalanacaktır.

Izgara Boşluğu

Izgara boşluğu, ızgara düzeninde satırlar ve sütunlar arasındaki boşluğu ifade eder. Görsel ayrım oluşturmaya yardımcı olur ve ızgara öğeleri arasında biraz boşluk bırakır.

ızgara boşluğu özelliği, satırlar ve sütunlar arasındaki boşluğu ayarlamanıza olanak tanır. Bunu tanımlamak için piksel (px), yüzdeler (%), em birimleri (em) ve daha fazlası gibi çeşitli birimleri kullanabilirsiniz.

.grid-container {
grid-gap: 20px;
}

Bu örnekte, ızgara kapsayıcısında aralarında 20 piksel boşluk bulunan iki sütun bulunmaktadır. Bu aralık, sütunları görsel olarak ayırır ve düzeni geliştirir.

CSS Izgara Öğesi Özellikleri

Örneklerle birlikte, bir CSS ızgara düzeni içindeki tek tek ızgara öğelerinin davranışını kontrol eden bazı temel özellikler şunlardır:

ızgara-satır-başlangıç ​​ve ızgara-satır-son:

  • Bir öğenin başlangıç ​​ve bitiş satır satırlarını tanımlar.
  • Değerler satır numaraları, "span n" veya "auto" olabilir. 
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Bu kod yerleri Izgara Öğesi 1 ikinci sıra satırından dördüncü sıra çizgisine.

ızgara sütunu başlangıcı ve ızgara sütunu sonu:

  • Bir öğenin başlangıç ​​ve bitiş sütun satırlarını tanımlar.
  • Değerler satır numaraları, "span n" veya "auto" olabilir. 
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Bu kod yerleri Izgara Öğesi 2 birinci sütun satırından üçüncü sütun satırına.

ızgara alanı:

  • Adlandırılmış ızgara çizgilerine başvurarak ızgara içindeki bir ızgara öğesinin boyutunu ve konumunu belirtir. ızgara-şablon-alanları.
  • Daha önce de belirtildiği gibi, önceden tanımlanmış alan adları halihazırda kullanımdadır. ızgara-şablon-alanları mülk. İşte onunla birlikte nasıl kullanılacağına dair bir örnek ızgara alanı. 
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

İşte sonuç:

kendini haklı çıkarmak:

  • Tek tek öğeleri hücresinde yatay olarak hizalar.
  • Değerler başlangıç, bitiş, merkez ve uzatma olabilir. 
.grid-item-5 {
justify-self: center;
}

Bu kod yatay olarak ortalar Izgara Öğesi 5 hücresinin içinde.

kendini hizala:

  • Tek tek öğeleri hücresinde dikey olarak hizalayın.
  • Değerler başlangıç, bitiş, merkez ve uzatma olabilir. 
.grid-item-1 {
align-self: end;
}

Bu kod hizalanır Izgara Öğesi 1 hücresinin dibine kadar.

CSS Izgaranızdaki her bir ızgara öğesi için istediğiniz düzeni ve görünümü oluşturmak amacıyla bu özellikleri birleştirip özelleştirmekten çekinmeyin.

CSS Izgaralarını Kullanarak Duyarlı Düzenler Oluşturma

CSS ızgaralarını kullanma duyarlı düzenler oluşturma Web sayfanızın çeşitli ekran boyutlarına ve cihazlara sorunsuz bir şekilde uyum sağlamasını sağlamak önemlidir. Bu yöntemleri uygulayabilirsiniz:

  • Medya sorguları: Medya sorgularını kullanabilirsiniz ekran boyutlarına bağlı olarak farklı ızgara düzenleri uygulamak için. Örneğin, daha küçük ekranlar için ızgara öğelerini yeniden düzenlemeniz veya sütun genişliklerini ayarlamanız gerekebilir.
  • Esnek Birimler: Izgara öğelerinin ve sütunlarının mevcut alanla orantılı olarak ayarlanmasını sağlamak için yüzdeler ve fr gibi göreli birimleri kullanın.
  • en az en çok(): Kullan en az en çok() Izgara sütunları veya satırları için bir boyut aralığı belirtme işlevi. Öğelerin farklı ekranlarda çok küçük veya çok büyük görünmemesini sağlar.

Sütunları ve ızgara öğeleri arasındaki boşluklar, yazı tipi boyutları ve kenar boşlukları gibi diğer öğeleri ayarlamayı unutmayın. Çeşitli cihazlarda iyi çalışan tutarlı ve iyi tasarlanmış bir düzen sağlar.

CSS Izgara Düzeninin Olanaklarını Keşfedin

CSS ızgarasının esnekliğini ve gücünü benimsemek, yalnızca harika görünmekle kalmayıp aynı zamanda modern web tasarımının taleplerine sorunsuz bir şekilde uyum sağlayan düzenler oluşturmanıza da olanak tanır. Öyleyse ızgaraların dünyasına dalın, olasılıkları keşfedin ve web geliştirme becerilerinizi geliştirin.

Mizanpaj sistemlerini derinlemesine incelerken diğer mizanpaj yöntemlerini CSS ızgaralarıyla karşılaştırmak isteyebilirsiniz. Bunu CSS Flexbox modülüyle yapabilirsiniz. Bu, bir proje üzerinde çalışırken karar vermeyi öğrenmenize yardımcı olacaktır.