CSS gir deg mye fleksibilitet til å designe tiltalende, responsive layouter. En layout i magasinstil organiserer blandet tekst- og bildeinnhold i et attraktivt, iøynefallende format, noe som gjør det til et populært valg.
CSS Grid gir deg verktøyene og den finkornede kontrollen du trenger for å oppnå denne layouten, så det er en flott teknikk å lære.
Innholdsfortegnelse
Hva er layout i magasinstil?
Oppsett i magasinstil bruker en rutenettlignende struktur for å ordne innhold i kolonner og rader.
De er flotte for å vise forskjellige typer innhold som artikler, bilder og annonser på en organisert og tiltalende måte.
Forstå CSS Grid
CSS Grid er et robust layoutverktøy som lar deg plassere elementer i todimensjonalt rom, noe som gjør det enkelt å lage kolonner og rader.
Med denne typen layout spiller to primære komponenter inn: rutenettbeholderen, ansvarlig for å definere rutenettets struktur, og rutenettelementene, som er underelementene til beholderen.
Her er et enkelt eksempel på hvordan du kan bruke CSS Grid til å lage 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 kolonner med samme bredde og et gap på 20 px mellom elementene. Her er resultatet:
Sette opp HTML-strukturen
For en layout i magasinstil trenger du et godt strukturert HTML-dokument. Vurder å bruke semantiske elementer for å organisere innholdet ditt som
<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>
Definere rutenettbeholderen
For å lage et rutenett for layout i magasinstil, legg til 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-en spesifiserer at containerelementet, .magazine-layout, er en gridcontainer som bruker deklarasjonsvisningen: grid.
Egenskapene grid-mal-kolonner og grid-mal-rader bruker en kombinasjon av repetisjon, auto-tilpasning og minmaks. Disse sikrer at kolonnebredder og radhøyder er minst 250 px, og så mange elementer som mulig passer inn i hver.
Plassering av rutenettelementer
Stil nå hver artikkel og dens innhold for å lage 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 tidspunktet skal nettsiden din se omtrent slik ut:
Lage oppsett i magasinstil
For å oppnå et ekte magasinstil-utseende, legg til CSS-stiler for å dekke artikkelelementene i hvilken som helst rekkefølge du ønsker:
.article:nth-child(1) {
grid-column: 1 / span 3;
}.article:nth-child(4) {
grid-column: 2 / span 2;
}
Siden din skal nå se slik ut:
Responsiv design med CSS Grid
En av fordelene med CSS Grid er dens iboende respons. Du kan bruke mediespørringer til å 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 mediespørringene bytter mellom flere layoutdefinisjoner for å passe best til enhetens skjermstørrelse. Din endelige layout vil tilpasse seg forskjellige størrelser:
Transformere layoutene dine med CSS Grid
CSS Grid er et fleksibelt verktøy du kan bruke til å lage layouter i magasinstil som tilpasser seg forskjellige skjermstørrelser. Den lar deg definere rutenettstrukturer, plassere elementer og justere oppsett.
Eksperimenter med forskjellige rutenettkonfigurasjoner og -stiler for å oppnå den perfekte magasin-inspirerte layouten for nettstedet ditt.