elementen worden onze rasteritems.

Een aantal panelen bevat tekst, maar de rest is voor onze komische afbeeldingen. We hebben hier twee opties: we kunnen onze afbeeldingen inline in de panelen plaatsen of afbeeldingen toevoegen via CSS. Ik doe dit laatste omdat het eenvoudiger controle over de plaatsing en de grootte van de afbeeldingen biedt, maar je zou kunnen stellen dat inline-afbeeldingen beter toegankelijk zouden zijn. Uw keuze.

2. Basisstijlen

Om de (pels) bal aan het rollen te krijgen, voegen we enkele stijlen toe om onze typografie en kleuren te dekken:

/ * basics * / body background: # f8f7f2; opvulling: 0 10%; lettertype: 100% / 1,5 'Kalam', cursief;  h1 marge: 0; regelhoogte: 1; opvulling: 10px; kleur: # 251b19;  p marge: 0; opvulling: 10px; kleur: # 251b19; lettergrootte: 1.2em; a color: # e56633;  a: hover text-decoration: none;  

Ik heb Kalam gekozen als het weblettertype van Google voor onze tekst: de handgeschreven stijl is perfect voor strips. Je moet het aansluiten in je CSS of via een link in je documentkop:

Kalam op Google Fonts

3. Ons raster

Eerst mobiel starten, we leggen dingen uit in één kolom met één paneel in elke rij:

.grid-1 display: grid; breedte: 100%; maximale breedte: 770 px; marge: 10% automatisch; rooster-sjabloon-kolommen: 1fr; grid-template-rijen: auto 200px 200px auto 200px 200px 200px auto 200px 200px auto; grid-gap: 25px; 

Als je terugkijkt op onze eerdere Grid-tutorials, zul je je dat herinneren roostervormige template-columns geeft aan hoeveel kolommen we hebben en hoe breed ze zullen zijn. roostervormige template-rijen doet hetzelfde voor rijen; hier definiëren we elf van hen. De afbeeldingen met afbeeldingen zijn 200 px hoog, degenen met tekst worden automatisch aangepast aan de inhoud. Tenslotte, roostervormige gap bepaalt onze rugmarge.

Laten we nu enkele algemene stijlen aan onze panelen toevoegen:

.paneel kleur: wit; achtergrondherhaling: geen herhaling; achtergrond-positie: middelpunt; achtergrondformaat: omslag; vakschaduw: 0px 0px 0px 5px # 251b19; 

De achtergrond eigenschappen hebben nog geen visuele impact, maar ze zullen net zo snel zijn als we wat achtergrondafbeeldingen toevoegen. En de box-shadow fungeert als een rand. Je kunt ook traditioneel gebruiken grens eigenschappen hier als je dat wilt, maar vak-schaduw geeft soms meer flexibiliteit.

Laten we eens kijken wat we tot nu toe hebben!

4. Cat Pictures

Waar is het internet voor gemaakt, toch? Ik heb een paar SVG-afbeeldingen voorbereid om aan de panelen toe te voegen, die ik een voor een doe:

.panel-1 background-image: url (cat-1.svg); 

Ziet er goed uit!

Maar ik wil geen grenzen rondom allemaal de panelen. Ik zal ze verwijderen (met vakschaduw: geen;) van degene die tekst bevatten, samen met de eerste afbeelding en de uiteindelijke afbeelding.

5. Media Queries

Deze afbeeldingen werken nog niet perfect; arme oude Barry krijgt een serieuze bijsnijding. Het is tijd om verder te kijken dan mobiel en ons raster te wijzigen voor grotere viewports. Laten we wat mediaquery's toevoegen; een op 400px en een op 600px (willekeurige cijfers, gebruik wat je maar wilt):

/ * media-query 1 * / @media alleen scherm en (min-breedte: 400px)  / * media-query 2 * / @media alleen scherm en (min-breedte: 600px) 

We zullen ze gebruiken om de rasterlay-out in elk geval te wijzigen.

