CSS Grid: An excellent medium for new designers and developers!

CSS Grid: An excellent medium for new designers and developers!

In this recent piece, Chen Hui Jing takes readers on an entertaining romp through CSS Grid. Entertaining because the tone is friendly. Romping because CSS Grid is, as Jing says, "really special." He calls it a dynamic medium and he is enthused about designing in it.

First, Jing explains his analog approach and why CSS Grid is an excellent medium for new designers and developers. It's excellent because it is visual and intuitive. Jing shares his hand-drawn grid of a site that inspires him, and reveals how a newcomer can pretty much trace a website and then divide it into whatever sized columns and rows they choose.

He also provides examples of the grid syntax. The grid syntax acts almost like a silhouette of the design, making CSS Grid a visually intuitive coding experience. Since Jing is self-taught, he relies quite a bit on tweaking and adjusting, sizing and re-sizing, and generally playing around with morphing possibilities. It's pretty easy to say that adjusting is his favorite part of the entire process.

When it comes to building, he starts with markup and throws in a few other "personal preferences" but makes the case that the base layout should be universal. He uses fr and viewport units to fill the window and admits that the resulting code looks a bit messy. However, it works out just fine. He successfully turns a static image into a dynamic one and has a great time doing it.

After reading his piece it's hard not to want to start playing around with CSS Grid yourself. It is also a bit difficult not to check out Jing's other posts and guides. In those posts, he explains other aspects of CSS Grids in a very user-friendly way. So, if you are looking for a guide or write-up of CSS Grid, whether you are a new-comer or have some experience, then you might want to check out this piece.

CSS Web Design Guides