Med en håndfuld stilarter kan du bruge dette attraktive, fleksible layout til mange typer sideindhold.
CSS giver dig masser af fleksibilitet til at designe tiltalende, responsive layouts. Et layout i magasinstil organiserer blandet tekst- og billedindhold i et attraktivt, iøjnefaldende format, hvilket gør det til et populært valg.
CSS Grid giver dig de værktøjer og den finkornede kontrol, du skal bruge for at opnå dette layout, så det er en fantastisk teknik at lære.
Hvad er layout i magasinstil?
Layout i magasinstil bruger en gitterlignende struktur til at arrangere indhold i kolonner og rækker.
De er gode til at vise forskellige typer indhold som artikler, billeder og annoncer på en organiseret og tiltalende måde.
Forståelse af CSS Grid
CSS Grid er et robust layoutværktøj, der giver dig mulighed for placere elementer i todimensionelt rum, hvilket gør det nemt at oprette kolonner og rækker.
Med denne type layout kommer to primære komponenter i spil: gitterbeholderen, der er ansvarlig for at definere gitterets struktur, og gitterelementerne, som er containerens underordnede elementer.
Her er et simpelt eksempel på, hvordan du kan bruge CSS Grid til at oprette et 3x3-gitter:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
Denne kode definerer en gitterbeholder med tre kolonner af samme bredde og et 20px mellemrum mellem elementer. Her er resultatet:
Opsætning af HTML-strukturen
For et layout i magasinstil skal du bruge et velstruktureret HTML-dokument. Overveje bruge semantiske elementer til at organisere dit indhold synes godt om
<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>
Definition af gitterbeholderen
For at oprette et gitter til dit layout i magasinstil skal du tilføje følgende CSS-kode:
.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;
}
Denne CSS specificerer, at containerelementet, .magasin-layout, er en gitterbeholder, der bruger erklæringen display: gitter.
Egenskaberne gitter-skabelon-kolonner og gitter-skabelon-rækker bruger en kombination af gentage, auto-tilpasning, og minmax. Disse sikrer, at kolonnebredder og rækkehøjder er mindst 250 px, og så mange ting som muligt passer i hver.
Placering af gitterelementer
Stil nu hver artikel og dens indhold for at skabe attraktive thumbnail-elementer:
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;
}
På dette tidspunkt skulle din webside se noget i retning af følgende:
Oprettelse af layout i magasinstil
For at opnå et ægte look i magasinstil skal du tilføje CSS-stile til at spænde over artiklens elementer i den rækkefølge, du ønsker:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
Din side skulle nu se sådan ud:
Responsivt design med CSS Grid
En af fordelene ved CSS Grid er dets iboende lydhørhed. Du kan bruge medieforespørgsler til at justere layoutet til forskellige skærmstørrelser. For eksempel:
/* 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;
}
}
Disse medieforespørgsler skifter mellem flere layoutdefinitioner, så de passer bedst til enhedens skærmstørrelse. Dit endelige layout vil tilpasse sig forskellige størrelser:
Transformere dine layouts med CSS Grid
CSS Grid er et fleksibelt værktøj, du kan bruge til at skabe layouts i magasinstil, der tilpasser sig forskellige skærmstørrelser. Det lader dig definere gitterstrukturer, placere elementer og justere layouts.
Eksperimenter med forskellige gitterkonfigurationer og stilarter for at opnå det perfekte magasin-inspirerede layout til din hjemmeside.
