S peščico slogov lahko uporabite to privlačno, prilagodljivo postavitev za številne vrste vsebine strani.

CSS vam ponuja veliko prilagodljivosti za oblikovanje privlačnih, odzivnih postavitev. Postavitev v slogu revije organizira mešano besedilno in slikovno vsebino v privlačni, oko privlačni obliki, zaradi česar je priljubljena izbira.

Mreža CSS vam ponuja orodja in natančen nadzor, ki jih potrebujete za doseganje te postavitve, zato je to odlična tehnika za učenje.

Kaj so postavitve v slogu revij?

Postavitve v slogu revij uporabljajo mrežo podobno strukturo za razporeditev vsebine v stolpce in vrstice.

Odlični so za prikazovanje različnih vrst vsebine, kot so članki, slike in oglasi, na organiziran in privlačen način.

Razumevanje mreže CSS

CSS Grid je robustno orodje za postavitev, ki vam omogoča položaj elementov v dvodimenzionalnem prostoru, kar olajša ustvarite stolpce in vrstice.

Pri tej vrsti postavitve prideta v poštev dve primarni komponenti: mrežni vsebnik, odgovoren za definiranje mrežne strukture, in mrežni elementi, ki so podrejeni elementi vsebnika.

instagram viewer

Tukaj je preprost primer, kako lahko uporabite CSS Grid za ustvarjanje mreže 3x3:

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

Ta koda definira mrežni vsebnik s tremi stolpci enake širine in razmikom 20 slikovnih pik med elementi. Tukaj je rezultat:

Nastavitev strukture HTML

Za postavitev v slogu revije boste potrebovali dobro strukturiran dokument HTML. Razmislite uporabo semantičnih elementov za organiziranje vaše vsebine kot

in
. Tukaj je dobro izhodišče:

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

Definiranje mrežnega vsebnika

Če želite ustvariti mrežo za postavitev v slogu revije, dodajte to kodo CSS:

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

Ta CSS določa, da element vsebnika, .postavitev revije, je mrežni vsebnik, ki uporablja deklaracijo prikaz: mreža.

Lastnosti grid-template-columns in grid-template-rows uporabljajo kombinacijo ponovite, samodejno prilagajanje, in minmax. Ti zagotavljajo, da so širine stolpcev in višine vrstic najmanj 250 slikovnih pikin v vsako se prilega čim več predmetov.

Postavljanje elementov mreže

Zdaj oblikujte vsak članek in njegovo vsebino, da ustvarite privlačne elemente v slogu sličic:

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

Na tej točki bi morala biti vaša spletna stran videti nekako takole:

Ustvarjanje postavitev v slogu revije

Če želite doseči pravi videz v slogu revije, dodajte sloge CSS, ki bodo zajemali elemente članka v poljubnem vrstnem redu, kot ga želite:

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

Vaša stran bi morala zdaj izgledati takole:

Odzivno oblikovanje z mrežo CSS

Ena od prednosti CSS Grid je njegova inherentna odzivnost. Ti lahko uporabite medijske poizvedbe za prilagoditev postavitve za različne velikosti zaslona. Na primer:

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

Te medijske poizvedbe preklapljajo med več definicijami postavitve, da kar najbolje ustrezajo velikosti zaslona naprave. Vaša končna postavitev se bo prilagodila različnim velikostim:

Preoblikovanje vaših postavitev z mrežo CSS

CSS Grid je prilagodljivo orodje, ki ga lahko uporabite za ustvarjanje postavitev v slogu revij, ki se prilagajajo različnim velikostim zaslona. Omogoča vam definiranje mrežnih struktur, umeščanje elementov in prilagajanje postavitev.

Eksperimentirajte z različnimi konfiguracijami in slogi mreže, da dosežete popolno postavitev, ki jo navdihuje revija, za vaše spletno mesto.