Leer hoe CSS Grid-eigenschappen werken met Griddy.io

Als u de technische webtechnologie bijhoudt, moet u weten wat CSS-rasters zijn. Deze eigenschappen zijn nieuwe toevoegingen aan het CSS3-formaat en ze worden al snel de beste vriend van een ontwikkelaar.

We hebben onlangs een leuke game behandeld om je te helpen de CSS-rastereigenschappen te leren, maar games leren niet altijd praktische ideeën. Dat is waar Griddy misschien nuttiger is.

Met deze gratis webapp kun je pas grids in realtime aan en actualiseer live fragmenten op de pagina. U kunt knoeien met uw eigen aangepaste raster door kolommen, goten en marges te definiëren en de pagina opnieuw te structureren om te leren hoe rastereigenschappen werken.

Griddy is eigenlijk een gratis leermiddel gemaakt voor ontwikkelaars van de frontend wie wil meer weten over CSS-rasters.

Met deze webapp kunt u nieuwe items toevoegen aan het raster, andere items verwijderen en de grootte ervan aanpassen aan elke gewenste lay-out.

De webapp heeft verschillende secties met verschillende invoervelden voor het bewerken van rastereigenschappen. Hiermee kun je de rasterrijen / -kolommen opnieuw formatteren en ze leren je precies wat je doet onderweg.

U kunt kolomleemtes definiëren, rasteritems uitlijnen en spelen met uitvulinstellingen - via deze formuliervelden. Wanneer u een wijziging aanbrengt, wordt het voorbeeld en het kleine codefragment eronder automatisch bijgewerkt.

Op deze manier kun je de CSS gewoon in je eigen stylesheet kopiëren en plakken als je er verder mee wilt knoeien. Best wel gaaf!

Griddy is misschien niet zo leuk als Grid Garden, maar Griddy is een praktische manier om te leren en visueel begrijpen hoe de CSS-rastereigenschappen van invloed zijn op de pagina-elementen.

Om ermee te spelen, ga je naar de Griddy-startpagina. Je kunt ook je gedachten of vragen delen met de maker op Twitter @drewisthe.