Toepassen van grid op de secties

[larsdouweschuitema]

Hoe grid te gebruiken

Jullie vroegen mij om hulp bij het opzetten van grid ipv het gebruik van position: absolute;. Hieronder een simpel voorbeeld. Probeer te kijken hoe ik het heb gedaan om er van te leren. Je kunt deze code rustig vervangen met wat jullie nu hebben, en vervolgens weer opnieuw vullen met de andere elementen. Om het gemakkelijker te maken zou ik de huidige CSS/HTML voor deze elementen er uit halen en opnieuw schrijven (refactoren). Dan voorkom je bugs! In het voorbeeld gebruik ik geen CSS classes, maar deze kunnen jullie natuurlijk wel gebruiken.

    <main>
      <h1><img src="assets\icons\Heart Filled.svg" /> Alle bewaarde huizen</h1>
      <div>
        <section>
          <!-- hier de inhoud -->
        </section>
        <section>
          <!-- hier de inhoud -->
        </section>
        <section>
          <!-- hier de inhoud -->
        </section>
        <section>
          <!-- hier de inhoud -->
        </section>
      </div>
    </main>

main div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust column width as needed */
  gap: 20px; /* spacing between grid items */
}