Exploring Grid CSS

Share on facebook
Share on twitter
Share on linkedin

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]

Leave a Replay

About Me

This is my place to express my road that I have traveled through life. The road is less traveled as I have not really considered myself to conform to the ‘norm’ for a woman of my vintage.

I have had several careers, lots of differing interests and experiences, and the knowledge gained from these I would like to share.

 

Recent Posts

Giving your hands some help

For those of  who have not had a hand injury or born with out “normal” hands; we only have one set of hands, unlike some sci-fi characters. As such we should give them a “helping hand” so that we have long into our old age working as expected without any pain added by our modern

Read More »

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

Read More »

ANZAC Day and being a Peace-Time Veteran

This is a reflection on ANZAC Day and what it means to one female veteran who has served 16 years in the Royal Australian Air Force.
ANZAC Day means different things to different people and this is just one persons opinion.

Read More »