Home-theater-designers
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.
MUO-video van de dag SCROLL OM DOOR TE GAAN MET INHOUD
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.
hoe een tweede harde schijf toe te voegen?
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.
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 zoals
<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>
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;
}
.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;
}
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.