Kolomwit en rijwit toepassen (grid-gap)

uit de cursus Webdesign & Layout met css (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

Als je ruimte wilt creëren tussen de griditems dan gebruik je daarvoor de css-eigenschap grid-gap.

Want standaard worden alle griditems strak tegen elkaar aan geplaatst.

Dat kun je ook goed zien in de browser voorvertoning.

Je geeft deze opdracht aan het parent-element.

Typ de eigenschap grid-gap, dubbele punt en dan de waarde. Ik plaats tien pixels afstand.

En bewaar het document en ververs de voorvertoning in de browser.

Zowel tussen de kolommen en de rijen wordt nu tien pixels afstand gehouden.

Je kunt er ook voor kiezen om enkel afstand tussen de rijen op te geven.

Daarvoor gebruik je de eigenschap grid-row-gap.

Kijk! De kolommen sluiten weer strak aan.

Wil je juist alleen afstand tussen de kolommen dan gebruik je daarvoor grid-column-gap.

En voila, de afstand wordt alleen tussen de aanwezige kolommen toegepast.

Let op! Met grid-gap wordt de ruimte enkel binnen het grid toegepast, niet daarbuiten.

Feit dat deze layout afstand houdt ten opzichte van mijn browserrand

komt omdat ik voor het html-element body een margin heb opgegeven van veertig pixels.

Daardoor konden we beter naar het grid en de nummering van het grid kijken.

Kijk maar, als ik de margin verwijder...

dan rekt het grid zich uit tot aan de browserrand.

Dus voor afstand buiten het grid zul je een margin moeten gebruiken.

Ik had deze toegepast op de hele pagina met het body-element.

Maar had deze in principe ook aan de div kunnen geven, de ouder van het grid.

Ik zorg dat er weer kolomwit zowel op de kolommen als op de rijen wordt toegepast.

En dan nog even het volgende.

Standaard is de witruimte van het grid transparant.

Als ik de pagina een zwarte achtergrondkleur geef met background-color:black;

Dan kun je dat zien.

Om de witruimte een aparte kleur te geven

Moet ik aan e parent-element ook een background-color geven.

En maak ik deze wit met white.

Zo kun je de opgegeven witruimtes met grid-gap toch nog voorzien van een eigen achtergrondkleur.