logo Vue.js logo Vue.js logo Ma logo Theo

Fotogalerij met CSS Grid

en een snufje JS

Plan

  • Hoe gaan we dit het beste oplossen?
  • Kijken wie er is
  • Uitleg van de opdracht
    • Als alles OK dan kunnen jullie beginnen
  • Kijken naar een oplossing voor Donald Duck les
  • Vragen over andere opdrachten,d ie beoordeeld gaan worden
  • Zoeken naar mogelijkheden voor individuele begeleiding op afstand

Ervaringen met videoconference in Teams:

  • Geen achtergrond geluiden
  • Kijk telkens in de chat
  • Zet je eigen microfoon op mute
  • Wil je iets zeggen stuur dan een chatbericht, dan kan ik je het woord geven

Leerdoelen
herhaling

JS

  • document.createElement();
  • .className
  • .append();
  • for-lus (nu omgekeerd!)

CSS

  • grid-template-columns
  • grid-column
  • repeat()
  • auto-fill
  • minmax()
  • object-fit

nieuw

css

  • grid-auto-flow: dense
  • grid-auto-rows
  • :nth-child selector

:nth-child selector

 <div id="contain">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
 </div>
            
 #contain p:nth-child(3n) {
     background-color: pink;
 }

1

2

3 elke derde wordt geselecteerd

4

grid-auto-rows bij CSS Grid

  • Tot nu toe wordt er automatisch een nieuwe rij gemaakt als de kolommen vol zijn.
  • De hoogte van elke rij is zo hoog als het hoogste element;
  • Met grid-auto-rows kun je zelf aangeven hoe hoog je de kolommen wilt maken
  • (eventueel met een afwisselende ingesteld hoogte)

grid-auto-flow: dense

  • Als je elementen over meerdere rijen/kolommen laat uitstrekken,
    kunnen er lege plekken ontstaan
  • met grid-auto-flow: dense worden die gevuld

Naar de opdracht

https://blanken5.home.xs4all.nl/galerij.html

  • Voor de galerij minstens 20 afbeeldingen
  • onderwerp vrij (stad / sport / artiest / kunst etc...)
  • verschillende verhoudingen lengte/breedte
  • eigen namen voor variabelen, functies en classes verzinnen
  • voeg zelf commentaar in je code toe
  • ook als je in deze les nog niet klaar bent: de voorlopige code committen op GitHub

Veel plezier