Layouten met gridlijnen(grid-column & -row)

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

2 reacties op “Layouten met gridlijnen(grid-column & -row)

    1. Beste Maureen, Jouw maand toegang is toevallig vandaag net verlopen. Als je weer toegang wilt dan kun je weer een maand toegang kopen. Groet, Belinda

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.

Open de bestanden index-.html en het hieraan gekoppelde css-bestand index-.css.

Elk griditem is al automatisch in een gridcel geplaatst.

Dankzij de eigenschap display:grid; die gegeven is aan de ouder-div met de naam 'container'.

Nu gaan we leren hoe je aangeeft in welke cel jij wilt dat het grinditem wordt geplaatst.

En of deze meerdere cellen in beslag moet gaan nemen.

Je gebruikt hiervoor de css-eigenschappen grid-column en grid-row.

En het is nu belangrijk dat je de nummers van de gridlijnen gaat toepassen.

Stel dat ik wil dat de header alle cellen van de eerste rij in beslag gaat nemen.

De classnaam van de header is head en deze zie je in het css-stijlblad staan als .head.

Typ de eigenschap grid-column, dubbele punt en dan een één/vier.

Dus van de eerste tot de laatste gridlijn.

We hebben een grid van drie kolommen en de laatste lijn is nummer vier.

Bewaar het document en ververs de browser.

Het html-element header neemt nu de hele eerste rij in beslag.

De titel start nu automatisch op de tweede rij.

Deze wil ik ook over de volledige breedte gaan laten lopen.

Daarvoor gebruik ik dus ook weer grid-column: één tot en met vier.

De main-content en de aside wil ik naast elkaar plaatsen.

De main-content mag de eerste twee kolommen in beslag nemen en de aside de laatste kolom.

Voor de main-content wordt het dan grid-column: één tot en met drie.

En voor de aside wordt het grid-column: drie tot en met vier.

En het klopt precies.

Dan laat ik de footer ook nog over de hele breedte lopen.

Met de opdracht grid-column: één tot en met vier.

Nou dit is grotendeels precies de layout zoals ik hem wil.

Het mooie van het grid is dat deze al heel mooi responsive is.

Maak het scherm maar smaller en breder.

De layout blijft zo lang mogelijk verhoudingsgewijs intact.

Je kunt de inhoud ook over meerdere rijen verdelen.

Ik wil dat naast de main-content twee asides kunnen gaan staan.

Daarvoor plaats ik eerst in de html-broncode een nieuwe aside.

Ik kopieer deze, plak hem er nog een keer onder.

Ik wijzig de classnaam in aside-top. Dit wordt -bottom.

En dan wordt dit ook de bottom-informatie.

Dan moet ik ook de naam aanpassen in mijn stijlblad.

Dit is de aside-top. Ik kan deze kopiëren en nogmaals plakken.

En dit wordt mijn cas-stijl voor de bottom.

De main-content start nu op rij drie.

En die wil ik laten doorlopen tot aan gridlijn vijf.

Dat geef ik op met de eigenschap grid-row.

Deze moet starten op rij drie en doorlopen tot rij vijf.

Dan kan daarnaast de aside-top en de aside-bottom komen.

Dit geef ik ook keurig op met grid-row, . De bovenste loopt vanaf drie tot lijn vier.

En de aside-bottom loopt dan vanaf vier tot vijf.

Bewaar je documenten en bekijk een voorbeeld in de browser.

Beide asides staan nu naast de main-content.

De flexibele kracht van het grid wordt pas duidelijk als je grid-items op een andere volgorde gaat zetten.

Zo kan ik de aside-top gaan verplaatsen door deze te verplaatsen van drie naar vier.

En dan wordt de top juist vier tot vijf. Dan kun je ze omkeren.

Zo kan ik ook de titel één rij omhoog verplaatsen met grid-row, één tot en met twee.

En juist de head één rij naar beneden plaatsen met grid-row twee tot en met drie.

En bekijk weer het voorbeeld in de browser.

De titel en de head zijn nu omgekeerd geplaatst.

Ook al staan ze op een andere volgorde in de broncode.

We hebben nu de nummers van de gridlijnen gebruikt om aan te geven waar een element moet beginnen en eindigen.

Er is nog een methode om een item over meerdere cellen te verdelen en dat is met een overspanningsopdracht.

Ik doe het voor bij de footer.

Ik vervang één slash vier voor twee en dan 'span'.

Daarmee mag de footer nu twee cellen in beslag nemen.

Als ik wil dat deze de laatste twee cellen in beslag neemt.

Dan geef ik dat zo aan. Ik plaats voor twee nogmaals een twee en dan een slash.

En dan twee span.

Dat betekent dat deze op de tweede grindlijn moet beginnen.

En daarna een overspanning mag nemen van twee cellen.