5 Dakikada CSS Grid Öğrenin!

CSS Grid Nedir ve Nasıl Kullanılır?

CSS Grid(Izgara Düzeni), web siteniz için düzenler oluşturmaya yardımcı olmak için özel olarak tasarlanmış iki boyutlu ızgara tabanlı bir düzen sistemidir. CSS Izgarası karmaşıktır ve öğrenilecek çok şey vardır. Ancak iyi haber şu ki, her şeyi bir anda bilmenize gerek yok.

CSS Grid, özellikle yerleşim problemlerini çözmek için oluşturulmuş ilk CSS Modülüdür.

Terminoloji

• Container – Satırlar ve sütunlar kullanılarak hücrelere ayrılan ana blok ;
• Line – Kenarlar arası satır ve sütun ;
• Item – Bir veya daha fazla hücrenin yer aldığı alt öğe ;
• Area – hücreleri kapsayan bir ada sahip öğe ;

Grid Şablon Türleri

Grid şablonunu tanımlarken iki yaklaşım kullanabilirsiniz:

1. Satırlara ve sütunlara dayalı olarak: Bir kapsayıcıda satır ve sütun şablonunu tanımlayın ve ardından öğedeki konumu ayarlayın . Tablo, kalıcı pencereler gibi küçük bileşenler için en iyisi;
2. Izgara alanına göre: Öğelerin her birini adlandırın ve ardından konumu ayarlamak için bir containerdeki öğe adlarına bakın . Üstbilgi, menü, altbilgi dahil olmak üzere bir sayfanın ana yapısını tanımlamak için en iyisi;

Bu türleri sonraki paragraflarda daha ayrıntılı olarak inceleyeceğiz

Örnekler

Satırlara ve sütunlara dayalı Izgara Şablonu:

See the Pen CSS Grid by Webolog (@webolog) on CodePen.0

Izgara alanına dayalı Izgara Şablonu:

See the Pen CSS Grid 2 by Webolog (@webolog) on CodePen.0

Grid Container

Izgara işaretlemesini tanımlayan bir üst div öğesidir .

.container {
  display: grid;
}

Daha sonra , her satırın ve sütunun boyutunu tanımlayarak ızgarayı hücrelere ayırmanız gerekir .

.container {
  display: grid;
  grid-template-columns: 1fr 2fr repeat(2, 70px);
  grid-template-rows: 30% auto minmax(40px, 100px);
}

CSS Grid Terimleri ve Anlamları

• fr — kalan alanın bir kesridir (oran);
• repeat(<times>, <unit>) —  boşluğu kaç defa tekrar eder;
• percentage — tüm kullanılabilir alanın yüzdesini alır (satır veya sütunun toplam alanı);
• auto — kalan tüm alanı kaplar;
• minmax(<min>, <max>) — boşluk almanın minimum ve maksimum sınırlarını tanımlar;

Line

Hücrelerin her biri arasındaki ayrım . Yatay ve dikey çizgiler, container’ı ızgaraya böler .

Dikey çizgiler:

Not: Satır sayısı dizin 1’den başlar , yani 4 sütununuz varsa toplamda 5 dikey satır olacaktır. 

Yatay çizgiler:

 Not: Satır dizini, öğe öğesini hücreler üzerinde konumlandırmak için kullanılır .

Kullanımı  column-gap: ve row-gap:, yada sadece gap:<col> <row> şeklinde ,çizginin kalınlığını belirlemek için:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr repeat(2, 70px);
  grid-template-rows: 30% auto;
  gap: 10px; /* OR  gap: 10px 10px; */
}

Item

Şimdi, üst container tarafından tanımlanan ızgara işaretlememiz olduğunda , bir veya daha fazla hücrenin alanını alacak olan alt öğeyi – öğeyi yerleştirmenin zamanı gelmiştir :

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

Burada hangi hücreleri işgal etmek istediğimizi tanımladık . Satır indeksinin her zaman 1 ile başladığını unutmayın .

grid-column/row: <line index> / <number of cells to occupy>.

Area

 yalnızca adlandırılmış bir öğedir . Bu adı , ana kapsayıcıdaki hücreler üzerinde öğe konumunu açıkça tanımlamak için kullanırız .

İlk olarak, birkaç öğe oluşturalım ve onlara ad verelim:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: footer; }

Ve şimdi, tüm düzeni tanımlamak için bir containerdaki isimleri kullanabiliriz :

.container { 
  display: grid;
  grid-template-areas:
    'header header header header'
    'menu main . .'
    'menu footer footer footer';
  gap: 10px;
}

 Not:  . (nokta) öğesini bir adla karşılık gelen öğeye sahip olmayan hücreyi tanımlamak için .

Konu hakkında daha detaylı ve tam bir kılavuz için buradaki adresi ziyaret edebilirsiniz!