Bu gönderide, işin büyük bir kısmını üstlenen 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 sonraki gönderi, ciddi bir iş yükünü üstlenen 10 güçlü CSS satırını inceliyor.
Bu demoları takip etmek veya kendi başınıza denemek için yukarıdaki site yerleştirmesini inceleyin ya da 1linelayouts.com adresini ziyaret edin.
01. Super Centered: place-items: center
İlk "tek satırlık" düzen için CSS dünyasındaki en büyük gizemi, yani öğeleri ortalamayı çözelim. place-items: center ile bu işlemin düşündüğünüzden daha kolay olduğunu bilmenizi isteriz.
Önce grid yöntemini display olarak belirtin, ardından aynı öğeye place-items: center yazın. place-items, hem align-items hem de justify-items değerini aynı anda ayarlamak için kullanılan bir kısaltmadır. center olarak ayarladığınızda hem align-items hem de justify-items, center olarak ayarlanır.
.parent {
display: grid;
place-items: center;
}
Bu sayede içerik, boyutundan bağımsız olarak üst öğe içinde mükemmel şekilde ortalanır.
02. The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>
Sırada, parçalanmış pankek var. Bu, pazarlama sitelerinde yaygın olarak kullanılan bir düzendir. Örneğin, genellikle bir resim, başlık ve ardından ürünün bazı özelliklerini açıklayan bir metinle birlikte 3 öğeden oluşan bir satır olabilir. Mobil cihazlarda bu öğelerin düzgün bir şekilde sıralanmasını ve ekran boyutu arttıkça genişlemesini istiyoruz.
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ı şu anlama gelir: flex: <flex-grow> <flex-shrink> <flex-basis>.
Bu nedenle, kutularınızın <flex-basis> boyutuna kadar dolmasını, daha küçük boyutlarda küçülmesini ancak ek alanı doldurmak için uzamamasını istiyorsanız flex: 0 1 <flex-basis> yazın. Bu durumda, <flex-basis> değeriniz 150px olduğundan şu şekilde görünür:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Kutuların bir sonraki satıra kayarken alanı doldurmasını istiyorsanız <flex-grow> değerini 1 olarak ayarlayın. Bu durumda, aşağıdaki gibi görünür:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Artık ekran boyutunu büyüttüğünüzde veya küçülttüğünüzde bu esnek öğeler hem küçülür hem de büyür.
03. Kenar çubuğunda şunlar yazıyor: grid-template-columns: minmax(<min>, <max>) …)
Bu demoda, ızgara düzenleri için minmax işlevinden yararlanılmaktadır. Burada yaptığımız işlem, minimum kenar çubuğu boyutunu 150px olarak ayarlamak ancak daha büyük ekranlarda bu boyutun 25%'ye kadar genişlemesine izin vermektir. Kenar çubuğu, 25% değeri 150px değerinden küçük olana kadar her zaman üst öğesinin yatay alanının 25%'ını kaplar.
Bunu, aşağıdaki değerle birlikte grid-template-columns değeri olarak ekleyin:
minmax(150px, 25%) 1fr. İlk sütundaki öğe (bu örnekte kenar çubuğu) 25% konumunda minmax 150px alır ve ikinci öğe (buradaki main bölümü) alanın geri kalanını tek bir 1fr parça olarak kaplar.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pancake Stack: grid-template-rows: auto 1fr auto
Bu örnek, Deconstructed Pancake'in aksine ekran boyutu değiştiğinde alt öğelerini sarmalamaz. 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) yaygın olarak kullanılır.
Bileşene display: grid eklediğinizde tek sütunlu bir ızgara elde edersiniz ancak ana alan yalnızca altbilginin altındaki içerik kadar yüksek olur.
Altbilginin en altta sabit kalmasını sağlamak için şunu ekleyin:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Bu, üstbilgi ve altbilgi içeriğinin boyutunu otomatik olarak alt öğelerinin boyutuna göre ayarlar ve kalan alanı (1fr) ana alana uygular. auto boyutlu satır ise alt öğelerinin minimum içeriğinin boyutunu alır. Bu nedenle, içerik boyutu arttıkça satır da buna göre büyür.
05. Klasik Holy Grail Düzeni: grid-template: auto 1fr auto / auto 1fr auto
Bu klasik holy grail düzeninde başlık, 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ıyla 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. İlk ve ikinci boşlukla ayrılmış listeler arasındaki eğik çizgi, satırlar ve sütunlar arasındaki ayraçtır.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Son örnekte olduğu gibi, burada da üstbilgi ve altbilgi otomatik olarak boyutlandırılmış içeriğe sahipti. Burada ise sol ve sağ kenar çubuğu, alt öğelerinin doğal boyutuna göre otomatik olarak boyutlandırılıyor. Ancak bu kez dikey (yükseklik) yerine yatay (genişlik) boyut kullanılır.
06. 12 sütunlu ızgara: grid-template-columns: repeat(12, 1fr)
Bir sonraki klasik ise 12 sütunlu ızgara. repeat() işleviyle CSS'de hızlıca ızgara yazabilirsiniz. Izgara şablonu sütunları için repeat(12, 1fr); kullanıldığında her biri 1fr olan 12 sütun elde edilir.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Artık 12 sütunlu bir parça ızgaranız var. Alt öğelerinizi ızgaraya yerleştirebilirsiniz. Bunu yapmanın bir yolu, öğeleri ızgara ç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ört öğeyi kapsayacak.
Bu ifadeyi yazmanın bir diğer yolu da span anahtar kelimesini kullanmaktır. span ile başlangıç satırını ve bu başlangıç noktasından itibaren kaç sütun kapsayacağını belirlersiniz. Bu durumda, grid-column: 1 / span 12, grid-column: 1 / 13'ye, grid-column: 2 / span 6 ise grid-column: 2 / 8'e 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ştirilmiş ve esnek alt öğeler içeren duyarlı bir düzen oluşturmak için daha önce öğrendiğiniz bazı kavramları birleştirin. Çok kullanışlı. Burada hatırlamanız gereken temel terimler repeat, auto-(fit|fill) ve minmax()''dir. Bunları RAM kısaltmasıyla hatırlayabilirsiniz.
Hepsi birlikte şu şekilde görünür:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Yine tekrar etme 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 maksimum değeri 1fr, minimum değeri ise 150px'dır. Bu nedenle, daha küçük ekranlarda 1fr genişliğinin tamamını kaplar ve her biri 150px genişliğe ulaştığında aynı satırda yer almaya başlar.
auto-fit ile, yatay boyutları 150 pikseli aştığında kutular kalan alanın tamamını dolduracak şekilde genişler. Ancak bunu auto-fill olarak değiştirirseniz minmax işlevindeki temel 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
Bir sonraki düzende, burada gösterilmesi gereken asıl nokta justify-content: space-between'dır. Bu özellik, ilk ve son alt öğeleri sınırlayıcı kutularının kenarlarına yerleştirir ve kalan boşluğu öğeler arasında eşit şekilde dağıtır. Bu kartlar, flex-direction: column kullanılarak yönü sütun olarak ayarlanmış bir Flexbox görüntüleme moduna yerleştirilir.
Bu işlem, başlığı, açıklamayı 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 esnek kutunun kenarlarına sabitlenir ve aradaki açıklayıcı metin, her uç noktaya eşit aralıklarla yerleştirilir.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Clamping My Style: clamp(<min>, <actual>, <max>)
Burada, düzenler ve duyarlı kullanıcı arayüzü tasarımı açısından gerçekten heyecan verici sonuçlar doğuran bazı tekniklere değineceğiz. Bu demoda, genişliği şu şekilde clamp kullanarak ayarlıyorsunuz: width: clamp(<min>, <actual>, <max>).
Bu, mutlak bir minimum ve maksimum boyut ile gerçek bir boyut belirler. Değerlerle ilgili olarak şu örnekleri verebiliriz:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Buradaki minimum boyut 23ch veya 23 karakter birimi, maksimum boyut ise 46ch veya 46 karakterdir. Karakter genişliği birimleri, öğenin yazı tipi boyutuna (özellikle 0 glifinin genişliğine) göre belirlenir. "Gerçek" boyut %50'dir. Bu, öğenin üst öğe genişliğinin% 50'sini temsil eder.
clamp() işlevi burada, bu öğenin 46ch değerinden büyük (daha geniş görünüm alanlarında) veya 23ch değerinden küçük (daha küçük görünüm alanlarında) olana kadar %50 genişliği korumasını sağlıyor. Üst öğenin boyutunu büyütüp küçülttükçe bu kartın genişliğinin, sınırlandırılmış maksimum noktasına kadar arttığını ve sınırlandırılmış minimum noktasına kadar azaldığını görebilirsiniz. Daha sonra, ortalamak için ek özellikler uyguladığımızdan üst öğede ortalanmış olarak kalır. Bu sayede metin çok geniş (46ch'dan fazla) veya çok sıkıştırılmış ve dar (23ch'dan az) olmayacağından daha okunaklı düzenler elde edilebilir.
Bu, duyarlı tipografi uygulamak için de harika bir yöntemdir. Örneğin, font-size: clamp(1.5rem, 20vw, 3rem) yazabilirsiniz. Bu durumda, bir 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ığacak şekilde 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ı korumakla ilgili sık karşılaşılan bir sorunu çözüyor.
aspect-ratio özelliğiyle, kartı yeniden boyutlandırdığımda yeşil görsel blok 16 x 9 en boy oranını koruyor. aspect-ratio: 16 / 9 ile en boy oranına saygı duyuyoruz.
.video {
aspect-ratio: 16 / 9;
}
Bu özellik olmadan 16:9 en-boy oranını korumak için padding-top geçici çözümünü kullanmanız ve genişliğe göre üst oran belirlemek için 56.25% dolgusu vermeniz gerekir. Bu durumu önlemek ve yüzde hesaplama ihtiyacını ortadan kaldırmak için yakında bir özellik sunacağız. 1 / 1 oranıyla kare, 2 / 1 ile 2:1 oranı ve bu resmin belirli bir boyut oranıyla ölçeklenmesi için ihtiyacınız olan her şeyi yapabilirsiniz.
.square {
aspect-ratio: 1 / 1;
}
Bu özellik, özellikle video ve iFrame'ler söz konusu olduğunda, geliştiricilerin birçok kez karşılaştığı sorunları çözdüğü için bilinmesi gereken bir özelliktir.
Sonuç
Bu yolculuğu 10 satırlık CSS koduyla takip ettiğiniz için teşekkür ederiz. Daha fazla bilgi edinmek için videonun tamamını izleyin ve demoları kendiniz deneyin.