S niekoľkými štýlmi môžete použiť toto atraktívne a flexibilné rozloženie pre mnoho typov obsahu stránky.

CSS vám poskytuje dostatok flexibility pri navrhovaní príťažlivých a citlivých rozložení. Rozloženie v štýle časopisu organizuje zmiešaný textový a obrázkový obsah v atraktívnom, pútavom formáte, vďaka čomu je obľúbenou voľbou.

CSS Grid vám poskytuje nástroje a jemné ovládanie, ktoré potrebujete na dosiahnutie tohto rozloženia, takže je to skvelá technika, ktorú sa môžete naučiť.

Čo sú rozloženia v štýle časopisov?

Rozloženia v štýle časopisu používajú štruktúru podobnú mriežke na usporiadanie obsahu do stĺpcov a riadkov.

Sú skvelé na zobrazovanie rôznych typov obsahu, ako sú články, obrázky a reklamy, organizovaným a príťažlivým spôsobom.

Pochopenie mriežky CSS

CSS Grid je robustný nástroj na rozloženie, ktorý vám umožňuje umiestnenie prvkov v dvojrozmernom priestore, čo uľahčuje vytvárať stĺpce a riadky.

Pri tomto type rozloženia vstupujú do hry dva primárne komponenty: kontajner mriežky, zodpovedný za definovanie štruktúry mriežky, a položky mriežky, ktoré sú podriadenými prvkami kontajnera.

instagram viewer

Tu je jednoduchý príklad, ako môžete použiť mriežku CSS na vytvorenie mriežky 3x3:

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

Tento kód definuje mriežkový kontajner s tromi stĺpcami rovnakej šírky a 20px medzerou medzi položkami. Tu je výsledok:

Nastavenie štruktúry HTML

Na rozloženie v štýle časopisu budete potrebovať dobre štruktúrovaný dokument HTML. Zvážte pomocou sémantických prvkov na usporiadanie obsahu Páči sa mi to

a
. Tu je dobrý východiskový bod:

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

Definovanie mriežkového kontajnera

Ak chcete vytvoriť mriežku pre rozloženie v štýle časopisu, pridajte nasledujúci kód 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;
}

Tento CSS určuje, že prvok kontajnera, .časopis-rozloženie, je mriežkový kontajner využívajúci deklaráciu displej: mriežka.

Vlastnosti grid-template-columns a grid-template-rows používajú kombináciu opakovať, automatické prispôsobenie, a minmax. Tie zabezpečujú, že šírky stĺpcov a výšky riadkov sú minimálne 250 pixelova do každého sa zmestí čo najviac položiek.

Umiestnenie položiek mriežky

Teraz upravte štýl každého článku a jeho obsahu, aby ste vytvorili atraktívne prvky v štýle miniatúr:

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

V tomto bode by vaša webová stránka mala vyzerať asi takto:

Vytváranie rozložení v štýle časopisu

Ak chcete dosiahnuť skutočný vzhľad v štýle magazínu, pridajte štýly CSS, ktoré rozložia prvky článku v ľubovoľnom poradí:

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

Vaša stránka by teraz mala vyzerať takto:

Responzívny dizajn s mriežkou CSS

Jednou z výhod CSS Grid je jeho prirodzená odozva. Môžeš použite mediálne dopyty na úpravu rozloženia pre rôzne veľkosti obrazovky. Napríklad:

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

Tieto mediálne dotazy prepínajú medzi viacerými definíciami rozloženia, aby čo najlepšie vyhovovali veľkosti obrazovky zariadenia. Vaše konečné rozloženie sa prispôsobí rôznym veľkostiam:

Transformujte svoje rozloženia pomocou mriežky CSS

CSS Grid je flexibilný nástroj, ktorý môžete použiť na vytváranie rozložení v štýle časopisu, ktoré sa prispôsobia rôznym veľkostiam obrazovky. Umožňuje vám definovať štruktúry mriežky, umiestňovať položky a upravovať rozloženia.

Experimentujte s rôznymi konfiguráciami a štýlmi mriežky, aby ste dosiahli dokonalé rozloženie svojej webovej stránky inšpirované časopismi.