Merkezi Bir Sarıcıdan Çıkmak

Faydalı Alternatif Metin Yazma

Bu eski bir numara, ama ulaştığım bir numara sadece genellikle bu blogda bir gönderiyi garanti edecek kadar – kendi referansım dışında hiçbir sebep olmadan!

Sorun

Tümü merkezi bir sarmalayıcı içinde özenle sınırlandırılmış bir içerik sayfanız olduğunu varsayalım. Muhtemelen şöyle bir yardımcı sınıf kullanıyor:

.wrapper {
width: 70rem;
max-width: 100%;
margin-inline: auto;
}

(kullanıyorum margin-inline mantıksal özellik kısaltması olarak margin-left ve margin-right.)

Ama hayır! Birdenbire kendinizi sayfanın tüm genişliğine yayılan bir bileşene ihtiyaç duyar halde buluyorsunuz. ortasında düzgünce kısıtlanmış içeriğinizin Ne yapalım? Bir sürü seçenek var.

Bir öğe tam genişlikte ortalanmış içeriğe sahip görünüm alanı

Çözümler)

1. Çözüm: İçeriği her iki tarafa da sarın

tamam, biz abilir içeriği tam genişlik bölümümüzün üstüne ve altına sarın wrapper sınıf.

Tam genişlikli bölümün üstündeki ve altındaki içerik, pembe noktalı bir çizgiyle gösterilen ayrı sarmalayıcı öğeler içinde yer alır

Tabii, bu yeterince işe yarayacak. Ancak bu, örneğin içeriğiniz bir CMS’den geliyorsa, işaretleme üzerinde yeterli kontrole sahip olmamıza bağlıdır. Ve gelecekte daha fazla tam genişlikte bölümler eklemek istiyorsak, en esnek çözüm gibi gelmiyor.

2. Çözüm: Her bileşeni sarın

Bileşen gruplarını sarmak yerine, her birini ayrı ayrı sarsak nasıl olur?

Tam genişlikli bölümün her iki yanındaki her bileşenin pembe noktalı bir çizgiyle gösterilen kendi sargısı vardır.

Yine, kendi özel bileşenlerimizi oluşturduysak, işaretlemeyi kontrol edebileceğimiz yerde çalışır. Ancak örneğin WordPress’te paragraflar, başlıklar, liste blokları vb., bağlanacak herhangi bir sarma işaretlemesi olmadan basit HTML öğeleri olarak işlenir. var muhtemelen her bileşeni bir <div> Eğer öyleysen ya bitti PHP, WordPress ve blok düzenleyici ile, ancak kesinlikle yeteneklerimin ötesinde. Ve her durumda, erişilebilirlik ve anlambilim ile ilgili bazı sorunların yanı sıra sadece biraz iğrenç hissetmeye neden olabilir. Div çorbası kimse?

3. Çözüm: Her bileşene bir sınıf ekleyin

Her bileşeni sarmak yerine, bir sınıf eklemeye ne dersiniz? Kısıtlanması gereken bileşenlerin her birine wrapper sınıf. Yani işaretlememiz şöyle bir şeyle sonuçlanacak:

<main>
<h1 class="wrapper">Heading</h1>
<p class="wrapper">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<p class="wrapper">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
</p>

<!--Full width component-->
<div>...</div>

<p class="wrapper">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</main>

Ya da başka bir yoldan gidebiliriz: sarmalayıcı stillerimizi, main öğesi, ardından bir full-width tam genişlikte sınıf.

main > * {
width: 70rem;
max-width: 100%;
margin-inline: auto;
}

main > .full-width {
width: 100%;
}

Her doğrudan çocuğun aynı genişlikte olması gerektiğini varsaydığı için bu harika bir çözüm gibi görünmüyor. Bu merkezi sarmalayıcıdan daha dar olması gereken, ancak yine de içeriğin geri kalanıyla hizalanması gereken bazı bileşenleriniz olabilir.

Bir bileşeni diğerlerinden daha dar, ancak yine de sarmalayıcıya hizalanmış olarak gösteriliyor

Bu öğelerin kenar boşluklarını veya genişliklerini ayarlamak, öngörülemeyen sonuçlara yol açabilir. Örneğin, daha dar bir genişlik ayarlamak yanlış hizalamaya neden olur.

