Finley Home

Experiments in CSS Grid #bbd17

Featured, CSS, Web Tools, CSS Grid

Two years ago when Web Tools was released, CSS Grid was not supported in its current form by any browser. Now it is supported by all of them. But, in my opinion, unlike most features of CSS that have come before, Grid needs some good tooling around it to help ease work with it in development. So I have started to work on some tools to help with Grid and along the way, I have been dabbling a lot with Grid.

Below is a basic experiment: reproduce the layout of the new App Store on iOS. Along the way, I also found good use for CSS Custom Properties — Variables. I hate that they aren’t called variables. — in setting the background of articles, the background and text color of the text block on each, and more.

CSS is getting more and more powerful. But, along the way, it is getting more and more simple. Where old layout techniques (tables, floats, flex box) were truly ill-suited for layout, CSS Grid is 100% made for layout. So go, dabble with Grid. Grab a comic book and reproduce the layout. Or a poster from the 70’s. Learn the ins-and-outs of it because this is the future of where front-end web development and web design is.