/ * media query 1 * / @media only scherm en (min-width: 400px) .grid-1 grid-template-columns: repeat (2, 1fr); grid-template-rijen: auto 200px auto 200px 200px auto 200px auto;  / * media query 2 * / @media only scherm en (min-width: 600px) .grid-1 grid-template-columns: repeat (3, 1fr); grid-template-rijen: auto 200px 200px 200px auto; 

We gaan voor twee kolommen en acht rijen voor iets grotere schermen, dan drie kolommen en vijf rijen voor nog grotere.

Spanning

Nu we uit onze enkele kolombeperkingen zijn gebarsten, kunnen we een beetje creatiever zijn. We hebben bijvoorbeeld onze titel nodig om over de breedte van de hele strip te lopen. Hetzelfde geldt voor de panelen met tekst en de copyrightverklaring. Zelfs sommige afbeeldingen kunnen beter worden weergegeven in panelen op de volledige breedte. Dus we voegen deze gegevens toe aan de eerste van onze mediaquery's:

 .panel-title, .panel-3, .panel-6, .panel-7, .panel-copyright grid-column: span 2; 

Ik heb de typografie in een paar gevallen ook veranderd, en gaf ons uiteindelijk:

Onze lay-out met twee kolommen ziet er geweldig uit! Onze strip met drie kolommen moet echter worden gecorrigeerd.

Het werkt bijna ...

6. Bevestiging van onze lay-out met drie kolommen

Omdat we eerst mobiel werken, zijn de regels die we hebben toegepast op onze eerste mediaquery nog steeds van kracht op de grootste schermen. We moeten ons een weg banen door de panelen en een aantal stijlen resetten. 

Begin met het maken van de .paneelvormig title span drie kolommen in plaats van slechts twee. Dan .panel-3 (met de tekst) kan worden teruggezet naar rasterkolom: bereik 1; of grid-column: auto;

Hetzelfde geldt voor .panel-6. Met nog een paar wijzigingen zou je zoiets als dit moeten krijgen:

Een heel klein beetje van Flexbox

Ik zou graag zien dat het eerste deel van de dialoog verticaal gecentreerd is, dus laten we daarvoor flexbox gebruiken. Voeg het volgende toe aan de tweede media-query:

 .panel-3 display: flex; align-items: center; 

Voor flexbox, na flexbox

7. Panelen overlappen

Raster beperkt ons niet tot blokken op gelijke afstand langs een pagina, maar we kunnen onze panelen ook gelaagd aan elkaar plakken. We gaan ons laatste stukje tekst een beetje interessanter maken door het toe te wijzen aan dezelfde rasterlocatie als het volgende paneel: 

 .panel-7 grid-column: 1; grid-rij: 4; z-index: 1;  .paneel-8 rasterkolom: 1 / span 2; grid-rij: 4; 

Hier hebben we beide gepositioneerd .panel-7 en .paneelvormig 8 naar rasterkolom: 1; en grid-rij: 4;. Dat betekent dat ze zich allebei op exact dezelfde plaats bevinden, met de seconde die als tweede wordt weergegeven in de DOM die bovenop de eerste wordt gestapeld.

We kunnen de z-index gebruiken om de stapelvolgorde te veranderen, dus geven .panel-7 een z-index: 1; brengt het naar de top:

Notitie: Nu we een rij effectief hebben verwijderd, moet u uw roostervormige template-rijen zijn oke. 

Laten we een beetje meer stijl toevoegen aan onze "Naaah". Nogmaals, roosteritems worden niet zo veel beperkt als je zou denken - we kunnen ze verschuiven met negatieve marges en ze zelfs zonder problemen transformeren. Ik heb een aantal stijlen aan het paneel en de alinea erin toegevoegd om dit te geven:

Conclusie

Goed gedaan, dit is wat we hebben gebouwd!

Dit was een leuke oefening in het gebruik van CSS Grid, terwijl je onderweg kennismaakte met een aantal nieuwe Grid-concepten. Ik hoop dat je het leuk vond - nu als je het niet erg vind, ga ik een dutje doen.

Verder lezen

• Begrijpen van de CSS Grid Layout beginnersreeks
• Sleepy Fat Cat-letterbeeld op GraphicRiver
• The Mechanics of Comics
• Strips begrijpen door Scott McCloud