Makro düzenler, arayüzünüzün daha büyük, sayfa genelindeki düzenini tanımlar.
Herhangi bir düzeni uygulamadan önce içeriğinizin akışının mantıklı olduğundan emin olmalısınız. 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>
Bu sayfa düzeyindeki bileşenleri tek tek ayarladığınızda, makro düzen tasarlıyorsanız sayfanızın üst düzey görünümünü elde edersiniz. 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 ızgarası, sayfanıza 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;
}
}
Esnek Kutu
Bu özel 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ütunda ne kadar alan kaplaması gerektiğini belirten 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. Değişiklikleri birkaç öğeye uyguladığınızda medya sorguları düzgün çalışır; 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.
Ayrılma noktaları 30em
, 45em
, 60em
,
Ancak bu alışkanlıklar oldukça yorucu ve yönetmesi zor bir iştir.
Bunun yerine, kartların otomatik olarak doğru miktarda alanı kaplaması için kurallar uygulayabilirsiniz.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
Flexbox ile benzer bir düzen elde edebilirsiniz. Bu durumda, son satırı dolduracak kadar kart yoksa geri kalan kartlar, sütunlara yerleştirilmek yerine kullanılabilir alanı dolduracak şekilde genişletilir. Satırları ve sütunları hizalamak istiyorsanız ızgara seçeneğini kullanın.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
Flexbox veya ızgarada bazı akıllı kurallar uygulayarak dinamik makro düzenleri çok az CSS ile ve medya sorgusu olmadan tasarlanabilir. Bu durumda daha az uğraşırsınız. Bunun yerine hesaplamaları tarayıcının yapması gerekir. Medya sorgusu gerektirmeden esnek olan modern CSS düzenlerine ilişkin bazı örnekleri görmek için bkz. 1linelayouts.com adresine gidin.
Öğrendiklerinizi sınayın
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ı?
Artık sayfa düzeyinde makro düzenleri hakkında fikir sahibi olduğunuza göre dikkatinizi sayfadaki bileşenlere çekin. Bu, dünyanın mikro düzenler.