Makro düzenler, arayüzünüzün sayfa genelindeki daha büyük organizasyonunu tanımlar.
Herhangi bir düzen uygulamadan önce içeriğinizin akışını kontrol edin. Daha küçük ekranlar bu tek sütunlu varsayılan sıralamayı kullanır.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
Sayfa düzeyindeki bu bileşenleri düzenlediğinizde bir makro düzen tasarlamış olursunuz. Bu düzen, sayfanızı üst düzeyde gösteren bir görünümdür. Medya sorgularını kullanarak CSS'de, bu görünümün farklı ekran boyutlarına nasıl ayarlanması gerektiğini açıklayan kurallar sağlayabilirsiniz.
Izgara
CSS ızgara, sayfanıza bir düzen uygulamak için mükemmel bir araçtır. Yukarıdaki örnekte, yeterli ekran genişliği olduğunda iki sütunlu bir düzen istediğinizi varsayalım. Tarayıcı yeterince geniş hale geldiğinde bu iki sütunlu düzeni uygulamak için belirtilen bir ayrılma noktasının üzerindeki ızgara stillerini tanımlamak için bir medya sorgusu kullanın.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
Bu belirli düzen için flexbox da kullanabilirsiniz. Stiller şöyle görünür:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
Ancak flexbox sürümü daha fazla CSS gerektirir. Her sütunun ne kadar yer kaplaması gerektiğini açıklayan ayrı bir kuralı vardır. Izgara örneğinde aynı bilgiler, kapsayıcı öğe için tek bir kurala yerleştirilir.
Medya sorgusuna ihtiyacınız var mı?
Her zaman bir medya sorgusu kullanmanız gerekmeyebilir. Medya sorguları, yalnızca birkaç öğeye değişiklik uyguladığınızda Ancak düzenin çok fazla güncellenmesi gerekiyorsa medya sorgularınız çok fazla ayrılma noktasıyla birlikte zorlanabilir.
Kart bileşenleriyle dolu bir sayfanız olduğunu varsayalım.
Kartlar hiçbir zaman 15em sınırını aşmaz ve tek satıra sığabilecek kadar çok kart yerleştirmek istersiniz.
30em, 45em, 60em vb. kesme noktaları içeren medya sorguları yazabilirsiniz ancak bu oldukça zahmetli ve sürdürülmesi zor bir işlemdir.
Bunun yerine, kartların otomatik olarak doğru miktarda yer kaplaması için kurallar uygulayabilirsiniz.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
Benzer bir düzeni flexbox ile de oluşturabilirsiniz. Bu durumda, son satırı dolduracak yeterli kart yoksa kalan kartlar sütunlar halinde sıralanmak yerine mevcut alanı dolduracak şekilde esnetilir. Satırları ve sütunları hizalamak istiyorsanız ızgara kullanın.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
Flexbox veya ızgaraya bazı akıllı kurallar uygulayarak, minimum CSS ile ve medya sorguları olmadan dinamik makro düzenler tasarlayabilirsiniz. Bu sayede, hesaplamaları tarayıcının yapmasına izin vererek daha az çalışma yapabilirsiniz. Medya sorgusu gerektirmeden esnek olan modern CSS düzenlerine ilişkin bazı örnekleri görmek için bkz. 1linelayouts.com adresine gidin.
Öğrendiklerinizi test etme
Makro düzenler hakkındaki bilginizi test edin.
Makro düzenleri en iyi tanımlayan cümle hangisidir?
Makro düzenler farklı ekran boyutlarına uyum sağlamak için her zaman medya sorgularını kullanır mı?
Sayfa düzeyinde makro düzenler için bazı fikirlere sahip olduğunuza göre, dikkatinizi sayfadaki bileşenlere çevirin. Bu, mikro düzenler alanının konusudur.