CSS Grid ızgarası nasıl kurulur
Her şeyin başladığı üç satır
display: grid ızgarayı açar, grid-template-columns sütunları, grid-template-rows satırları tanımlar. Sonra içerideki öğeler hücrelere kendileri, birbiri ardına, soldan sağa yerleşir. Alt öğelere ek bir şey yazmak gerekmez.
1fr bir genişlik değil, bir paydır
1fr "boş yerin bir payı" demektir. 1fr'lik üç sütun kapsayıcıyı üç eşit parçaya böler, boşluklar ise bu yerden önceden düşülür – bu yüzden ızgara, yüzdeli düzenin aksine kenardan taşmaz.
repeat() yalnızca yazımı kısaltır
repeat(3, 1fr), 1fr 1fr 1fr ile aynıdır. Yararı, sütunların on iki olduğu ya da sayı yerine bir anahtar kelimenin durduğu yerde başlar.
auto-fit ve auto-fill
İkisi de tarayıcıya "sütunları kapsayıcının genişliğine göre kendin say" der. minmax(240px, 1fr) ile birlikte bu, tek bir medya sorgusu olmadan duyarlı bir ızgara verir: sütun hiçbir zaman 240 pikselden dar olmaz, kaç tane olacağına ise genişlik karar verir.
Aralarındaki fark tek. Sütunlar tüm satırı doldurmaya yetmediğinde auto-fit mevcut olanları tüm alana uzatır, auto-fill ise boş izler bırakır ve sütunlar dar kalır. Kartlar için genellikle auto-fit seçilir.
gap satırlardan başlayarak okunur
gap: 16px 24px, tam bu sırayla, satırlar arasında 16 ve sütunlar arasında 24 demektir. Sayılar aynıysa tek sayı yazılır. Izgaranın dış kenarlarında hiçbir zaman boşluk olmaz.
CSS Grid hakkında sık sorulan sorular
Grid mi, Flexbox mu?
Grid – düzeni aynı anda iki yönde tanımladığınızda: satırlar ve sütunlar. Flexbox – öğeler tek satırda ya da tek sütunda durup yeri kendileri paylaşmalı olduğunda. Kart galerisi – grid, buton şeridi – flex.
Kaç satır tanımlamak gerekir?
Genellikle hiç. Öğeler hücrelerden fazlaysa tarayıcı satırları kendisi ekler. grid-template-rows, satırlara yükseklik vermek gerektiğinde gerekir.
Sütunlar neden kapsayıcıdan taşıyor?
En sık neden, küçülmeyen uzun bir metin ya da resimdir. 1fr "en az içerik kadar" demektir, bu yüzden geniş içerik sütunu genişletir. 1fr yerine minmax(0, 1fr) işe yarar.
Medya sorgularına gerek var mı?
Kart ızgarası için hayır. repeat(auto-fit, minmax(240px, 1fr)) sütunları her genişlik için zaten yeniden düzenler. Medya sorgusu, mobilde yalnızca daha az sütun değil, başka bir düzen gerektiğinde kalır.
Bir kart iki sütunu nasıl kaplar?
Ona grid-column: span 2 ekleyin. Izgara bunu hesaba katar, diğer kartlar kendiliğinden yeniden dizilir. Bu sayfa kapsayıcıyı oluşturur; tek tek hücrelerin kuralları elle eklenir.