Share
In deze tutorial gaan we CSS Grid gebruiken om ons te helpen een "gebroken rasterlay-out" te maken, iets wat altijd moeilijk was met meer traditionele CSS-lay-outmethoden.
Dit is waar we naartoe werken (bekijk de grotere versie voor het volledige effect):
Dit ontwerp is gebaseerd op het werk van Anthony Harmon, wiens werk perfect is voor onze demo. Bekijk deze lay-out die hij deed voor Rel Acoustics:
Proost Anthony :)Webontwerpers zijn in de loop der jaren geconditioneerd om de documentenstroom en de bronvolgorde te observeren; het maken van lay-outs door zwevende blokken en ze de pagina laten vullen zoals bouwstenen. In de wereld van responsive design lijkt deze aanpak heel natuurlijk. Het is echter een grote afwijking van de afdruklay-out, waarbij vaste dimensies ervoor zorgen dat ontwerpers op een betrouwbare manier tekst en afbeeldingen kunnen plaatsen waar ze willen, wat leidt tot meer experimentele en visueel gedurfde lay-outs.
CSS Grid, meer dan alleen toestaan dat we dingen langs x- en y-assen regelen, kan ons helpen de lay-outkloof te overbruggen en een beetje gewaagder te worden met onze ontwerpen!
"We moeten gaan nadenken over wat een goed grafisch ontwerp kan zijn met overlappende dingen." - Jen Simmons
Tijd om vast te lopen.
Rasterkolommen hoeven niet uniform te zijn. Laten we een gedeelte van de bovenstaande lay-out nemen en uitzoeken hoe het raster eruit zou kunnen zien.
Notitie: we bouwen slechts één sectie in deze zelfstudie. Er is geen reden waarom elk van de paginasecties niet kan worden opgebouwd uit onafhankelijke rasters.
We beginnen met een opmaak, een rastercontainer:
Vervolgens verklaren we in die container weergave: raster; definieer vervolgens de kolommen en rijen.
.grid1 display: grid; rooster-sjabloon-kolommen: 3fr 6fr 1fr 5fr 10fr 2fr; grid-template-rijen: 100px auto 15px auto auto;
De kolommen zijn ingedeeld zoals u ze in de afbeelding hierboven ziet. De fr eenheid is een fractie van de hele breedte, dus de eerste kolom neemt er drie daarvan op, de tweede kolom is breder en neemt zes op. In totaal bestaat onze lay-out uit 27 breedte-eenheden, nauwelijks klassieke rasterafmetingen!
De rijen zijn een beetje anders. Je ziet een combinatie van vaste pixelmetingen en auto. Waar auto wordt gebruikt, zal de rij groeien en krimpen afhankelijk van de inhoud.
Laten we beginnen met de afbeeldingen. Voor de opmaak hebben we een aantal opties; Of we gebruiken img elementen, of we gebruiken andere elementen met een afbeeldingsachtergrond.
We kunnen gebruiken object-fit: dekking; op img elementen, maar dat is lastig - waarom ons leven moeilijker maken ?! Dus voor deze demo gaan we met de laatste, omdat dat ons meer flexibiliteit biedt in termen van hoe de verhoudingen van de afbeeldingen veranderen met vloeiende lay-outs.
Zeg hallo tegen enkele goede oude divs:
Met wat achtergrondafbeeldingen om ze te dekken:
.img1 background: url (wooden.jpg); achtergrondformaat: omslag; .img2 background: url (speaker.jpg); achtergrondformaat: omslag; .img3 background: url (waves.jpg); achtergrondformaat: omslag;
Het automatische plaatsingsalgoritme van Grid zal ze al netjes op ons grid hebben gezet, maar laten we specifiek worden. We gebruiken de rasterlijnen om te bepalen waar elk element moet beginnen en eindigen.
Onze eerste afbeelding begint op kolom 1 en eindigt op 3. We kunnen dit als volgt definiëren:
rasterkolom: 1/3;
of zoals dit:
rasterkolom: 1 / span 2;
Qua rijen moet onze eerste afbeelding beginnen op rij 2 en eindigen op 5, wat we als volgt kunnen aangeven:
rasterrij: 2/5;
of dit:
grid-rij: 2 / span 3;
Laten we nu hetzelfde doen voor onze andere twee afbeeldingen. Dit is wat je zou moeten eindigen met:
Toegegeven, het is niet bijzonder indrukwekkend, maar dat komt omdat de meeste rijen nog geen hoogte hebben. Ze zullen dat krijgen zodra we in de volgende stap meer inhoud gaan toevoegen.
Voor meer informatie over hoe roostervormige kolom en roostervormige rij werk, bekijk deze snelle tutorials:
Laten we nu de tekstuele inhoud toevoegen; een blockquote in een wrapper en het call-to-action-blok. Je kunt deze waar je maar wilt toevoegen als onderliggende elementen van de .grid1 container, bronorde maakt eigenlijk niet uit.
"Vrijwel meteen een woordspreiding van een Welshman die dit ongelooflijk klinkende subbas-systeem had gebouwd, en al snel gingen audiofielen op zoek naar deze legendarische subs die als geen ander waren gebouwd."Gibraltar
Introductie van 212 / SE, onze krachtigste en meest wendbare subwoofer, exclusief ontworpen voor grotere systemen en kamers, zodat superieure, ultramoderne luidsprekers tot volle stem kunnen spreken.
Bekijk productinformatie →
Vervolgens plaatsen we, voordat we iets vormen, ze op het raster, net als bij de afbeeldingen:
.strapline grid-column: 3 / span 3; grid-rij: 2 / span 1; .cta-wrapper grid-column: 4 / span 2; grid-rij: 4 / span 2;
Ziet er beter uit!
Op dit punt is het vermeldenswaard dat u kunt spelen met z-index als u dat wilt. Stapelen volgt standaard de bronvolgorde; wat eerst in de opmaak staat, wordt onderaan geplaatst, wat later wordt verklaard, komt bovenaan. Maar als we zouden toepassen z-index: 1; naar .img1 het zou bovenop gestapeld worden .img2.
Als u uw browserinspector inschakelt, krijgt u tegenwoordig hulp bij de lay-out van het raster. In de infovenster van Chrome worden elementen en rasterlijnen geselecteerd, zoals:
De inspecteur in Firefox zal nog meer doen, zodat u het raster overlay met behulp van de besturingselementen onder de lay-out tab. U kunt de regelnummers, gebiedsnamen weergeven en door de rastergedeelten bladeren op een kleinere miniatuurversie:
Tip: bij het bekijken onder de Reglement klik op het rasterpictogram naast tonen om de overlay te schakelen:
Door het raster te inspecteren, realiseer je je snel of je rasteritems hebt misplaatst, een rij hier of daar hebt overgeslagen of iets verkeerd hebt genoemd.
Sommige snelle lettertype-declaraties en knopstijlen zullen dit er zelfs beter uit laten zien, zonder al te veel moeite. We beginnen met het koppelen van enkele Google-lettertypen in de van het document:
We gebruiken Open Sans voor het lichaam, Playfair Display voor de blockquote en heading. Laten we ze toepassen:
lichaam kleur: # 292929; lettertype: 1em / 1.7 'Open sans', sans-serif; blockquote font: italic 1.1em / 2 'Playfair Display', serif; marge: 0 0 2em 0; .cta h1 font: bold 6em / 1 'Playfair Display', serif; marge: 0 0 20px 0; positie: relatief;
Nu een aantal knopstijlen:
.knop display: inline-block; kleur wit; tekstdecoratie: geen; achtergrond: # 292929; opvulling: .8em 1.5em; .button: hover background: black;
Ten slotte zullen we de blockquote op het midden afstemmen en vervolgens wat opvulling toevoegen aan de call-to-action, zodat we de rij waarin deze is geplaatst, invullen. Dit is wat u nu zou moeten hebben:
Houd er rekening mee dat we onze lay-out voor een breed kijkvenster aan het opbouwen zijn. Wat je ziet ingebed in de tutorial ziet er misschien niet optimaal uit.
Het ontwerp waar we naartoe werken heeft een aantal visuele details die we nog niet hebben gebruikt. We kunnen deze op verschillende manieren toevoegen, maar zoals ze niet zijn inhoud als zodanig zullen we ze toevoegen met behulp van CSS pseudo-elementen. Eerst de squiggle boven de blockquote:
.strapline margin-top: 100px; positie: relatief; .strapline :: before content: "; display: block; background: url (wavy.svg) repeat-x; background-size: cover; width: 20%; height: .5em; position: absolute; top: - 3em; links: 40%;
Deze stijlen gebruiken een ::voor pseudo element op de .slogan div, plaats het boven de container zelf met behulp van een negatieve toppositie. Het is perfect gecentreerd en je zult onthouden dat we er voldoende ruimte voor hebben gegeven door onze eerste rij als 100px hoog te definiëren.
We zullen iets soortgelijks doen voor een SVG-badge op de kop:
.cta h1 :: before content: "; display: block; height: 1em; width: 1em; background: url (badge.svg) no-repeat center center; achtergrondformaat: 80%; positie: absoluut; links: - 120 px; boven: 0;
Nogmaals, we gebruiken een pseudo-element omdat het simpelweg een visuele bloei is in plaats van waardevolle inhoud. Dat wil niet zeggen dat je het niet als een
We hebben nu een heel solide gebroken rasterlay-out gebouwd! Tijd voor een aantal volgende stappen om het nog verder te nemen.
CSS Grid wordt tegenwoordig behoorlijk goed ondersteund, hoewel IE11 nog steeds een prefixversie vereist, dus je wilt misschien je rasterstijlen in een @supports verklaring. Dat zou er ongeveer zo uitzien:
@supports (weergave: raster) / * rasterindeling * / .grid1 weergave: raster; rooster-sjabloon-kolommen: 3fr 6fr 1fr 5fr 10fr 2fr; grid-template-rijen: 100px auto 15px auto auto; ...
Elke browser die CSS Grid niet correct ondersteunt, negeert alles wat je in deze verklaring hebt geplaatst, waardoor je de mogelijkheid hebt om een fallback te geven.
Bekijk Grid "fallbacks" en vervangingen voor ideeën over hoe je fallbacks kunt stylen als je dat wilt.
Onze lay-out ziet er scherp uit op grotere schermen, maar wanneer deze in kleinere viewports wordt geperst (zoals wanneer ze in deze tutorial worden ingesloten), verschijnen er enkele scheuren. Hoe zou je dit op een responsieve manier aanpakken? Als u mediaquery's toevoegt, kunt u eerst de stijlen bepalen en vervolgens geleidelijk opbouwen om de lay-out te bepalen en het raster complexer te maken naarmate de viewport breder wordt:
.grid1 display: grid; rooster-sjabloon-kolommen: 1fr 1fr; @media only screen en (min-width: 768px) .grid1 grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr; grid-template-rijen: 100px auto 15px auto auto;
Je kunt er ook voor kiezen om die bloesems die we op kleinere apparaten hebben gemaakt te verbergen en op te slaan tot er meer schermruimte is om mee te spelen. De keuze is aan jou!
Hier is een voorbeeld van hoe u dit specifieke ontwerp responsief kunt maken.
Deze tutorial heeft u een kijkje gegeven in de wereld van alternatieve lay-outs die haalbaar zijn met CSS Grid. Vergeet de lay-outs die je hebt geoefend met drijvers en positionering; breek die oude gewoontes! Begin met het verkennen van meer ingewikkelde lay-outs en laten we eens kijken of we het web een beetje interessanter kunnen maken.
Accentsconagua