Exploring Grid CSS

This is an experiment in using Grid CSS, that is used in a production site.The client wanted a visual representation of the work they do. The instruction was along the line of “we have many parts that fit together like a jigsaw”.

Whilst I have not created individual jigsaw pieces I have created a grid layout that is representative of that idea. It has different parts of the grid positioned according to whether the z-index is either higher or lower than one it is overlaid. Sort of a weave.

This was my first time using Grid CSS, and it was interesting. It did allow me to have control over where each of the figure elements were placed and it provides flexibility when using units that are flexible in nature, such as fr units, ems, rems, etc.

Thanks to Jen Simmons and her wonderful labs (https://labs.jensimmons.com/) that showed me the way to actually place the items and have them overlap.

I am sure that I could simplify this grid, however I am happy with the way it turned out and even better the client is happy.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”VdreQK” default_tab=”result” user=”hlnbee”]See the Pen experiment with jigsaw type layout by Helen Burgess (@hlnbee) on CodePen.[/codepen_embed]