Creëren van grid ,-columns & -rows (grid-template)

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.

Open de local root folder css--.

Doe dat door naar Bestand te gaan > Open map. Wijs de map css-- toe via Open.

En open dan het bestand index-.html en het gelijk genaamde stijlblad index-.css.

Deze is al gekoppeld aan de html-pagina.

Start dan de browser Firefox op en open hierin het bestand index-.html.

Reden dat ik nu niet de Live-voorvertoning gebruik van Brackets.

Is omdat Firefox superfijne hulpmiddelen biedt voor het grid.

Na elke wijziging in het html- en css-document moet je wel de wijzigingen in brackets opslaan.

En daarna de browser verversen om een goede voorvertoning te zien

We starten met een heel eenvoudige layout.

De div met de classnaam 'container' is de parent.

De ouder van vijf kinderen, de children.

Te weten de html-elementen header, h, main, aside en footer.

Klik met de rechtermuisknop in het voorvertoningsvenster van Firefox en kies voor Element inspecteren.

Activeer ook het venster Indeling.

Hierin wordt het boxmodel weergegeven. In het Nederlands noemen ze dat het vakkenmodel.

Let op dit venster als we de css-eigenschap grid gaan inzetten.

Je past het grid altijd toe op de parent van de elementen die wilt gaan layouten.

Zodra ik de div 'container' opdracht geef om een grid te worden.

Dan worden alle eerstegraads kinderen automatisch griditems.

Dus de lijst in de footer, de ul doet niet mee als griditem.

Alleen zijn ouder, de footer.

Ik heb alle directe afstammelingen van de div 'container' een classnaam gegeven.

En deze heb ik in het css-stijlblad voorzien van een achtergrondkleur en een padding.

Zodat de inhoud afstand houdt ten opzichte van de randen van de box.

Al deze elementen zijn block-level-elementen.

Regel is dat zij altijd de hele regel in beslag nemen.

En standaard geen andere elementen naast zich toelaten.

Daarvoor biedt het grid uitkomst.

Ik typ in het css-stijlblad punt 'container' accolade openen en accolade sluiten.

Ik geef de div 'container' de eigenschap display:grid;

Bewaar de wijziging met Commando S en ververs de pagina in Firefox.

Activeer dan de optie raster overlappen.

Want hiermee kun je het grid laten tonen in de browser.

Ik ga het grid verdelen in twee kolommen met de eigenschap grid-template-columns.

Ik voer twee waarden in, voor twee kolommen, elke kolom wordt vijftig procent.

Ik bewaar het document en ververs de browser.

Het grid bevat nu twee kolommen en elke cel is automatisch gevuld met een griditem.

Als je de nummers van de gridlijnen niet in beeld ziet.

Dan moet je onderin het Inspector-venster bij 'Indeling' de optie 'Regelnummers weergeven' activeren.

Het grid heeft ook een eigen maateenheid om kolommen te creëren.

In plaats van percentages kan ik ook gebruik maken van fractions.

Dat schrijf je als volgt; één fr, één fr, één fr. Dat is dan een driekoloms.

En elke kolom neemt evenveel ruimte in.

Je kunt op deze manier fantastisch spelen met de verhoudingen.

Kijk als ik een verdeling maak van één fraction en daarna twee fractions.

Dan heb ik nu een grid waarin de tweede kolom twee keer zo breed is als de eerste kolom.

Je kunt zelfs maateenheden met elkaar combineren.