, een voor de auteur, en misschien zelfs een

voor meer informatie.

Grid Basics

Laten we nu een paar stijlen starten door elk van deze items in een raster te rangschikken. 

Notitie: als dit je eerste uitstapje naar "Grid" is, wil je misschien eerst kennis maken met de eerste tutorials in CSS-rasteropmaak begrijpen.

We gaan hier eerst mobiel, dus de eerste stijlen geven onze wrapper een breedte en centreren deze en stellen vervolgens enkele Grid-regels in:

.band breedte: 90%; maximale breedte: 1240 px; marge: 0 auto; weergave: raster; rooster-sjabloon-kolommen: 1fr; grid-template-rows: auto; grid-gap: 20px; 

Belangrijker nog, hier vermelden we dat onze .band zal zijn weergave: raster;. We verklaren dan roostervormige template-columns van 1FR, waarin staat dat elke kolom een ​​fractie van de beschikbare kolommen omvat. We hebben er voorlopig alleen een verklaard, dus elke kolom zal de hele breedte vullen.

Dan stellen we grid-template-rows: auto;. Dit is eigenlijk de standaardwaarde, dus we hadden het kunnen weglaten. Dit betekent dat de rijhoogtes uitsluitend door de inhoud worden bepaald.

Ten slotte definiëren we een roostervormige gap van 20px, wat ons onze kolom- en rijgoten geeft.

Mediaquery Numero Uno

Op bredere viewports (500px is volledig willekeurig), zullen we de roostervormige template-columns om ons een mogelijke twee kaarten per rij te geven. Nu zijn er twee kolommen, die elk een van de twee beschikbare breuken zijn.

@media only screen en (min-width: 500px) .band grid-template-columns: 1fr 1fr; 

Mediaquery Numero Dos

Ten slotte gaan we voor grotere schermen met een lay-out met vier kolommen.

@media only screen en (min-width: 850px) .band grid-template-columns: 1fr 1fr 1fr 1fr; 

Hier hadden we evengoed kunnen schrijven herhaal (4, 1fr) in plaats van 1fr 1fr 1fr 1fr. Voor meer informatie over hoe het fr eenheid werkt, bekijk dan CSS-rasterlay-out: vloeistofkolommen en betere dakgoten.

Dus wat heeft ons dat gegeven??

Styling van de kaarten

Dat heeft ons een behoorlijk stevige rasterlay-out gegeven, en als je een fan bent van brutalisme, wil je misschien dit soort dingen houden, maar laten we voor iedereen de kaarten een beetje meer op kaarten lijken.

We beginnen met dit:

.kaart achtergrond: wit; tekstdecoratie: geen; kleur: # 444; vakschaduw: 0 2px 5px rgba (0,0,0,0.1); weergave: flex; flex-richting: kolom; minimale hoogte: 100%; 

Dit geeft ons een aantal basisstijlen: een witte achtergrond, geen onderstreping voor de tekst, een grijze kleur en een nette stijl box-shadow om ons wat diepte te geven.

Vervolgens verklaren we de kaart te zijn weergave: flex;. Dit is belangrijk: we zullen de inhoud van de kaart verticaal uitlijnen met behulp van Flexbox. Daarom stellen we ook flex-richting: kolom; om ons onze verticale as te geven. Ten slotte verklaren we minimale hoogte: 100%; zodat alle kaarten de hoogte van het bovenliggende element vullen (ons rasteritem). Goed werk! Dat geeft ons dit:

Hover State

Laten we een paar andere verbeteringen aanbrengen voordat we verder in Flexbox duiken. Voeg een ... toe positie: relatief; en een overgang zodat we de kaart kunnen verplaatsen met zweven:

 positie: relatief; boven: 0; overgang: alle .1s gemak-in;

Til vervolgens de kaart in de zweeftekst iets op en maak de schaduw duidelijker:

.kaart: hover top: -2px; box-shadow: 0 4px 5px rgba (0,0,0,0.2); 

Typografie

