Bu yayında, zorlu işlerin üstesinden gelen ve sağlam modern düzenler oluşturmanıza yardımcı olan birkaç güçlü CSS satırı vurgulanmaktadır.
Yayınlanma tarihi: 7 Temmuz 2020, Son güncelleme tarihi: 15 Aralık 2025
Modern CSS düzenleri, geliştiricilerin yalnızca birkaç tuş vuruşuyla gerçekten anlamlı ve sağlam stil kuralları yazmasına olanak tanır. Yukarıdaki konuşma ve bu yayın, ciddi anlamda ağır işler yapan 10 güçlü CSS satırını inceliyor.
Bu demoları takip etmek veya kendi başınıza denemek için yukarıdaki site yerleştirmesine göz atın ya da 1linelayouts.com adresini ziyaret edin.
01. Süper ortalanmış: place-items: center
İlk "tek satırlı" düzen için CSS dünyasındaki en büyük gizemi çözelim: öğeleri ortalama. place-items: center ile bu sürecin düşündüğünüzden daha kolay olduğunu belirtmek isteriz.
Önce display yöntemi olarak grid değerini belirtin, ardından aynı öğeye place-items: center yazın. place-items, hem align-items hem de justify-items değerlerini aynı anda ayarlamak için kullanılan bir kısayoldur. Bu ayarı center olarak belirlediğinizde hem align-items hem de justify-items, center olarak ayarlanır.
.parent {
display: grid;
place-items: center;
}
Bu sayede içerik, gerçek boyutundan bağımsız olarak üst öğenin tam ortasına yerleştirilir.
02. The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>
Sırada dekonstrüktif pankek var. Bu, pazarlama siteleri için yaygın bir düzendir. Örneğin, genellikle bir resim, başlık ve ardından bir ürünün bazı özelliklerini açıklayan metin içeren 3 öğelik bir satır olabilir. Mobil cihazlarda ise bunların düzgün bir şekilde üst üste yerleştirilmesini ve ekran boyutunu artırdığımızda genişlemesini isteriz.
Bu efekt için Flexbox kullandığınızda, ekran yeniden boyutlandırıldığında bu öğelerin yerleşimini ayarlamak için medya sorgularına ihtiyacınız olmaz.
flex kısaltması flex: <flex-grow> <flex-shrink> <flex-basis> anlamına gelir.
Bu nedenle, kutularınızın <flex-basis> boyutuna kadar dolmasını, daha küçük boyutlarda küçülmesini ancak ek alanı doldurmak için esnememesini istiyorsanız şunu yazın: flex: 0 1 <flex-basis>. Bu durumda <flex-basis> değeriniz 150px olur ve şu şekilde görünür:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Kutuların bir sonraki satıra geçerken genişleyip alanı doldurmasını istiyorsanız <flex-grow> değerini 1 olarak ayarlayın. Böylece şu şekilde görünür:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Ekran boyutunu artırdığınızda veya azalttığınızda bu flex öğeler hem küçülür hem de büyür.
03. Kenar çubuğu mesajı: grid-template-columns: minmax(<min>, <max>) …)
Bu demoda, ızgara düzenleri için minmax işlevinden yararlanılır. Burada yaptığımız şey, minimum kenar çubuğu boyutunu 150px olarak ayarlamak ancak daha büyük ekranlarda bu boyutun 25% değerine kadar genişlemesine izin vermek. Kenar çubuğu, üst öğenin yatay alanının 25% kadarını kaplar. Bu 25%, 150px değerinden küçük olduğunda kenar çubuğu bu alanı kaplamaz.
Bunu, grid-template-columns özelliğinin değeri olarak şu şekilde ekleyin:
minmax(150px, 25%) 1fr. İlk sütundaki öğe (bu örnekte kenar çubuğu) 25% değerinde 150px minmax alır ve ikinci öğe (buradaki main bölümü) tek bir 1fr kanalı olarak kalan alanı kaplar.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pancake Stack: grid-template-rows: auto 1fr auto
Ayrıştırılmış pankek örneğinin aksine, bu örnekte ekran boyutu değiştiğinde alt öğeler sarmalanmaz. Genellikle yapışkan altbilgi olarak adlandırılan bu düzen, hem web siteleri hem de uygulamalar için, mobil uygulamalarda (altbilgi genellikle bir araç çubuğudur) ve web sitelerinde (tek sayfalık uygulamalar genellikle bu genel düzeni kullanır) sıkça kullanılır.
Bileşene display: grid eklediğinizde tek sütunlu bir ızgara elde edersiniz ancak ana alan yalnızca altındaki altbilgiyle birlikte içeriğin yüksekliği kadar olur.
Altbilginin en altta kalmasını sağlamak için şunu ekleyin:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Bu, üstbilgi ve altbilgi içeriğini otomatik olarak alt öğelerinin boyutuna ayarlar ve kalan alanı (1fr) ana alana uygular. auto boyutlu satır ise alt öğelerinin minimum içeriğinin boyutunu alır. Böylece, bu içeriğin boyutu arttıkça satır da buna göre büyür.
05. Klasik Kutsal Kase Düzeni: grid-template: auto 1fr auto / auto 1fr auto
Bu klasik kutsal kase düzeninde bir üstbilgi, altbilgi, sol kenar çubuğu, sağ kenar çubuğu ve ana içerik bulunur. Önceki düzene benzer ancak artık kenar çubukları var.
Bu ızgaranın tamamını tek bir kod satırı kullanarak yazmak için grid-template özelliğini kullanın. Bu sayede hem satırları hem de sütunları aynı anda ayarlayabilirsiniz.
Özellik ve değer çifti: grid-template: auto 1fr auto / auto 1fr auto. Boşlukla ayrılmış birinci ve ikinci listeler arasındaki eğik çizgi, satırlar ve sütunlar arasındaki boşluktur.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Üstbilgi ve altbilginin otomatik olarak boyutlandırılmış içeriğe sahip olduğu son örnekte olduğu gibi, burada sol ve sağ kenar çubuğu, alt öğelerinin iç boyutuna göre otomatik olarak boyutlandırılır. Ancak bu kez dikey boyut (yükseklik) yerine yatay boyut (genişlik) kullanılır.
06. 12 Sütunlu Izgara: grid-template-columns: repeat(12, 1fr)
Sırada başka bir klasik var: 12 sütunlu ızgara. repeat() işleviyle CSS'de hızlıca ızgara oluşturabilirsiniz. Izgara şablonu sütunları için repeat(12, 1fr); kullanıldığında her biri 1fr olan 12 sütun elde edersiniz.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Artık 12 sütunlu bir ızgaranız var. Alt öğelerinizi ızgaraya yerleştirebilirsiniz. Bunu yapmanın bir yolu, öğeleri kılavuz çizgilerini kullanarak yerleştirmektir. Örneğin, grid-column: 1 / 13 ilk satırdan son satıra (13.) kadar uzanır ve 12 sütunu kapsar. grid-column: 1 / 5; ilk dördünü kapsar.
Bunu yazmanın bir başka yolu da span anahtar kelimesini kullanmaktır. span ile başlangıç çizgisini ve ardından bu başlangıç noktasından kaç sütuna yayılacağını ayarlarsınız. Bu durumda grid-column: 1 / span 12, grid-column: 1 / 13 ile eşdeğer, grid-column: 2 / span 6 ise grid-column: 2 / 8 ile eşdeğer olur.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Tekrar, Otomatik, MinMaks): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Bu yedinci örnekte, otomatik olarak yerleştirilen ve esnek alt öğeler içeren duyarlı bir düzen oluşturmak için daha önce öğrendiğiniz bazı kavramları birleştirin. Çok güzel. Burada hatırlamanız gereken temel terimler repeat, auto-(fit|fill) ve minmax()''dir. Bunları RAM kısaltmasıyla hatırlayabilirsiniz.
Tüm bu bilgiler bir araya geldiğinde şu şekilde görünür:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Yine repeat işlevini kullanıyorsunuz ancak bu kez açık bir sayısal değer yerine auto-fit anahtar kelimesini kullanıyorsunuz. Bu, alt öğelerin otomatik olarak yerleştirilmesini sağlar. Bu alt öğelerin minimum taban değeri 150px, maksimum değeri ise 1fr. Bu, daha küçük ekranlarda tam 1fr genişliğini kaplayacakları ve her biri 150px genişliğe ulaştığında aynı satıra akmaya başlayacakları anlamına gelir.
auto-fit ile kutular, yatay boyutları 150 pikseli aştığında kalan alanın tamamını dolduracak şekilde genişler. Ancak bunu auto-fill olarak değiştirirseniz minmax işlevindeki taban boyutları aşıldığında genişlemezler:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Line Up: justify-content: space-between
Sonraki düzende, burada gösterilecek ana nokta justify-content: space-between. Bu, ilk ve son alt öğeleri sınırlayıcı kutularının kenarlarına yerleştirir ve kalan boşluk öğeler arasında eşit olarak dağıtılır. Bu kartlar, Flexbox görüntüleme moduna yerleştirilir ve yön, flex-direction: column kullanılarak sütun olarak ayarlanır.
Bu işlem; başlık, açıklama ve resim bloğunu üst kartın içinde dikey bir sütuna yerleştirir. Ardından, justify-content: space-between uygulandığında ilk (başlık) ve son (resim bloğu) öğeler flexbox'ın kenarlarına sabitlenir ve aralarındaki açıklayıcı metin, her bir uç noktaya eşit boşluk bırakılarak yerleştirilir.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Tarzımı Kısıtlıyor: clamp(<min>, <actual>, <max>)
Burada, düzenler ve duyarlı kullanıcı arayüzü tasarımı için gerçekten heyecan verici sonuçları olan bazı tekniklere değineceğiz. Bu demoda, genişliği şu şekilde clamp kullanarak ayarlayacaksınız: width: clamp(<min>, <actual>, <max>).
Bu, mutlak bir minimum ve maksimum boyut ile gerçek bir boyut belirler. Değerlerle birlikte şu şekilde görünebilir:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Buradaki minimum boyut 23ch veya 23 karakter birimi, maksimum boyut ise 46ch, 46 karakterdir. Karakter genişliği birimleri, öğenin yazı tipi boyutuna (özellikle 0 glifinin genişliğine) bağlıdır. "Gerçek" boyut %50'dir. Bu, bu öğenin üst genişliğinin %50'sini temsil eder.
Burada clamp() işlevi, bu öğenin %50 genişliği korumasını sağlar. Bu genişlik, %50'nin 46ch değerinden büyük (daha geniş görüntü alanlarında) veya 23ch değerinden küçük (daha küçük görüntü alanlarında) olduğu duruma kadar korunur. Üst öğenin boyutunu genişletip daralttığımda bu kartın genişliğinin, sabitlenen maksimum noktasına kadar arttığını ve sabitlenen minimum noktasına kadar azaldığını görebilirsiniz. Ortalamak için ek özellikler uyguladığımızdan, üst öğede ortalanmış olarak kalır. Bu sayede metin çok geniş (46ch değerinin üzerinde) veya çok sıkışık ve dar (23ch değerinin altında) olmayacağından daha okunaklı düzenler elde edilir.
Bu, duyarlı tipografiyi uygulamanın da harika bir yoludur. Örneğin, font-size: clamp(1.5rem, 20vw, 3rem) yazabilirsiniz. Bu durumda, başlığın yazı tipi boyutu her zaman 1.5rem ile 3rem arasında kalır ancak görüntü alanının genişliğine sığması için 20vw gerçek değerine göre büyür ve küçülür.
Bu, minimum ve maksimum boyut değeriyle okunabilirliği sağlamak için harika bir tekniktir.
10. En-boy oranına saygı: aspect-ratio: <width> / <height>
Son olarak, bu son düzen, bir resmin en boy oranını korumayla ilgili sık karşılaşılan bir sorunu çözer.
aspect-ratio özelliği sayesinde, kartı yeniden boyutlandırdığımda yeşil görsel blok bu 16 x 9 en boy oranını korur. aspect-ratio: 16 / 9 ile en boy oranını koruyoruz.
.video {
aspect-ratio: 16 / 9;
}
Bu özellik olmadan 16 x 9 en boy oranını korumak için padding-top hilesi kullanmanız ve üst-genişlik oranını ayarlamak için 56.25% dolgusu vermeniz gerekir. Yakında bu işlem için bir mülkümüz olacak. Böylece bu geçici çözüme ve yüzdeyi hesaplamaya gerek kalmayacak. 1 / 1 oranıyla kare, 2 / 1 ile 2'ye 1 oranında bir dikdörtgen oluşturabilirsiniz. Bu resmin belirli bir boyut oranına göre ölçeklendirilmesi için gereken her şeyi yapabilirsiniz.
.square {
aspect-ratio: 1 / 1;
}
Bu özellik, özellikle video ve iframe'ler söz konusu olduğunda, benim de birçok kez karşılaştığım geliştirici sorunlarını çözdüğü için bilinmesi gereken iyi bir özelliktir.
Sonuç
10 güçlü CSS satırıyla bu yolculuğu takip ettiğiniz için teşekkür ederiz. Daha fazla bilgi edinmek için videonun tamamını izleyin.