CSS gir deg enestående frihet til å designe engasjerende og fleksible oppsett. Et oppsett i magasinformat fremhever en blanding av tekst og bilder på en estetisk tiltalende og iøynefallende måte, noe som gjør det til et populært valg for mange nettsider.
CSS Grid gir deg de nødvendige verktøyene og detaljstyringen for å skape dette oppsettet, noe som gjør det til en verdifull ferdighet å lære.
Hva kjennetegner et magasinlignende oppsett?
Magasinlignende oppsett benytter en rutenettstruktur for å organisere innhold i kolonner og rader.
De er ideelle for å presentere variert innhold som artikler, bilder og annonser på en oversiktlig og visuelt attraktiv måte.
Grunnleggende om CSS Grid
CSS Grid er et kraftig layoutverktøy som lar deg posisjonere elementer i et todimensjonalt rom, noe som forenkler opprettelsen av kolonner og rader.
Denne typen oppsett involverer to hovedkomponenter: rutenettbeholderen, som definerer selve rutenettets struktur, og rutenettelementene, som er barn av beholderen.
Her er et enkelt eksempel på hvordan CSS Grid kan brukes til å generere et 3×3 rutenett:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
Denne koden definerer en rutenettbeholder med tre like brede kolonner og en avstand på 20 piksler mellom elementene. Resultatet vises nedenfor:
Oppsett av HTML-strukturen
For et magasinlignende oppsett, kreves et velstrukturert HTML-dokument. Semantiske elementer som <article> og <section> kan brukes for å organisere innholdet. Her er et solid utgangspunkt:
<section class="magazine-layout">
<article>
<img src="https://source.unsplash.com/random/?city,night" />
<p>Tittel på artikkel</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?city,day" />
<p>Tittel på artikkel</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?animal" />
<p>Tittel på artikkel</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?book" />
<p>Tittel på artikkel</p>
</article>
<article>
<img src="https://source.unsplash.com/random/?food" />
<p>Tittel på artikkel</p>
</article>
</section>
Definere rutenettbeholderen
For å skape et rutenett for et magasinlignende oppsett, bruk følgende CSS-kode:
.magazine-layout {
height: 100%;
max-width: 130rem;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}
Denne CSS-koden spesifiserer at container-elementet, med klassen .magazine-layout, er en rutenettbeholder ved bruk av display: grid.
Egenskapene grid-template-columns og grid-template-rows bruker en kombinasjon av repeat, auto-fit, og minmax. Dette sørger for at kolonnene og radene er minst 250 piksler brede/høye, og at så mange elementer som mulig får plass i hver.
Plassering av rutenettelementer
Style nå hver artikkel og dens innhold for å skape attraktive miniatyrbilder:
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;
}
På dette stadiet skal nettsiden din se omtrent slik ut:
Skape et magasinlignende oppsett
For å oppnå et genuint magasinlignende utseende, legg til CSS-stiler for å plassere artikkelelementene i den rekkefølgen du ønsker:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
Nettsiden din skal nå fremstå slik:
Responsiv design med CSS Grid
En av fordelene med CSS Grid er dens iboende responsivitet. Du kan bruke medieforespørsler for å justere oppsettet for forskjellige skjermstørrelser. For eksempel:
@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 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;
}
}
Disse medieforespørslene veksler mellom flere layoutdefinisjoner for å best tilpasse seg enhetens skjermstørrelse. Det endelige oppsettet ditt vil tilpasse seg forskjellige størrelser.
Forvandle layoutene dine med CSS Grid
CSS Grid er et fleksibelt verktøy du kan bruke for å skape magasinlignende oppsett som tilpasser seg forskjellige skjermstørrelser. Det gir deg mulighet til å definere rutenettstrukturer, plassere elementer og justere oppsettet.
Eksperimenter med forskjellige rutenettkonfigurasjoner og stiler for å oppnå det perfekte magasin-inspirerte oppsettet for ditt nettsted.