5 dakikada CSS Grid'i öğrenin - Yeni başlayanlar için bir eğitim

Izgara düzenleri, web sitelerinin tasarımı için temeldir ve CSS Izgara modülü, onu oluşturmak için en güçlü ve en kolay araçtır. Ben şahsen bunun örneğin Bootstrap'ten çok daha iyi olduğunu düşünüyorum (nedenini burada okuyun).

Modül ayrıca büyük tarayıcılar (Safari, Chrome, Firefox, Edge) tarafından yerel destek aldı, bu yüzden tüm ön uç geliştiricilerin bu teknolojiyi çok da uzak olmayan bir gelecekte öğrenmesi gerekeceğine inanıyorum .

Bu makalede, size CSS Izgarasının temellerini olabildiğince hızlı bir şekilde anlatacağım. Temelleri anlayana kadar önemsememeniz gereken her şeyi dışarıda bırakacağım.

Ayrıca ücretsiz bir CSS Grid kursu oluşturdum. Tam erişim için burayı tıklayın

o.

Alternatif olarak, kurs boyunca neler öğreneceğinizi açıklayan bu makaleye göz atın:

Şimdi içine atlayalım!

İlk ızgara düzeniniz

Bir CSS Izgarasının iki temel bileşeni sarmalayıcı (ana) ve

öğeler (çocuklar). Sarmalayıcı gerçek ızgaradır ve öğeler ızgaranın içindeki içeriktir.

İşte içinde altı öğe bulunan bir sarmalayıcının işaretlemesi:

 1 2 3 4 5 6 

Sarıcımızı divbir ızgaraya dönüştürmek için , ona basitçe

grid:

Ancak, ızgaramızın nasıl görünmesini istediğimizi tanımlamadığımız için bu henüz bir şey yapmıyor. Basitçe 6 div'süst üste istiflenir .

Biraz stil ekledim, ancak bunun CSS ızgarasıyla ilgisi yok.

Sütunlar ve satırlar

Bunu iki boyutlu yapmak için sütunları ve satırları tanımlamamız gerekecek. 3 sütun ve iki satır oluşturalım. grid-template-rowVe grid-template-columnözelliklerini kullanacağız .

İçin üç değer yazdığımız gibi grid-template-columns, üç sütun alacağız. İçin iki değer belirlediğimiz için iki satır alacağız grid-template-rows.

Değerler, sütunlarımızın ne kadar geniş olmasını (100px) ve satırlarımızın ne kadar uzun olmasını (50px) istediğimizi belirler. İşte sonuç:

Değerler ve ızgaranın nasıl göründüğü arasındaki ilişkiyi doğru bir şekilde anladığınızdan emin olmak için bu örneğe de bir göz atın.

.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 50px 50px; } 

Kod ile düzen arasındaki bağlantıyı kavramaya çalışın.

İşte nasıl oynanır:

Öğelerin yerleştirilmesi

Öğrenmeniz gereken bir sonraki şey, öğeleri ızgaraya nasıl yerleştireceğinizdir. Düzen oluşturmayı son derece basit hale getirdiği için süper güçler elde ettiğiniz yer burasıdır.

Öncekiyle aynı işaretlemeyi kullanarak bir 3x3 ızgara oluşturalım.

.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } 

Bu, aşağıdaki düzen ile sonuçlanacaktır:

Dikkat edin, biz onu 3x3 ızgara olarak tanımlarken sayfada sadece 3x2 ızgara görüyoruz. Bunun nedeni, ızgarayı dolduracak yalnızca altı öğemizin olmasıdır. Üç tane daha olsaydı, o zaman en alttaki sıra da doldurulurdu.

Öğeleri konumlandırmak ve yeniden boyutlandırmak için onları hedefleyeceğiz ve grid-columnve grid-rowözelliklerini kullanacağız :

.item1 { grid-column-start: 1; grid-column-end: 4; } 

Burada söylediğimiz şey, öğe1'in ilk ızgara çizgisinde başlamasını ve dördüncü sütun çizgisinde bitmesini istediğimizdir. Başka bir deyişle, tüm satırı kaplayacaktır.

İşte bunun ekranda nasıl oynanacağı:

Sadece 3 sütunumuz varken neden 4 sütun satırımız olduğu konusunda kafanız karıştı mı? Siyah sütun çizgilerini çizdiğim bu resme bir bakın:

Notice that we’re now using all the rows in the grid. When we made the first item take up the entire first row, it pushed the rest of the items down.

Finally, I’d like to show a simpler way of writing the syntax above:

To make sure you’ve understood this concept properly, let’s rearrange the items a little bit.

.item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } 

Here’s how that looks on the page. Try to wrap your head around why it looks like it does. It shouldn’t be too hard.

And that was it!

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.