Inhoud
- 01. Stel uw markeringen in
- 02. Schrijf basisstijlen
- 03. Zet je grid op
- 04. Stel grote browsercompatibiliteit in
- 05. Stijl individuele items
- 06. Plaats items op het rooster
- Een korte terzijde over oudere browsers
CSS Grid Layout groeit elke dag in browserondersteuning en we kunnen CSS Grid naar productie sturen. De snelle acceptatie van CSS Grid is echt opmerkelijk.
Voordat we beginnen met het maken van een responsieve portfolio-site-indeling met CSS Grid, laten we een paar dingen ophelderen: CSS Grid is geen vervanging voor Flexbox. Het is niet eens een vervanging voor drijvers. Misschien realiseer je je misschien dat we Flexbox hebben gebruikt om dingen te doen die CSS Grid veel beter doet. Maar in plaats van te denken in termen van vervanging, kunnen we denken in termen van combinatie.
- 15 echt nuttige tutorials voor responsief webontwerp
Stel je een boterham met pindakaas en jam voor. Pindakaas en gelei zijn op zichzelf best goed, maar als ze samenkomen, wordt er iets nieuws geboren en gebeurt er magie.
Dit is hoe onze lay-outtools voor websites eruit zien. Ze zijn geweldig in de dingen die ze afzonderlijk doen, maar wanneer ze worden gecombineerd, gebeurt er magie en kunnen we nieuwe en opwindende lay-outs maken. In dit geval maken we zelf een PB&J voor webontwikkeling met CSS Grid en Flexbox. Wilt u uw proces nog verder vereenvoudigen? Kies een degelijke websitebouwer.
01. Stel uw markeringen in
In deze tutorial gaan we CSS Grid en Flexbox samen gebruiken om een responsieve portfoliolay-out te maken. Elk van deze vakken heeft een andere grootte, sommige beslaan rijen en elke doos heeft een titel die onderaan staat. We zullen enkele van de geweldige uitlijntools gebruiken die bij Flexbox worden geleverd om dat mogelijk te maken.
Laten we beginnen met het instellen van onze markeringen.
ul class = "boxes"> li> div class = "boxes__text-wrapper"> h2> Case Study Title / h2> p> Een pakkende beschrijving van onze case study. We hebben hard gewerkt./p> / div> / li> / ul>
We dupliceren dat lijstitem en alles erin zes keer, dus we hebben items om mee te spelen. Mocht u het zich afvragen: we hebben besloten om de ul element hier omdat dit een lijst met items is. Voel je vrij om te gebruiken wat je goed voelt.
Binnenin het lijstitem hebben we een div met de klasse van .boxes__text-wrapper dat de titel van de case study en de bijbehorende beschrijving bevat.
02. Schrijf basisstijlen
Laten we nu enkele basisstijlen instellen om mee te werken.
body {font-family: Avenir, sans-serif; marge: 2rem auto; breedte: 95%; } h2, p {marge: 0; } ul {lijststijl: geen; opvulling: 0; marge: 0; } .boxes> * {padding: .5rem; achtergrondkleur: # 333; kleur wit; }
We hebben het lettertype gewijzigd in Avenir. We verwijderen de marge uit onze kop en alinea en herstellen de ongeordende lijst. We geven elk lijstitem ook een aantal standaardstijlen, zodat we kunnen zien waar elk item zich bevindt.
03. Zet je grid op
We willen eerst onze lay-out voor mobiel bouwen. Zo eenvoudig is het opzetten van ons raster op kleine schermen:
.boxes {display: grid; grid-auto-rijen: minmax (125px, auto); grid-gap: .5rem; }
Grid zal onze items op elkaar stapelen omdat er standaard maar één kolom is. We creëren wat ruimte tussen elke casestudy door gebruik te maken van grid-gap - hierdoor kunnen we een tussenruimte tussen rijen en kolommen toevoegen.
Vergeet het toevoegen van een marge aan kolommen alleen om complex te moeten hebben n-kind kiezers; ruggoten verschijnen alleen tussen kolommen of rijen, nooit achter of vóór een kolom of row.grid-gap is de afkorting vangrid-column-gap en grid-row-gap. Meestal gebruiken we de handgeschreven tekst, maar we zullen beide overschrijven naarmate de browser groeit, dus gebruiken we de afkorting.
Vervolgens gebruiken we grid-auto-rijen om onze rastercontainer de hoogte van nieuwe rijen te vertellen. Grid maakt nieuwe rijen om al onze inhoud te plaatsen. We kunnen de grootte van deze automatisch gemaakte rijen bepalen met de grid-auto-rijen eigendom. We gebruiken een nieuwe functie die voor ons beschikbaar is: minmax (). Met minmax () we kunnen een minimum maat en een maximum maat specificeren.
Met onze code zeggen we dat we willen dat onze rijen minimaal 120 px zijn en maximaal automatisch. We gebruiken hier auto omdat we willen dat onze rijen groeien als de inhoud dit rechtvaardigt.
04. Stel grote browsercompatibiliteit in
Laten we onze pagina zo instellen dat wanneer onze browser 40em of groter is, onze rastercontainer zes kolommen van elk een fractie heeft.
@mediascherm en (min-breedte: 40em) {.boxes {grid-template-columns: repeat (6, 1fr); grid-gap: 2px; }}
grid-template-kolommen is de eigenschap die we gebruiken om ons raster te vertellen hoeveel kolommen er zouden moeten bestaan. Het accepteert alle lengte-eenheden die we kennen en waar we van houden, zoals rem, em, px, percentages,vw, vh en vr.
De vr is een nieuwe eenheid die we krijgen met CSS Grid Layout. Hiermee kunnen we de browser vertellen om wiskunde te doen in plaats van ons - uitstekend.
Door de browser te vertellen dat hij zes kolommen van één breuk moet maken, berekent de browser de breedte van onze rastercontainer en splitst deze in zes gelijke kolommen. En omdat Grid slim is, verdeelt het alleen de ruimte die overblijft na het berekenen van de rugmarge die we hebben gespecificeerd.
05. Stijl individuele items
Onze casestudy's zien er een beetje saai uit als grijze dozen. Laten we een achtergrondafbeelding toevoegen, onze titels onderaan deze vakken laten weergeven en een verloop toevoegen zodat onze titel opvalt.
.boxes li {achtergrondafbeelding: lineair verloop (rgba (0,0,0,0), rgba (0,0,0,0.8)), url (pad / naar / afbeelding); achtergrondgrootte: omslag; weergave: flex; align-items: flex-end; }
Deze achtergrondafbeelding was een gratis afbeelding van Unsplash, maar u kunt elke gewenste afbeelding gebruiken. Ik breng ook Flexbox in de mix om onze tekst op de bodem van onze vakken uit te lijnen. Dat zul je nog niet zien, maar als we elke doos plaatsen, zul je zien dat het uiteindelijk werkt.
06. Plaats items op het rooster
Helaas heeft Grid geen manier om automatisch items in de rasterlay-out te plaatsen die we aan het begin zagen. Gelukkig voor ons geeft Grid ons echter de tools om het vrij gemakkelijk handmatig te doen. In deze tutorial gebruiken we n-kind om elk lijstitem te plaatsen. In een productiewebsite zouden we adviseren om een klasse te gebruiken die, gegeven de juiste planning, het mogelijk zou kunnen maken om lay-outs zoals deze te automatiseren in een site met veel inhoud.
Laten we beginnen met ons eerste item.
@media scherm en (min-breedte: 40em) {.boxes li: nth-child (1) {grid-column: 1 / -1; grid-rij: span 3; }}
We plaatsen al onze plaatsingsstijlen in die mediaquery die we eerder schreven, omdat we willen dat deze lay-out plaatsvindt nadat onze browser 40em of groter is. Met n-kind we richten ons op het eerste lijstitem. Met CSS Grid kunnen we eenvoudig onze items plaatsen met rasterkolom en rasterrij. Er zijn veel verschillende manieren om aan te geven waar items moeten zijn, maar hier vertellen we ons item om te beginnen bij kolomregel één en de hele container te overspannen met -1.
Vervolgens vertellen we met rasterrij dat het item drie rijen moet beslaan. Hoe weten we dat drie rijen de gewenste grootte hebben? Welnu, we hebben de grootte van deze rijen een paar ogenblikken geleden gespecificeerd met raster-auto-rijen, en als we er niet blij mee zijn, kunnen we de minimumgrootte wijzigen.
Laten we de rest van onze items plaatsen.
@media scherm en (min-breedte: 40em) {.boxes li: nth-child (2) {grid-column: span 2; rasterrij: overspanning 7; } .boxes li: nth-child (3) {grid-column: span 4; grid-rij: span 3; } .boxes li: nth-child (4) {grid-column: span 2; rasterrij: span 4; } .boxes li: nth-child (5), .boxes li: nth-child (6) {grid-column: span 2; grid-rij: span 2; }}
Is het niet verbazingwekkend hoeveel controle de rasterlay-out ons geeft? Met slechts een paar regels code kunnen we een volledig responsieve lay-out samenstellen die niet kapot gaat als er nog meer items worden toegevoegd.
Natuurlijk zien ze er misschien een beetje raar uit, omdat ze standaard maar één rasterkolom en rij beslaan, maar het breekt onze lay-out niet. Als we dit zouden doen met drijvers en vaste breedtes en hoogtes, zouden we gebonden zijn als er meer inhoud zou worden toegevoegd.
Een korte terzijde over oudere browsers
Oké, het is tijd om de olifant in de kamer aan te spreken. ‘Hoe zit het met oudere browsers?’ Het antwoord op deze vraag is hetzelfde als voor elke nieuwe functie in CSS: gebruik functiequery's en omarm de cascade. Feature-zoekopdrachten worden zeer goed ondersteund, en waar ze niet zijn, kunnen we onze fallback eerst plaatsen. We zouden bijvoorbeeld iets schrijven in de trant van:
.your-selector {display: flex; } / * Uw Grid-code * / @supports (display: grid) {display: grid; grid-template-kolommen: herhaal (3, 1fr); grid-gap: 1rem 2rem; }
Als u onze code op deze manier schrijft, betekent dit dat als de browser de rasterlay-out begrijpt, deze deze zal gebruiken in plaats van Flexbox. Omdat we de cascade omarmen, zullen browsers die functiequery's niet begrijpen, deze negeren en al over de informatie beschikken die ze nodig hebben. We moeten misschien plannen hoe we onze stijlen iets meer dan normaal schrijven, maar door dit te doen, kunnen we fantastisch uitziende lay-outs maken met verstandige fallbacks. Als u uw oude pagina's wilt opslaan, exporteert u ze als pdf's en slaat u ze op in cloudopslag.
En naarmate de tijd verstrijkt, zal er alleen maar meer en meer ondersteuning zijn voor CSS Grid. Bedenk eens hoe geweldig het zou zijn om later onze fallbacks te verwijderen en alle Grid-gerelateerde CSS te verlaten. Naarmate u meer over Grid leert, zult u zich realiseren dat het veel dingen doet die we nu doen met veel minder regels CSS. Onthoud dat als u een bijzonder complexe site heeft, uw webhostingservice goed moet zijn.
Dit artikel is oorspronkelijk verschenen in net tijdschrift, 's werelds toonaangevende tijdschrift voor ontwikkelaars en webontwerpers. Schrijf je hier in.
