CSS Grid gebruiken voor lay-outs in tijdschriftstijl
CSS biedt veel flexibiliteit voor het ontwerpen van aantrekkelijke, responsieve lay-outs. Een lay-out in de vorm van een tijdschrift organiseert gemengde tekst- en beeldinhoud in een aantrekkelijke, opvallende indeling, waardoor het een populaire keuze is.
CSS Grid biedt ontwikkelaars een reeks instrumenten en een ingewikkeld controleniveau dat nodig is voor het maken van een dergelijke lay-out, waardoor het een waardevolle vaardigheden is om te verwerven.
Wat zijn lay-outs in tijdschriftstijl?
Tijdschriftachtige lay-outs gebruiken een gerasterd systeem voor het organiseren van inhoud in kolommen en rijen, waardoor het ontwerp er geordend uitziet.
Onze innovatieve sjablonen blinken uit in het gestructureerd en visueel aantrekkelijk presenteren van verschillende media, zoals tekst, beeldmateriaal en advertenties.
CSS Grid begrijpen
CSS Grid is een geavanceerde opmaakoplossing waarmee gebruikers elementen eenvoudig kunnen rangschikken binnen een tweedimensionaal vlak, waarbij het creëren van zowel kolom- als rijstructuren wordt vergemakkelijkt door de krachtige ruimtelijke organisatiemogelijkheden.
de rastercontainer, die het raamwerk van het raster vormt, en de rasteritems, die dienen als nakomelingen van de voornoemde container.
Zeker, hier is een elegante demonstratie van hoe je CSS Grid kunt gebruiken om een 3x3 rasterlay-out te genereren:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
De huidige code construeert een rastergebaseerde lay-out die bestaat uit drie horizontale secties, elk met een identieke breedte en met een consistente tussenruimte van twintig pixels tussen aangrenzende elementen. De resulterende visualisatie wordt hieronder weergegeven:
De HTML-structuur opzetten
Om een publicatie-achtig ontwerp te krijgen, is een georganiseerde HTML-structuur essentieel. Een benadering bestaat uit het gebruik van semantisch betekenisvolle tags zoals en voor het structureren van de inhoud. Een geschikte basis kan worden gevonden in het onderstaande voorbeeld:
<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
Om een raster te construeren voor een tijdschriftachtige lay-out, moet je de volgende CSS-styling gebruiken:
.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;
}
grid".
De eigenschappen grid-template-kolommen en grid-template-pagina's maken gebruik van een combinatie van herhaling, automatische herschaling en minimale/maximale beperkingen om te garanderen dat kolombreedten en rijhoogten niet minder dan 250 pixels meten terwijl er zoveel mogelijk elementen passen binnen elke respectieve dimensie.
Rasteritems plaatsen
Overweeg om de visuele aantrekkingskracht van artikelen te vergroten door ze te transformeren in opvallende miniatuurafbeeldingen die bekend staan als thumbnails.
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;
}
Na voltooiing van de hierboven beschreven stappen zou je website er ongeveer zo uit moeten zien:
Lay-outs in de vorm van een tijdschrift maken
Om een echt tijdschriftachtig uiterlijk te krijgen, gebruikt u CSS-styling om de artikelelementen naar wens te rangschikken:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
Je pagina zou er nu zo uit moeten zien:
Responsive Design With CSS Grid
Een van de voordelen van het gebruik van CSS Grid is de intrinsieke aanpasbaarheid, omdat ontwerpers en ontwikkelaars hiermee media queries kunnen gebruiken om de indeling van elementen aan te passen op basis van verschillende schermafmetingen. Door een dergelijke functie te implementeren, kan men ervoor zorgen dat de inhoud van hun website visueel aantrekkelijk en gebruiksvriendelijk blijft op een groot aantal apparaten met verschillende weergavemogelijkheden.
/* 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;
}
}
De bovengenoemde media queries maken gebruik van een verscheidenheid aan lay-out configuraties die zijn geoptimaliseerd voor verschillende schermafmetingen, en zorgen er zo voor dat je ontwerp responsief is en compatibel met verschillende apparaten.
Je browser ondersteunt de videotag niet.
Uw lay-outs transformeren met CSS Grid
Door CSS Grid te gebruiken, kunt u adaptieve, op tijdschriften geïnspireerde lay-outs maken die naadloos passen bij verschillende schermafmetingen. Met dit veelzijdige hulpmiddel kunnen gebruikers eenvoudig rastersystemen maken, elementen positioneren en indelingen aanpassen.
Verken verschillende rasterindelingen en esthetieken om een ideaal, op publicaties geïnspireerd ontwerp te maken voor je online aanwezigheid.