Menggunakan Grid CSS untuk Reka Letak Gaya Majalah

Pembaca seperti anda membantu menyokong MUO. Apabila anda membuat pembelian menggunakan pautan di tapak kami, kami mungkin mendapat komisen ahli gabungan. Baca Lagi.

CSS menyediakan banyak fleksibiliti untuk anda mereka bentuk reka letak yang menarik dan responsif. Reka letak gaya majalah menyusun kandungan teks dan imej bercampur dalam format yang menarik dan menarik perhatian, menjadikannya pilihan yang popular.

Video MUO pada hari itu SCROLL UNTUK MENERUSKAN KANDUNGAN

Grid CSS memberi anda alatan dan kawalan terperinci yang anda perlukan untuk mencapai reka letak ini, jadi teknik ini bagus untuk dipelajari.

apa itu kotak tv android

Apakah Susun Atur Gaya Majalah?

Reka letak gaya majalah menggunakan struktur seperti grid untuk menyusun kandungan dalam lajur dan baris.

Ia bagus untuk memaparkan pelbagai jenis kandungan seperti artikel, imej dan iklan dengan cara yang teratur dan menarik.

Memahami Grid CSS

Grid CSS ialah alat susun atur yang mantap yang membolehkan anda meletakkan elemen dalam ruang dua dimensi , menjadikannya mudah untuk buat lajur dan baris .

Dengan reka letak jenis ini, dua komponen utama dimainkan: bekas grid, bertanggungjawab untuk menentukan struktur grid, dan item grid, yang merupakan elemen anak bekas.

Berikut ialah contoh mudah bagaimana anda boleh menggunakan Grid CSS untuk mencipta grid 3x3:

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

Kod ini mentakrifkan bekas grid dengan tiga lajur yang sama lebar dan jurang 20px antara item. Inilah hasilnya:

Menyediakan Struktur HTML

Untuk reka letak gaya majalah, anda memerlukan dokumen HTML yang tersusun dengan baik. Pertimbangkan menggunakan elemen semantik untuk menyusun kandungan anda seperti

dan

. Inilah titik permulaan yang baik:

 <body> 
    <section class="magazine-layout"> 
        <article> 
            <img src="https://source.unsplash.com/random/?city,night" /> 
            <p>Some Article Title</p> 
        </article> 
 
        <article>  
            <img src="https://source.unsplash.com/random/?city,day" /> 
            <p>Some Article Title</p> 
        </article> 
 
        <article>  
            <img src="https://source.unsplash.com/random/?animal" /> 
            <p>Some Article Title</p> 
        </article> 
 
        <article> 
            <img src="https://source.unsplash.com/random/?book" /> 
            <p>Some Article Title</p> 
        </article> 
 
        <article> 
            <img src="https://source.unsplash.com/random/?food" /> 
            <p>Some Article Title</p> 
        </article> 
    </section> 
</body>

Mentakrifkan Bekas Grid

Untuk membuat grid bagi reka letak gaya majalah anda, tambahkan kod 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 menentukan bahawa elemen kontena, .susun atur majalah , ialah bekas grid menggunakan pengisytiharan paparan: grid .

Sifat grid-template-lajur dan grid-template-rows menggunakan gabungan ulang , muat secara automatik , dan minmax . Ini memastikan bahawa lebar lajur dan ketinggian baris adalah sekurang-kurangnya 250px , dan seberapa banyak item yang boleh dimuatkan dalam setiap item.

Meletakkan Item Grid

Sekarang gayakan setiap artikel dan kandungannya untuk mencipta elemen gaya lakaran kecil yang menarik:

 article { 
    overflow: hidden; 
    border-radius: 0.5rem; 
    position: relative; 
    color: #fff; 
} 
 
.article img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
    max-height: 400px; 
} 
 
.article p { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    padding: 2rem; 
    background: #333333c1; 
    font-size: 2rem; 
    border-radius: 0.5rem; 
}

Pada ketika ini, halaman web anda sepatutnya kelihatan seperti berikut:

Reka letak majalah sebelum merentangi elemen grid

Mencipta Reka Letak Gaya Majalah

Untuk mencapai rupa gaya majalah yang sebenar, tambahkan gaya CSS untuk merangkumi elemen artikel dalam sebarang susunan yang anda inginkan:

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

Halaman anda kini sepatutnya kelihatan seperti ini:

Susun atur majalah selepas merentasi elemen grid

Reka Bentuk Responsif Dengan Grid CSS

Salah satu kelebihan CSS Grid ialah responsif yang wujud. Awak boleh gunakan pertanyaan media untuk melaraskan reka letak untuk saiz skrin yang berbeza. Sebagai contoh:

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

Pertanyaan media ini bertukar antara berbilang takrifan reka letak agar sesuai dengan saiz skrin peranti. Reka letak akhir anda akan disesuaikan dengan saiz yang berbeza:

Mengubah Reka Letak Anda Dengan Grid CSS

Grid CSS ialah alat fleksibel yang boleh anda gunakan untuk membuat reka letak gaya majalah yang melaraskan kepada saiz skrin yang berbeza. Ia membolehkan anda menentukan struktur grid, meletakkan item dan melaraskan reka letak.

bagaimana melakukan panggilan persidangan di iphone

Eksperimen dengan konfigurasi dan gaya grid yang berbeza untuk mencapai reka letak yang diilhamkan oleh majalah yang sempurna untuk tapak web anda.