Använda CSS Grid för layouter i tidskriftsstil

CSS ger dig mycket flexibilitet för att designa tilltalande, lyhörda layouter. En layout i tidningsstil organiserar blandat text- och bildinnehåll i ett attraktivt, iögonfallande format, vilket gör det till ett populärt val.

CSS Grid ger dig de verktyg och den finkorniga kontrollen du behöver för att uppnå denna layout, så det är en fantastisk teknik att lära sig.

Vad är layouter i tidskriftsstil?

Tidskriftslayouter använder en rutnätsliknande struktur för att ordna innehåll i kolumner och rader.

De är utmärkta för att visa olika typer av innehåll som artiklar, bilder och annonser på ett organiserat och tilltalande sätt.

Förstå CSS Grid

CSS Grid är ett robust layoutverktyg som låter dig placera element i tvådimensionellt utrymme, vilket gör det enkelt att skapa kolumner och rader.

Med den här typen av layout spelar två primära komponenter in: rutnätsbehållaren, ansvarig för att definiera rutnätets struktur, och rutnätsobjekten, som är behållarens underordnade element.

Här är ett enkelt exempel på hur du kan använda CSS Grid för att skapa ett 3×3-rutnät:

 .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-item {
    background-color: #f76a6a;
    padding: 20px;
}

Den här koden definierar en rutnätsbehållare med tre kolumner med samma bredd och ett 20px gap mellan objekt. Här är resultatet:

Konfigurera HTML-strukturen

För en layout i tidningsstil behöver du ett välstrukturerat HTML-dokument. Överväg att använda semantiska element för att organisera ditt innehåll som och . Här är en bra utgångspunkt:

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

Definiera rutnätsbehållaren

Lägg till följande CSS-kod för att skapa ett rutnät för din layout i tidningsstil:

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

Denna CSS anger att containerelementet, .magazine-layout, är en rutnätsbehållare som använder deklarationsdisplayen: grid.

Egenskaperna grid-template-columns och grid-template-rows använder en kombination av repeat, auto-fit och minmax. Dessa säkerställer att kolumnbredder och radhöjder är minst 250px, och att så många objekt som möjligt passar i varje.

Placera rutnätsobjekt

Stil nu varje artikel och dess innehåll för att skapa attraktiva 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;
}

Vid det här laget bör din webbsida se ut ungefär så här:

Skapa layouter i tidskriftsstil

För att få ett äkta utseende i tidningsstil, lägg till CSS-stilar som spänner över artikelelementen i vilken ordning du vill:

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

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

Din sida bör nu se ut så här:

Responsiv design med CSS Grid

En av fördelarna med CSS Grid är dess inneboende lyhördhet. Du kan använda mediafrågor för att justera layouten för olika skärmstorlekar. Till exempel:

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

Dessa mediefrågor växlar mellan flera layoutdefinitioner för att bäst passa enhetens skärmstorlek. Din slutliga layout kommer att anpassas till olika storlekar:

Förvandla dina layouter med CSS Grid

CSS Grid är ett flexibelt verktyg som du kan använda för att skapa layouter i tidningsstil som anpassar sig till olika skärmstorlekar. Det låter dig definiera rutnätsstrukturer, placera objekt och justera layouter.

Experimentera med olika rutnätskonfigurationer och stilar för att uppnå den perfekta tidningsinspirerade layouten för din webbplats.