Genişliği daha dar olduğunda paragraf yanlış hizalanıyor
Paragraf, sarmalayıcıya istediğimiz gibi sola hizalamak yerine ortaya hizalanmıştır.

Ayrıca, bireysel stil için hedeflemek istediğimiz öğelerin özgünlüğünü artırmamız gerekecek.

main > * {
width: 70rem;
max-width: 100%;
margin-inline: auto;
}

/* This will have no effect :( */
p {
width: 65ch;
}

/* We gotta do this instead */
main > p {
width: 65ch;
}

4. Çözüm: Görüntü alanı genişliği koparma tekniği

Görünüm alanı birimlerini kullanarak, orijinal işaretlememizi değiştirmeden bir öğeyi sarmalayıcıdan çıkmaya zorlayabiliriz! Orijinal olarak paylaşan Una Kravets 2018’de bu küçük CSS pasajı tam da bunu yapacak:

.full-width {
position: relative;
right: 50%;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
width: 100vw;
}
Tek merkezi sarıcı (pembe noktalı çizgiyle gösterilir), ancak tam genişlikte bölüme uygulanan bir sınıfı gösterir

Kullanışlı! Ama biliyor musun? Bunu bir dönüşümle daha da kısaca yapabiliriz:

.full-width {
width: 100vw;
margin-left: 50%;
transform: translate3d(-50%, 0, 0);
}

Bu küçük bir uyarı ile birlikte gelir: Bu alışkanlık varsa çalış overflow: hidden sarma elemanı üzerinde. Yine de, bundan kaçınabilirsek ve işaretleme üzerinde kontrolümüz yoksa (veya sadece hızlı bir düzeltmeye ihtiyacımız olsa bile), bu harika bir çözüm.

Çözüm 5: Izgara

Bu, görünüşte tam olarak bu tür bir problem için tekrar tekrar ulaştığım bir ızgara modeli. İki esnek genişlikte dış sütunlu bir ızgara oluşturuyoruz (kullanarak fr birim) ve bir veya daha fazla maksimum genişlik kısıtlı sütun. Bu durumda tek bir merkezi kolon ihtiyaçlarımıza hizmet edecektir. Yerleştirmeyi kolaylaştırmak için ızgara çizgilerime ad vermeyi seviyorum:

.wrapper {
display: grid;
grid-template-columns:
[full-start] 1fr [wrapper-start] minmax(0, 70rem) [wrapper-end] 1fr [full-end];

/* Optional gap */
column-gap: var(--pad, 1rem);
}

Ardından, sarmalayıcımızın tüm doğrudan çocuklarını, ayrılması gerekenler hariç, orta sütuna yerleştirebiliriz:

.wrapper > * {
grid-column: wrapper;
}

.wrapper > .full-width {
grid-column: full;
}
Bir ızgaraya yerleştirilen öğeler

Bu tekniği kullanırken bir sütun boşluğu eklemeyi seviyorum, çünkü bu, ızgaramızın hemen yanıt vereceği anlamına geliyor – görüntü alanı dar olduğunda, görüntü alanının kenarı ile orta sütundaki içerik arasında bir boşluk olacak, dolgu kullanmamıza gerek yok. Örneğin, öğeler arasındaki boşluk üzerinde daha fazla kontrole sahip olmam gerektiğinden, örneğin başlıklara üstlerinde paragraflardan daha fazla boşluk bırakmam gerektiğinden, bir satır boşluğu ayarlamamayı tercih ederim. Izgara, farklı boşluk değerleri belirlememize izin vermez, bu nedenle her öğe arasındaki boşluklar aynı olur. Bunun yerine marjları tercih etmek daha fazla kontrol sağlar.

Bu demo, bir sayfa düzeni için kullanılan tekniği gösterir.

Kalemi Gör
başlıksız
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Bu, kopuş için en sevdiğim çözüm ve birçok sitede kullandığım bir çözüm. Tek uyarım, eski bir siteyi bu teknikle uyarlıyorsanız, kodunuzdaki herhangi bir geçici çözümün düzen hatalarına neden olmadığından emin olmak için çok sayıda test yaptığınızdan emin olun.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.