Sütun Düzeniyle İlgili CSS Özellikleri
Bu makale, sütun düzeniyle ilgili CSS özelliklerini açıklar.
Sütun düzenlerini nasıl tanımlayacağınızı öğrenebilirsiniz.
YouTube Video
Önizleme için HTML
css-columns.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-columns.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Columns</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>columns</h3>
23 <section style="width: 100%; height: 350px;">
24 <h4>Columns Example</h4>
25 <header><h4>columns: 100px 3; column-gap: 20px; column-rule: 2px solid #333;</h4></header>
26 <section class="sample-view">
27 <section class="columns-container">
28 <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
29 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
30 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
31 <p>Pellentesque malesuada diam eu sem finibus scelerisque.</p>
32 <p>Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
33 <p>Morbi in nibh in lorem vestibulum sollicitudin.</p>
34 </section>
35 </section>
36 </section>
37 </article>
38 <article>
39 <h3>order</h3>
40 <section style="height: 300px;">
41 <header><h4>column-width: 250px</h4></header>
42 <section class="sample-view">
43 <div class="container">
44 <div class="item item-1">Item 1</div>
45 <div class="item item-2">Item 2</div>
46 <div class="item item-3">Item 3</div>
47 </div>
48 </section>
49 </section>
50 </article>
51 </main>
52</body>
53</html>Sütun Düzeni
sütunlar
1.columns-container {
2 columns: 100px 3;
3 column-gap: 20px;
4 column-rule: 2px solid #333;
5}
6
7h5 {
8 column-span: all;
9}CSS columns özelliği, içeriğin birden fazla sütuna bölünerek görüntülenmesi için kullanışlı bir yöntem sunar. Tek bir deklarasyonla sütun genişliğini ve sütun sayısını kolayca ayarlayabilirsiniz, bu da duyarlı tasarımlar için uygundur. Metnin dikey olarak uzun bir şekilde görüntülendiği ve birden fazla sütuna yerleştirildiği, gazete veya dergi gibi düzenlerde bu özellik oldukça etkilidir.
- Bu örnekte, içerik 20px boşluk ve sütunlar arasında 2px çizgi ile 3 sütuna bölünmüştür. Ek olarak,
h5elementi birden fazla sütuna yayılır.
columns, column-width ve column-count özelliklerinin kısa yazımıdır.
columns Özelliğinin Söz Dizimi
1columns: <column-width> <column-count>;columns bu formatı takip eder.
<column-width>: Her sütunun genişliğini belirler. Değer olarakautoveya herhangi bir uzunluk birimi (örn.px,em,%, vb.) kullanabilirsiniz.<column-count>: Sütun sayısını belirtir. Sayısal bir değer olarak ifade edilir.
column-width Özelliği
1.container {
2 column-width: 250px;
3}column-width, her sütunun minimum genişliğini belirleyen bir özelliktir. column-count ile birlikte kullanıldığında sütunların otomatik yerleştirilmesi ve ayarlanması mümkün olur. Tarayıcı, konteynerin genişliğini dikkate alır ve gerekli sütun sayısını otomatik olarak hesaplar.
- Bu örnekte, sütun başına genişlik 250px olarak ayarlanmıştır ve konteynerin genişliğine göre en uygun sütun sayısı hesaplanır.
column-count Özelliği
1.container {
2 column-count: 3;
3}column-count, belirli bir öğenin kaç sütuna bölüneceğini açıkça belirleyen bir özelliktir. column-width'in aksine, bu özellik sütun sayısını sabitler.
- Bu örnekte, kapsayıcı içindeki içerik üç sütuna bölünmüştür.
column-gap Özelliği
1.container {
2 column-gap: 20px;
3}column-gap, her bir sütun arasındaki boşluğu (aralığı) belirleyen bir özelliktir. CSS Grid ile ortak bir özellik olan gap da vardır, ancak yalnızca sütunlar arasındaki kenar boşluklarını özelleştirmek istediğinizde column-gap kullanışlıdır.
- Bu örnekte, her bir sütun arasında 20px'lik bir boşluk bulunmaktadır. Varsayılan değer 16px'dir.
column-rule Özelliği
1.container {
2 column-rule: 2px solid #333;
3}column-rule, sütunlar arasına çizgi çizmek için kullanılan bir özelliktir. border özelliğine benzer bir sözdizimine sahiptir ve çizginin genişliğini, stilini ve rengini belirlemenize olanak tanır.
- Bu örnekte, sütunlar arasında 2px genişliğinde düz siyah bir çizgi gösterilmiştir.
column-ruleaşağıdaki üç özellik halinde ayrılabilir.column-rule-width: Çizginin genişliğini belirtir.column-rule-style: Çizginin stilini belirtir. Örneğin,solid(düz),dashed(kesikli),dotted(noktalı) gibi seçenekler vardır.column-rule-color: Çizginin rengini belirtir.
column-span Özelliği
1h5 {
2 column-span: all;
3}column-span, belirli bir öğenin birden çok sütuna yayılmasını sağlayan bir özelliktir. Başlıklar gibi öğeler için genellikle kullanılır. İki olası değeri vardır:.
- none: Öğe sütunlara yayılmaz ve bir sütun içinde yer alır. Bu varsayılan değerdir.
- all: Öğe tüm sütunlara yayılmış şekilde görüntülenir.
- Bu örnekte,
h5öğesi birden çok sütuna yayılmış şekilde görüntülenmiştir.
column-fill Özelliği
1.container {
2 column-fill: balance;
3}column-fill, içeriğin sütunlar arasında nasıl dağıtıldığını kontrol eden bir özelliktir. Normalde sütunlar mümkün olduğunca eşit şekilde doldurulur, ancak bu özellik farklı bir düzen belirtmenize olanak tanır. Aşağıdaki değerler mevcuttur:.
- balance: İçerikler sütunları eşit şekilde dolduracak şekilde düzenlenir. Bu varsayılan değerdir.
- auto: Sütunlar otomatik olarak doldurulur. Son sütun daha uzun olabilir.
- Bu ayar, içeriğin eşit şekilde dağıtılmasını sağlar.
Media Query'ler ile Kullanımı
1.container {
2 columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6 .container {
7 columns: 1;
8 }
9}columns özelliği, duyarlı tasarımı desteklemek için media query'lerle birleştirilebilir. Farklı ekran boyutlarına bağlı olarak sütun sayısını ve sütun genişliklerini esnek bir şekilde değiştirebilirsiniz.
- Bu örnekte, ekran genişliği 600px veya daha az olduğunda 1 sütun olacaktır. Daha geniş ekranlar için, her biri 200px genişliğinde 3 sütuna bölünecektir.
Özet
CSS columns özelliği, birden fazla sütun kullanarak düzenleri kolayca uygulamak için güçlü bir araçtır. Bu, özellikle okuma kolaylığına öncelik veren duyarlı tasarım ve metin düzenleri için faydalıdır. İlgili özellikleri birleştirerek sütun sayısını ve genişliklerini, boşlukları, süslemeleri vb. esnek bir şekilde özelleştirebilirsiniz.
Bu, daha sofistike tasarımların kolayca uygulanmasını sağlar, bu yüzden bu özelliği kullanmanızı öneririz.
order
1.container {
2 all:initial;
3 display: flex;
4}
5.item {
6 padding: 10px;
7 background-color: lightblue;
8 margin: 5px;
9}
10.item-1 {
11 order: 3;
12}
13.item-2 {
14 order: 1;
15}
16.item-3 {
17 order: 2;
18}CSS order özelliği, Flexbox veya Grid düzenlemeleri kullanıldığında öğelerin görüntüleme sırasını kontrol etmek için kullanılır. Normalde öğeler HTML işaretlemesine göre işlenir, ancak order özelliğini kullanarak görsel sıralarını değiştirebilirsiniz. Bu özellik, esnek kullanıcı arabirimleri tasarlamaya ve duyarlı tasarımlar oluşturmaya yardımcı olur.
- Bu örnekte, öğeler HTML'de
Item 1,Item 2,Item 3olarak işaretlenmiştir, ancak CSSorderözelliği nedeniyle görüntü sırasıItem 2,Item 3,Item 1olarak değişir.
order Özelliğinin Temelleri
order özelliği, Flexbox veya Grid kapları içindeki öğelere uygulanır. Yerleştirme sırasını her bir öğe için tamsayı değeri belirleyerek tanımlarsınız. Varsayılan olarak, tüm öğelerin order değeri 0 olarak ayarlanır. Bu değeri değiştirerek, öğelerin hangi sırada görüntüleneceğini belirleyebilirsiniz.
Temel Sözdizimi
1.item {
2 order: <integer>;
3}orderdeğeri için herhangi bir tamsayı belirtebilirsiniz. Pozitif, negatif veya sıfır değerler kullanılabilir. Değer ne kadar küçükse, öğe o kadar erken gösterilir; değer ne kadar büyükse, öğe o kadar geç gösterilir.
Pozitif ve Negatif Değerlerin Kullanımı
order özelliğine negatif değerler de atayabilirsiniz. Negatif değerlere sahip öğeler varsayılan sıralamadan önce görüntülenir.
1.item-1 {
2 order: -1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 1;
9}Bu örnekte, Item 1 order: -1 olarak ayarlandığından ilk olarak görüntülenir. Buna karşılık, Item 3 order: 1 ve Item 2 order: 2 olarak ayarlandığından bu sırayla görüntülenir.
Responsive Tasarımda order
Responsive tasarımda, ekran boyutuna göre öğelerin sırasını değiştirmek mümkündür. Örneğin, mobil görünümde önemli bilgileri önce göstermek için öğelerin sırasını değiştirebilirsiniz.
1.item-1 {
2 order: 1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 3;
9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13 .item-1 {
14 order: 3;
15 }
16 .item-2 {
17 order: 1;
18 }
19 .item-3 {
20 order: 2;
21 }
22}Bu örnekte, normal görünümde öğeler Item 1, Item 2, Item 3 sırasıyla görüntülenirken, ekran genişliği 600px'in altına düştüğünde Item 2 ilk, Item 3 ikinci, ve Item 1 en son olarak görüntülenir.
order için Dikkat Edilecekler
order özelliğini kullanmak, DOM ağacındaki sıradan farklı bir görsel sıralama ile sonuçlanabilir. Bu durum ekran okuyucular gibi erişilebilirlik araçlarını etkileyebilir. Sıra değiştirildiğinde, klavye navigasyonu ve diğer yardımcı teknolojiler beklenildiği gibi çalışmayabilir. Bu nedenle, order kullanırken kullanıcı deneyimi üzerindeki etkisini dikkatlice değerlendirmek gereklidir.
Sonuç
CSS order özelliği, Flexbox veya Grid düzenlerinde öğelerin görüntülenme sırasını kolayca kontrol etmenizi sağlayan güçlü bir araçtır. Pozitif veya negatif değerler kullanarak öğelerin sırasını esnek bir şekilde değiştirebilirsiniz, bu özellikle responsive tasarımda çok faydalıdır. Ancak, erişilebilirlik ve görsel sıra ile HTML yapısı arasındaki farklılıklara dikkat edilmelidir. Eğer bu hususlar doğru bir şekilde değerlendirilirse, order özelliği daha dinamik ve esnek düzenler oluşturmak için yararlı olabilir.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.