Uitleg van het css-grid

uit de cursus Webdesign & Layout met css (2019)

Geef een reactie of stel een vraag

Geef een reactie

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

n deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). 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.

Responsive design en -layout met css

CSS biedt met grid en flexbox een waanzinnig snelle, efficiënte en makkelijke manier om snel een responsive design te 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.

Tekst en afbeeldingen vormgeven met css

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.

Eén van de eerste behoeftes bij webdesign is toch het kunnen layouten van de pagina.

Zodat je vanaf het begin al naar een mooi stukje vormgeving kunt kijken.

Voor het maken van een layout gaan we gebruik maken van css-grid.

Voordat we in de actie gaan leg ik eerst uit wat het css-grid is en hoe je het kunt gebruiken en toepassen.

Ik behandel in dit hoofdstuk alleen de meest eenvoudige en veelgebruikte opties.

Wil je echt alles weten over de layout mogelijkheden van het css-grid.

Dan raad ik je aan onze afzonderlijke cursus hierin te volgen.

Je creëert een grid met de css-eigenschap display:grid;.

Deze eigenschap geef je op aan een Parent-element, bijvoorbeeld een div-container.

Alle eerste kinderen hiervan kun je dan positioneren op het grid.

Het is heel belangrijk dat je dat weet.

In html is het toepassen van geneste elementen heel normaal.

Zodra je wilt gaan layouten met een grid moet je hier heel bewust keuzes in maken.

In dit voorbeeld is er een omsluitende -div- gemaakt.

Deze div heeft vijf directe afstammelingen.

Geef je de Parent-div de eigenschap display:grid; dan worden de vijf directe kinderen automatisch griditems.

Geneste html-elementen binnen deze vijf kinderen zijn buitengesloten van het grid.

Het grid bestaat uit gridlijnen die rijen en kolommen vormen.

De gridlijnen zijn genummerd.

Het grid start met een gridlijn en eindigt met een gridlijn.

Maak je een grid van drie kolommen dan bestaat deze uit vier gridlijnen.

Hetzelfde principe geldt voor de rijen in het grid.

Je gebruikt het nummer van de gridlijn om te positioneren.

Elk rechthoekig vlak dat wordt gevormd door de gridlijnen noemen we een grid-cel.

Aaneengesloten cellen noemen we een grid-track.

Het betreft dan aaneengesloten cellen horizontaal of verticaal.

Een grid-area is een gebied dat wordt gevormd door meerdere cellen.

Dit gebied is altijd rechthoekig.

Je kunt vooralsnog geen L-vormige gebieden maken.

Standaard is er geen witruimte aanwezig tussen de gridlijnen.

Je kunt gebruik maken van grid-gap om afstand tussen de gridlijnen te creëren.

Zo kun je alsnog afstand toepassen tussen de rijen en/of kolommen.

Eventuele onderliggende kleuren worden dan wel zichtbaar want een grid-gap is transparant.