CSS Grid, web tasarımında iki boyutlu düzenler oluşturmak için kullanılan bir CSS teknolojisidir. Satır ve sütunlar oluşturarak içerikleri ızgara formunda düzenlemenize olanak tanır. display: grid; özelliği ile bir konteyneri Grid konteyneri yapabilir, grid-template-columns ve grid-template-rows ile sütun ve satır boyutlarını tanımlayabilirsiniz. grid-gap ile öğeler arasındaki boşluğu ayarlayabilirsiniz. grid-column ve grid-row özellikleri ile öğelerin yerleşimini kontrol edebilirsiniz. CSS Grid, responsive tasarımlar için güçlü ve esnek bir çözümdür.

grid-column CSS özelliği, bir öğenin CSS Grid içindeki sütun konumunu ve genişliğini belirlemek için kullanılır. grid-column-start ve grid-column-end değerlerini tek bir bildirimde birleştirir, öğenin hangi sütundan başlayıp hangi sütunda biteceğini tanımlar. Örneğin, grid-column: 1 / 3; ifadesi, bir öğenin ilk sütundan başlayıp üçüncü sütuna kadar (üçüncü sütun dahil olmadan) uzanacağını belirtir. Bu özellik, ızgara içinde öğelerin yerleşimini hassas bir şekilde kontrol etmek için kullanılır.

grid-auto-flow CSS özelliği, CSS Grid içinde öğelerin otomatik olarak yerleştirilme şeklini kontrol eder. Bu özellik, grid konteyner içinde açıkça konumlandırılmamış öğelerin, satır mı yoksa sütun bazında mı doldurulacağını belirler. Değerler arasında row (varsayılan), column, row dense, ve column dense bulunur. dense değerleri, boşlukları doldurmak için öğelerin sıkıştırılmasına izin vererek, öğelerin daha yoğun bir şekilde yerleştirilmesini sağlar. Bu özellik, özellikle dinamik içeriklerle çalışırken, ızgaranın esnek ve etkili bir şekilde doldurulmasına yardımcı olur.

grid-auto-columns CSS özelliği, CSS Grid içinde açıkça boyutlandırılmamış sütunların genişliğini belirler. Bu özellik, ızgaraya dinamik olarak eklenen öğeler için varsayılan sütun genişliğini tanımlar. Özellikle, ızgaranın yapılandırması sırasında tüm sütunların boyutları belirtilmemişse veya ızgaraya öğeler programatik olarak eklendiğinde kullanışlıdır. Örneğin, grid-auto-columns: 100px; tüm otomatik sütunların genişliğini 100 piksel olarak ayarlar.

grid-auto-rows CSS özelliği, CSS Grid içinde açıkça boyutlandırılmamış satırların yüksekliğini belirler. Bu, özellikle ızgaraya dinamik içerik eklediğinizde veya ızgara öğelerinin boyutlarını önceden belirlemediğiniz durumlarda kullanışlıdır. grid-auto-rows: 50px; gibi bir tanımlama ile, tüm otomatik satırların yüksekliği 50 piksel olarak ayarlanır. Bu, ızgarada yeni öğeler eklendiğinde, bu öğeler için varsayılan satır yüksekliğini belirlemenize olanak tanır.

1fr bir CSS Grid birimidir ve "fr" bir kısaltma olarak "fraction" (fraksiyon) anlamına gelir. Bu birim, mevcut alanın bir fraksiyonunu temsil eder. 1fr kullanıldığında, bir sütun veya satır mevcut alanın eşit bir fraksiyonunu kaplar. Eğer birden fazla sütun veya satır fr birimi ile tanımlanırsa, mevcut alan bu sütunlar veya satırlar arasında orantılı olarak bölünür. Bu, esnek ve duyarlı layoutlar oluştururken oldukça kullanışlıdır.

TailwindCSS:

Grid Template Columns:

Grid Template Rows

Grid Column Start / End:

Grid Row Start / End:

Grid Auto Flow:

Grid Auto Columns:

<div class="grid grid-flow-col auto-cols-max">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Grid Auto Rows:

<div class="grid grid-flow-row auto-rows-max">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>