CSS Kolay Öğrenme | Web Tasarım, Kurumsal Kimlik, Logo Tasarımı, Katalog, Tuzla 
CSS Kolay Öğrenme

CSS Kolay Öğrenme


CSS Grid , CSS'de bulunan en güçlü düzen sistemidir. Satır ve sütunlara öğe yerleştirme özelliği ile, web'e iki boyutlu bir düzen aracı getiriyor. Modern web tasarımında ızgaraların önemi yüksektir, bu yeni spesifikasyon, tarayıcıdaki öğeleri belirlemekle ilgili çok eski zaman yaşanmış sorunları çözmektedir.

 

Başlamadan önce, bu öğreticinin çok kapsamlı olmayacağının farkında olun. Temelleri de ele alacağız. Daha fazla bilgi edinmek ve CSS Izgaralar ile daha derinleşmek istiyorsanız, Rachel Andrew  veya Mozilla Docs tarafından  bu müthiş web sitesini kontrol edin.

 

Tarayıcı Desteği

 

CSS Grid, Firefox'un en son sürümünde ve Chrome'un en yeni sürümünde yeni piyasaya çıktı. Internet Explorer 10 ve 11 de destekliyor ancak eski bir söz dizimi ile eski bir uygulama.

1
2
3
4
5
6
<div class="grid">
 <div class="grid__item">div>
 <div class="grid__item">div>
 <div class="grid__item">div>
 <div class="grid__item">div>
div>

 

Gride dönüştürmek istediğiniz containeri hedef alalım. Gerekli tüm özellikleri ekleyip her bir mülkün ne yaptığını açıklayacağız. Daha iyi bir anlayış için, her satırdaki kodun ne yaptığını gösteren resimlerle her şeyi temsil ediyor.

 

1
2
3
4
5
6
7
8
9
10
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
 
.grid__item {
  width: 100%;
  height: 200px;
  background: skyblue;
}

 

Ve bu iki satırlık koddan elde ettiğimiz şey:

Şimdi sıra ve sütun yapıları oluşturmak için iki farklı özellik kullanıyoruz.

Bunlardan birincisi şebeke şablonu sütunlarıdır . Burada elimizdeki mevcut değer bir şey ( px, rem, em ) için her şeydir CSS Grid'de, fr denilen yeni bir değer birim var Fr fraksiyonu, bir fr , serbest alanı kaplıyor, bizim durumumuzda dört boş alana sahip dört fr var.

Bunu yazmanın bir başka yolu da bir kısayol kullanmaktır.

 

1
grid-template-columns: repeat(4, 1fr);

Diğer mülk şebeke şablonu satırlarıdır . Grid'ı dört tane daha element edelim ve bu yeni CSS mülkünü ekleyin.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="grid">
 
 <div class="grid__item">div>
 <div class="grid__item">div>
 <div class="grid__item">div>
 <div class="grid__item">div>
 
 
 <div class="grid__item">div>
 <div class="grid__item">div>
 <div class="grid__item">div>
 <div class="grid__item">div>
div>
1
2
3
4
5
6
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  grid-gap: 1.5em;
}

Aralarındaki boşluk için, grid-gap adı verilen şeyi kullandık ; bu, sütunlar ve satırlar arasında bir boşluk oluşturan ve onları üniforma haline getiren kısaltılmış sürümüdür, ancak bunları ayrı ayrı kullanmak isterseniz grid-column-gap ve grid çizgisi  ile bu şekilde güzel bir yapı oluşturduk.
 
Codepad.co'daki canlı sürümü kontrol edin .
 
Boşluğun sütunun içinde olduğunu unutmayın; grid'in dış kısmında kenar boşluğu yaratmaz. İhtiyacınız olan alanı, bu grid dışında alabilirsin.
 
 
Sonuç
 
 
CSS Grid basit ve daha sürdürülebilir CSS kodunu yazarken düzen Spec, bize kolaylıkla karmaşık web tasarım düzenleri oluşturmak için olanak sağlar. Artık karmaşık düzenler oluştururken float veya benzeri özellikleri kullanmak zorunda değiliz. 
 YUKARI