Nu voegen we enkele algemene stijlen toe aan de typografie om de kleuren en de spatiëring te wijzigen.

.kaartartikel opvulling: 20px;  / * typografie * / .card h1 font-size: 20px; marge: 0; kleur: # 333;  .card p line-height: 1.4;  .card span font-size: 12px; lettertype: vet; kleur: # 999; text-transform: hoofdletters; letter-spacing: .05em; marge: 2em 0 0 0; 

Dit is wat je zou moeten hebben:

thumbnails

Elke miniatuur wordt als achtergrondafbeelding toegepast, dus we voegen wat markup over het bord toe, zoals dit:

Nu zorgen we ervoor dat het .duim divs hebben enkele dimensies en de achtergrondafbeeldingen vullen ze goed:

.kaart .thumb padding-bottom: 60%; achtergrondformaat: omslag; achtergrond-positie: middelpunt; 

Goed gedaan, dat geeft ons dit:

Flexbox-artikel

Nu willen we dat de naam van de auteur wordt uitgelijnd onderaan de kaart, ongeacht hoeveel inhoud erboven staat. Dit is waar Flexbox opnieuw in komt:

.kaartartikel opvulling: 20px; flex: 1; weergave: flex; flex-richting: kolom; rechtvaardigen-inhoud: ruimte-tussen; 

We gebruiken de steno flex: 1; om te stellen dat dit flexitem (het is nog steeds een kind van de originele flexcontainer) moet groeien om alle beschikbare ruimte in beslag te nemen.

Vervolgens verklaren we dat het artikel op zichzelf een flexcontainer is, en opnieuw verklaren we dit flex-richting: kolom; om ons een verticale verdeling te geven. tenslotte, rechtvaardigen-inhoud: ruimte-tussen; stelt dat alle flexitems binnen de as gelijkmatig langs de as moeten worden verdeeld, met gelijke afstanden ertussen.

Dat is allemaal geweldig, maar het geeft ons deze vreemde, dwalende alinea's in het midden van onze kaarten.

Om goed uit te lijnen, laten we toevoegen flex-groei: 1; (of gewoon flex: 1;) voor hen, dus vullen ze alle overblijvende verticale ruimte in, waarbij ze zich netjes aan de bovenkant uitlijnen.

.kaart p flex: 1; / * laat p groeien om de beschikbare ruimte * / lijnhoogte te vullen: 1.4; 

Beter!

Het raster wijzigen

Op dit punt zijn we behoorlijk ingepakt, maar het enige wat Grid ons nu laat doen is de lay-out compleet veranderen door onze rasteritems te plaatsen waar we maar willen, en in elke gewenste grootte. Voor deze demo wilden we de allereerste kaart maken (laten we het onze "aanbevolen kaart" noemen) twee kolommen breed voor iets anders dan de kleinste viewports.

Laten we in onze eerste media-query dit doen:

@media only screen en (min-width: 500px) ... item-1 grid-column: 1 / span 2; 

Terugkomend op onze inleidende tutorial over rastergebieden, hier zeggen we dat, voorbij 500px, het eerste item zou moeten beginnen op rasterlijn 1 en zich over twee sporen uitstrekken. De rest van de rasteritems vallen automatisch op hun plaats.

Binnen deze zelfde mediaquery heb ik ook de lettertypegrootte van de kop op onze uitgelichte kaart.

Conclusie

Dit was een goede oefening in het gebruik van Grid met Flexbox; Grid behandelde onze hoofd-tweedimensionale lay-out, waarna Flexbox de verticale verdeling van elementen binnen onze kaarten verwerkt. Veel plezier ermee spelen!

Verder lezen

• CSS-rasterlay-outreeks begrijpen
• Moet ik Grid of Flexbox gebruiken? door Rachel Andrew
• Het ontwerpen van op kaarten gebaseerde gebruikersinterfaces op Smashing Magazine
  
• bbc.co.uk beta-startpagina
• Snelle tip: voeg een @supports CSS-bestand toe aan uw CodePen-demo's