Bir avuç stille bu çekici, esnek düzeni birçok sayfa içeriği türü için kullanabilirsiniz.
CSS, çekici ve duyarlı düzenler tasarlamanız için bol miktarda esneklik sağlar. Dergi tarzı bir düzen, karışık metin ve resim içeriğini çekici, göz alıcı bir formatta düzenler ve bu da onu popüler bir seçim haline getirir.
CSS Izgarası size bu düzeni elde etmek için ihtiyaç duyduğunuz araçları ve ayrıntılı kontrolü sağlar; bu nedenle öğrenilmesi harika bir tekniktir.
Dergi Stili Düzenler Nelerdir?
Dergi tarzı düzenler, içeriği sütunlar ve satırlar halinde düzenlemek için ızgaraya benzer bir yapı kullanır.
Makaleler, görseller ve reklamlar gibi farklı içerik türlerini düzenli ve ilgi çekici bir şekilde görüntülemek için mükemmeldirler.
CSS Izgarasını Anlamak
CSS Grid, şunları yapmanızı sağlayan sağlam bir düzen aracıdır: elemanları iki boyutlu uzayda konumlandırınkolaylaştırıyor sütunlar ve satırlar oluştur.
Bu tür düzende iki ana bileşen devreye girer: ızgaranın yapısını tanımlamaktan sorumlu olan ızgara kabı ve kabın alt öğeleri olan ızgara öğeleri.
3x3'lük bir ızgara oluşturmak için CSS Izgarasını nasıl kullanabileceğinizi gösteren basit bir örnek:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
Bu kod, eşit genişlikte üç sütun ve öğeler arasında 20 piksel boşluk bulunan bir ızgara kapsayıcısını tanımlar. İşte sonuç:
HTML Yapısını Ayarlama
Dergi tarzı bir düzen için iyi yapılandırılmış bir HTML belgesine ihtiyacınız olacak. Dikkate almak içeriğinizi düzenlemek için anlamsal öğeleri kullanma beğenmek
<body>
<sectionclass="magazine-layout">
<article>
<imgsrc="https://source.unsplash.com/random/?city, night" />
<p>Some Article Titlep>
article><article>
<imgsrc="https://source.unsplash.com/random/?city, day" />
<p>Some Article Titlep>
article><article>
<imgsrc="https://source.unsplash.com/random/?animal" />
<p>Some Article Titlep>
article><article>
<imgsrc="https://source.unsplash.com/random/?book" />
<p>Some Article Titlep>
article>
<article>
<imgsrc="https://source.unsplash.com/random/?food" />
<p>Some Article Titlep>
article>
section>
body>
Izgara Kabını Tanımlama
Dergi tarzı düzeniniz için bir ızgara oluşturmak için aşağıdaki CSS kodunu ekleyin:
.magazine-layout {
height: 100%;
max-width: 130rem;
margin: 0 auto;/* Defines the grid container */
display: grid;/* Defines the column specification */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Defines the row specification */
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}
Bu CSS, konteyner öğesinin, .dergi düzeni, bildirimi kullanan bir ızgara kapsayıcısıdır ekran: ızgara.
grid-template-columns ve grid-template-rows özellikleri aşağıdakilerin bir kombinasyonunu kullanır: tekrarlamak, otomatik uyum, Ve en az en çok. Bunlar sütun genişliklerinin ve satır yüksekliklerinin en az olmasını sağlar 250 pikselve her birine mümkün olduğu kadar çok öğe sığar.
Izgara Öğelerini Yerleştirme
Şimdi her makaleyi ve içeriğini çekici küçük resim stili öğeler oluşturacak şekilde biçimlendirin:
article {
overflow: hidden;
border-radius: 0.5rem;
position: relative;
color: #fff;
}.articleimg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 400px;
}
.articlep {
position: absolute;
bottom: 0;
left: 0;
padding: 2rem;
background: #333333c1;
font-size: 2rem;
border-radius: 0.5rem;
}
Bu noktada web sayfanız aşağıdaki gibi görünmelidir:
Dergi Stili Düzenler Oluşturma
Gerçek bir dergi stili görünümü elde etmek için makale öğelerini istediğiniz sıraya göre dağıtacak CSS stilleri ekleyin:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
Sayfanız artık şöyle görünmelidir:
CSS Grid ile Duyarlı Tasarım
CSS Grid'in avantajlarından biri, doğal yanıt verme yeteneğidir. Yapabilirsiniz düzeni ayarlamak için medya sorgularını kullanın farklı ekran boyutları için. Örneğin:
/* Media query for screens up to 1100px */
@media screen and (max-width:1100px) {
.article:nth-child(3) {
grid-column: 2 / span 2;
}.article:nth-child(5) {
grid-row: 3 / span 1;
}
}
/* Media query for screens up to 600px */
@media screen and (max-width:600px) {
.article:nth-child(2),
.article:nth-child(3),
.article:nth-child(4),
.article:nth-child(5) {
grid-column: 1 / span 3;
}
}
Bu medya sorguları, cihazın ekran boyutuna en iyi uyacak şekilde birden fazla düzen tanımı arasında geçiş yapar. Son düzeniniz farklı boyutlara uyum sağlayacaktır:
Düzenlerinizi CSS Izgarasıyla Dönüştürme
CSS Grid, farklı ekran boyutlarına uyum sağlayan dergi tarzı düzenler oluşturmak için kullanabileceğiniz esnek bir araçtır. Izgara yapılarını tanımlamanıza, öğeleri yerleştirmenize ve düzenleri ayarlamanıza olanak tanır.
Web siteniz için dergilerden ilham alan mükemmel düzeni elde etmek için farklı ızgara yapılandırmaları ve stillerini deneyin.
