Met een handvol stijlen kunt u deze aantrekkelijke, flexibele lay-out voor vele soorten pagina-inhoud gebruiken.

CSS biedt u voldoende flexibiliteit om aantrekkelijke, responsieve lay-outs te ontwerpen. Een lay-out in tijdschriftstijl organiseert gemengde tekst- en beeldinhoud in een aantrekkelijk, opvallend formaat, waardoor het een populaire keuze is.

CSS Grid geeft je de tools en de fijnmazige controle die je nodig hebt om deze lay-out te realiseren, dus het is een geweldige techniek om te leren.

Wat zijn lay-outs in tijdschriftstijl?

Lay-outs in tijdschriftstijl gebruiken een rasterachtige structuur om de inhoud in kolommen en rijen te ordenen.

Ze zijn ideaal voor het op een georganiseerde en aantrekkelijke manier weergeven van verschillende soorten inhoud, zoals artikelen, afbeeldingen en advertenties.

CSS-raster begrijpen

CSS Grid is een robuuste lay-outtool waarmee u positioneer elementen in een tweedimensionale ruimte, waardoor het gemakkelijk wordt kolommen en rijen maken.

Bij dit type lay-out spelen twee primaire componenten een rol: de rastercontainer, die verantwoordelijk is voor het definiëren van de rasterstructuur, en de rasteritems, die de onderliggende elementen van de container zijn.

instagram viewer

Hier is een eenvoudig voorbeeld van hoe u CSS Grid kunt gebruiken om een ​​3x3 raster te maken:

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

Deze code definieert een rastercontainer met drie kolommen van gelijke breedte en een opening van 20 px tussen de items. Hier is het resultaat:

Het opzetten van de HTML-structuur

Voor een lay-out in tijdschriftstijl heeft u een goed gestructureerd HTML-document nodig. Overwegen gebruik semantische elementen om uw inhoud te ordenen leuk vinden

En
. Hier is een goed startpunt:

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

De rastercontainer definiëren

Voeg de volgende CSS-code toe om een ​​raster voor uw lay-out in tijdschriftstijl te maken:

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

Deze CSS specificeert dat het containerelement, .tijdschrift-indeling, is een rastercontainer die de declaratie gebruikt weergave: raster.

De eigenschappen grid-template-kolommen en grid-template-rijen gebruiken een combinatie van herhalen, automatisch passend, En minmax. Deze zorgen ervoor dat de kolombreedte en rijhoogte minimaal zijn 250px, en er passen zoveel mogelijk items in.

Rasteritems plaatsen

Stijl nu elk artikel en de inhoud ervan om aantrekkelijke miniatuurstijlelementen te creëren:

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

Op dit punt zou uw webpagina er ongeveer als volgt uit moeten zien:

Lay-outs in tijdschriftstijl maken

Om een ​​echte tijdschriftachtige uitstraling te krijgen, voegt u CSS-stijlen toe om de artikelelementen in elke gewenste volgorde te omspannen:

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

Uw pagina zou er nu als volgt uit moeten zien:

Responsief ontwerp met CSS-raster

Een van de voordelen van CSS Grid is het inherente reactievermogen. Jij kan gebruik mediaquery's om de lay-out aan te passen voor verschillende schermformaten. Bijvoorbeeld:

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

Deze mediaquery's schakelen tussen meerdere lay-outdefinities om het beste bij de schermgrootte van het apparaat te passen. Uw uiteindelijke lay-out zal zich aanpassen aan verschillende formaten:

Transformeer uw lay-outs met CSS-raster

CSS Grid is een flexibel hulpmiddel dat u kunt gebruiken om lay-outs in tijdschriftstijl te maken die zich aanpassen aan verschillende schermformaten. Hiermee kunt u rasterstructuren definiëren, items plaatsen en lay-outs aanpassen.

Experimenteer met verschillende rasterconfiguraties en -stijlen om de perfecte, op tijdschriften geïnspireerde lay-out voor uw website te bereiken.