CSS Grid

CSS Grid is een tweedimensionaal lay-outsysteem waarmee je complexe grid-gebaseerde layouts kunt maken met rijen en kolommen tegelijk. In tegenstelling tot Flexbox dat in één richting tegelijk werkt, laat Grid je zowel horizontale als verticale plaatsing van elementen controleren, wat het ideaal maakt voor algemene paginalayouts, afbeeldingsgalerijen en complexe componentarrangementen.

Om een responsive portfolio-galerij te maken, gebruik je display: grid met grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) om automatisch kolommen te maken die minimaal 300px breed zijn maar groeien om beschikbare ruimte te vullen. Voeg gap: 20px toe voor consistente ruimte tussen items, en de layout past zich automatisch aan aan verschillende schermgroottes zonder media queries.