Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS Grid ve TailwindCSS Sınıf Karşılıkları


Doğuhan ELMA

49 views

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:

 

Class
Properties
grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3 grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4 grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5 grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6 grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7 grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8 grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9 grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10 grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11 grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12 grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-none grid-template-columns: none;
grid-cols-subgrid grid-template-columns: subgrid;

 

1.png

 

Grid Template Rows

Class
Properties
grid-rows-1 grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2 grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3 grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4 grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5 grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6 grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-7 grid-template-rows: repeat(7, minmax(0, 1fr));
grid-rows-8 grid-template-rows: repeat(8, minmax(0, 1fr));
grid-rows-9 grid-template-rows: repeat(9, minmax(0, 1fr));
grid-rows-10 grid-template-rows: repeat(10, minmax(0, 1fr));
grid-rows-11 grid-template-rows: repeat(11, minmax(0, 1fr));
grid-rows-12 grid-template-rows: repeat(12, minmax(0, 1fr));
grid-rows-none grid-template-rows: none;
grid-rows-subgrid grid-template-rows: subgrid;

 

1.png

 

 

Grid Column Start / End:

 

Class
Properties
col-auto grid-column: auto;
col-span-1 grid-column: span 1 / span 1;
col-span-2 grid-column: span 2 / span 2;
col-span-3 grid-column: span 3 / span 3;
col-span-4 grid-column: span 4 / span 4;
col-span-5 grid-column: span 5 / span 5;
col-span-6 grid-column: span 6 / span 6;
col-span-7 grid-column: span 7 / span 7;
col-span-8 grid-column: span 8 / span 8;
col-span-9 grid-column: span 9 / span 9;
col-span-10 grid-column: span 10 / span 10;
col-span-11 grid-column: span 11 / span 11;
col-span-12 grid-column: span 12 / span 12;
col-span-full grid-column: 1 / -1;
col-start-1 grid-column-start: 1;
col-start-2 grid-column-start: 2;
col-start-3 grid-column-start: 3;
col-start-4 grid-column-start: 4;
col-start-5 grid-column-start: 5;
col-start-6 grid-column-start: 6;
col-start-7 grid-column-start: 7;
col-start-8 grid-column-start: 8;
col-start-9 grid-column-start: 9;
col-start-10 grid-column-start: 10;
col-start-11 grid-column-start: 11;
col-start-12 grid-column-start: 12;
col-start-13 grid-column-start: 13;
col-start-auto grid-column-start: auto;
col-end-1 grid-column-end: 1;
col-end-2 grid-column-end: 2;
col-end-3 grid-column-end: 3;
col-end-4 grid-column-end: 4;
col-end-5 grid-column-end: 5;
col-end-6 grid-column-end: 6;
col-end-7 grid-column-end: 7;
col-end-8 grid-column-end: 8;
col-end-9 grid-column-end: 9;
col-end-10 grid-column-end: 10;
col-end-11 grid-column-end: 11;
col-end-12 grid-column-end: 12;
col-end-13 grid-column-end: 13;
col-end-auto grid-column-end: auto;

 

1.png

1.png

 

Grid Row Start / End:

Class
Properties
row-auto grid-row: auto;
row-span-1 grid-row: span 1 / span 1;
row-span-2 grid-row: span 2 / span 2;
row-span-3 grid-row: span 3 / span 3;
row-span-4 grid-row: span 4 / span 4;
row-span-5 grid-row: span 5 / span 5;
row-span-6 grid-row: span 6 / span 6;
row-span-7 grid-row: span 7 / span 7;
row-span-8 grid-row: span 8 / span 8;
row-span-9 grid-row: span 9 / span 9;
row-span-10 grid-row: span 10 / span 10;
row-span-11 grid-row: span 11 / span 11;
row-span-12 grid-row: span 12 / span 12;
row-span-full grid-row: 1 / -1;
row-start-1 grid-row-start: 1;
row-start-2 grid-row-start: 2;
row-start-3 grid-row-start: 3;
row-start-4 grid-row-start: 4;
row-start-5 grid-row-start: 5;
row-start-6 grid-row-start: 6;
row-start-7 grid-row-start: 7;
row-start-8 grid-row-start: 8;
row-start-9 grid-row-start: 9;
row-start-10 grid-row-start: 10;
row-start-11 grid-row-start: 11;
row-start-12 grid-row-start: 12;
row-start-13 grid-row-start: 13;
row-start-auto grid-row-start: auto;
row-end-1 grid-row-end: 1;
row-end-2 grid-row-end: 2;
row-end-3 grid-row-end: 3;
row-end-4 grid-row-end: 4;
row-end-5 grid-row-end: 5;
row-end-6 grid-row-end: 6;
row-end-7 grid-row-end: 7;
row-end-8 grid-row-end: 8;
row-end-9 grid-row-end: 9;
row-end-10 grid-row-end: 10;
row-end-11 grid-row-end: 11;
row-end-12 grid-row-end: 12;
row-end-13 grid-row-end: 13;
row-end-auto grid-row-end: auto;

 

1.png

 

 

Grid Auto Flow:

Class
Properties
grid-flow-row grid-auto-flow: row;
grid-flow-col grid-auto-flow: column;
grid-flow-dense grid-auto-flow: dense;
grid-flow-row-dense grid-auto-flow: row dense;
grid-flow-col-dense grid-auto-flow: column dense;

 

1.png

 

Grid Auto Columns:

Class
Properties
auto-cols-auto grid-auto-columns: auto;
auto-cols-min grid-auto-columns: min-content;
auto-cols-max grid-auto-columns: max-content;
auto-cols-fr grid-auto-columns: minmax(0, 1fr);

 

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

 

Grid Auto Rows:

Class
Properties
auto-rows-auto grid-auto-rows: auto;
auto-rows-min grid-auto-rows: min-content;
auto-rows-max grid-auto-rows: max-content;
auto-rows-fr grid-auto-rows: minmax(0, 1fr);

 

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

 

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...