Dengan beberapa gaya, Anda dapat menggunakan tata letak yang menarik dan fleksibel ini untuk berbagai jenis konten halaman.

CSS memberikan banyak fleksibilitas bagi Anda untuk mendesain tata letak yang menarik dan responsif. Tata letak bergaya majalah mengatur konten campuran teks dan gambar dalam format yang menarik dan menarik, menjadikannya pilihan populer.

CSS Grid memberi Anda alat dan kontrol menyeluruh yang Anda perlukan untuk mencapai tata letak ini, jadi ini adalah teknik yang bagus untuk dipelajari.

Apa itu Tata Letak Bergaya Majalah?

Tata letak bergaya majalah menggunakan struktur seperti kisi untuk menyusun konten dalam kolom dan baris.

Mereka bagus untuk menampilkan berbagai jenis konten seperti artikel, gambar, dan iklan dengan cara yang terorganisir dan menarik.

Memahami CSS Grid

CSS Grid adalah alat tata letak tangguh yang memungkinkan Anda elemen posisi dalam ruang dua dimensi, membuatnya mudah untuk membuat kolom dan baris.

Dengan jenis tata letak ini, dua komponen utama berperan: wadah kisi, yang bertanggung jawab untuk menentukan struktur kisi, dan item kisi, yang merupakan elemen turunan wadah.

instagram viewer

Berikut ini contoh sederhana bagaimana Anda dapat menggunakan CSS Grid untuk membuat grid 3x3:

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}

Kode ini mendefinisikan wadah kisi dengan tiga kolom dengan lebar yang sama dan jarak antar item 20 piksel. Inilah hasilnya:

Menyiapkan Struktur HTML

Untuk tata letak bergaya majalah, Anda memerlukan dokumen HTML yang terstruktur dengan baik. Mempertimbangkan menggunakan elemen semantik untuk mengatur konten Anda menyukai

Dan
. Inilah titik awal yang baik:

<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>

Mendefinisikan Kontainer Grid

Untuk membuat grid untuk layout bergaya majalah Anda, tambahkan kode CSS berikut:

.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;
}

CSS ini menetapkan bahwa elemen wadah, .tata letak majalah, adalah wadah grid yang menggunakan deklarasi tampilan: kisi.

Properti grid-template-columns dan grid-template-rows menggunakan kombinasi mengulang, pas otomatis, Dan minmaks. Ini memastikan bahwa lebar kolom dan tinggi baris setidaknya 250 piksel, dan sebanyak mungkin item yang muat di masing-masing item.

Menempatkan Item Grid

Sekarang beri gaya pada setiap artikel dan isinya untuk membuat elemen bergaya thumbnail yang menarik:

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;
}

Pada titik ini, halaman web Anda akan terlihat seperti berikut:

Membuat Tata Letak Bergaya Majalah

Untuk mendapatkan tampilan gaya majalah yang sebenarnya, tambahkan gaya CSS untuk merentangkan elemen artikel dalam urutan apa pun yang Anda inginkan:

.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}

Halaman Anda sekarang akan terlihat seperti ini:

Desain Responsif Dengan CSS Grid

Salah satu kelebihan CSS Grid adalah daya tanggap yang melekat. Kamu bisa gunakan kueri media untuk menyesuaikan tata letak untuk ukuran layar yang berbeda. Misalnya:

/* 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;
 }
}

Kueri media ini beralih di antara beberapa definisi tata letak agar paling sesuai dengan ukuran layar perangkat. Tata letak akhir Anda akan beradaptasi dengan ukuran yang berbeda:

Mengubah Tata Letak Anda Dengan CSS Grid

CSS Grid adalah alat fleksibel yang dapat Anda gunakan untuk membuat tata letak bergaya majalah yang menyesuaikan dengan berbagai ukuran layar. Ini memungkinkan Anda menentukan struktur kisi, menempatkan item, dan menyesuaikan tata letak.

Bereksperimenlah dengan konfigurasi dan gaya kisi yang berbeda untuk mendapatkan tata letak sempurna yang terinspirasi majalah untuk situs web Anda.