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

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS'te columns özelliği ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

55 views

CSS'te columns özelliği, bir blok öğesinin çoklu sütunlara nasıl bölüneceğini belirtmenizi sağlar. Bu, metin gibi içeriğin gazete tarzında kolayca sütunlara ayrılmasını sağlar, böylece okunabilirliği artırır ve düzeni iyileştirir. columns özelliği iki ana parametre alabilir: sütun sayısı ve sütun genişliği. Bu özellik, CSS3 ile tanıtılmıştır ve modern web tasarımında yaygın olarak kullanılmaktadır.

Kullanımı

columns özelliği şu şekilde kullanılabilir:

.element {
  columns: 100px 3;
}

 

Bu örnekte, .element sınıfına sahip bir öğe için sütun genişliği en az 100 piksel olacak şekilde ve toplam 3 sütun olacak şekilde ayarlanmıştır. CSS, belirtilen genişliği ve sütun sayısını mümkün olan en iyi şekilde yerleştirmeye çalışır. Eğer belirtilen sütun sayısı için yeterli alan yoksa, tarayıcı otomatik olarak sütun sayısını azaltabilir.

Parametreler

Sütun Sayısı: İçeriğin kaç sütuna bölüneceğini belirtir. Bu değer bir sayı veya auto olabilir. auto belirtildiğinde, tarayıcı sütun genişliğine bağlı olarak otomatik olarak sütun sayısını belirler.

Sütun Genişliği: Her sütunun ideal genişliğini belirtir. Bu değer bir uzunluk (örneğin, piksel veya em) veya auto olabilir.

Diğer İlgili Özellikler

column-gap: Sütunlar arasındaki boşluğu belirler.

column-rule: Sütunlar arasına dikey çizgi eklemek için kullanılır. Bu çizginin stilini, kalınlığını ve rengini belirlemek için column-rule-style, column-rule-width ve column-rule-color özellikleri kullanılabilir.

column-span: Bir öğenin birden fazla sütunu kaplamasını sağlar. Genellikle başlıklar veya önemli bloklar için kullanılır.

columns özelliği, yanıt veren web tasarımında metin ve diğer içerikleri düzenlemek için güçlü bir araçtır ve kullanıcı deneyimini artırmada önemli bir rol oynar.

 

TailwindCSS:

Class
Properties
columns-1 columns: 1;
columns-2 columns: 2;
columns-3 columns: 3;
columns-4 columns: 4;
columns-5 columns: 5;
columns-6 columns: 6;
columns-7 columns: 7;
columns-8 columns: 8;
columns-9 columns: 9;
columns-10 columns: 10;
columns-11 columns: 11;
columns-12 columns: 12;
columns-auto columns: auto;
columns-3xs columns: 16rem; /* 256px */
columns-2xs columns: 18rem; /* 288px */
columns-xs columns: 20rem; /* 320px */
columns-sm columns: 24rem; /* 384px */
columns-md columns: 28rem; /* 448px */
columns-lg columns: 32rem; /* 512px */
columns-xl columns: 36rem; /* 576px */
columns-2xl columns: 42rem; /* 672px */
columns-3xl columns: 48rem; /* 768px */
columns-4xl columns: 56rem; /* 896px */
columns-5xl columns: 64rem; /* 1024px */
columns-6xl columns: 72rem; /* 1152px */
columns-7xl columns: 80rem; /* 1280px */

 

1.png

1.png

1.png

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...