Seda atraktiivset ja paindlikku paigutust saate kasutada mitut tüüpi lehe sisu jaoks, kasutades mõningaid stiile.

CSS pakub teile palju paindlikkust atraktiivsete ja tundlike paigutuste kujundamiseks. Ajakirjastiilis küljendus korraldab teksti ja pildi segasisu atraktiivses ja pilkupüüdvas vormingus, muutes selle populaarseks valikuks.

CSS Grid annab teile selle paigutuse saavutamiseks vajalikud tööriistad ja täpse kontrolli, seega on see suurepärane tehnika õppimiseks.

Mis on ajakirja stiilis küljendused?

Ajakirjastiilis küljendused kasutavad sisu veergudesse ja ridadesse paigutamiseks ruudustikulaadset struktuuri.

Need sobivad suurepäraselt erinevat tüüpi sisu (nt artiklite, piltide ja reklaamide) organiseeritud ja ahvatleval viisil kuvamiseks.

CSS-võrgust arusaamine

CSS Grid on tugev paigutustööriist, mis võimaldab teil positsioonielemendid kahemõõtmelises ruumis, muutes selle lihtsaks luua veerge ja ridu.

Seda tüüpi paigutuse puhul tulevad mängu kaks peamist komponenti: ruudustiku konteiner, mis vastutab ruudustiku struktuuri määratlemise eest, ja ruudustiku üksused, mis on konteineri alamelemendid.

Siin on lihtne näide selle kohta, kuidas saate 3x3 ruudustiku loomiseks kasutada CSS-võrku.

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

See kood määratleb ruudustiku konteineri, millel on kolm võrdse laiusega veergu ja üksuste vahel on 20 pikslit. Siin on tulemus:

HTML-i struktuuri seadistamine

Ajakirja stiilis küljenduse jaoks vajate hästi struktureeritud HTML-dokumenti. Kaaluge semantiliste elementide kasutamine sisu korrastamiseks meeldib

ja
. Siin on hea lähtepunkt:

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

Võrgukonteineri määratlemine

Ajakirjalaadse paigutuse jaoks ruudustiku loomiseks lisage järgmine CSS-kood:

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

See CSS määrab, et konteineri element, .magazine-layout, on deklaratsiooni kasutav võrgukonteiner ekraan: ruudustik.

Atribuudid grid-template-columns ja grid-template-rows kasutavad kombinatsiooni korda, automaatne sobivusja minmax. Need tagavad, et veergude laiused ja ridade kõrgused on vähemalt 250 pikslitja igasse mahub võimalikult palju üksusi.

Ruudustiku elementide paigutamine

Nüüd kujundage iga artikli ja selle sisu stiil, et luua atraktiivseid pisipildi stiilis elemente.

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

Sel hetkel peaks teie veebileht välja nägema umbes selline:

Ajakirjastiilis paigutuste loomine

Tõelise ajakirja stiilis välimuse saavutamiseks lisage CSS-i stiile, et hõlmata artikli elemente mis tahes soovitud järjekorras:

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

Teie leht peaks nüüd välja nägema selline:

Tundlik disain CSS-võrguga

Üks CSS Gridi eeliseid on selle loomupärane reageerimisvõime. Sa saad kasutage paigutuse kohandamiseks meediapäringuid erinevate ekraanisuuruste jaoks. Näiteks:

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

Need meediumipäringud lülituvad mitme paigutuse määratluse vahel, et need sobiksid kõige paremini seadme ekraani suurusega. Teie lõplik paigutus kohandub erinevate suurustega:

Paigutuste muutmine CSS-ruudustikuga

CSS Grid on paindlik tööriist, mille abil saate luua ajakirja stiilis paigutusi, mis kohanduvad erinevate ekraanisuurustega. See võimaldab teil määratleda ruudustiku struktuure, paigutada üksusi ja kohandada paigutusi.

Katsetage erinevate ruudustiku konfiguratsioonide ja stiilidega, et saavutada oma veebisaidile täiuslik ajakirjadest inspireeritud kujundus.