Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Getting to know CSS Grid Layout

Getting to know CSS Grid Layout

Author: Will Moody

Published:

Reading Time: (approx) 1 min

Tags that this post has been filed under.

Website design is ever-changing with the latest development being the CSS Grid Layout, this brings the ability to layout website pages to a whole new level.

CanIUse reports coverage as 75.15% as of 12-10-2017 with Opera Mini being unsupported and IE11 being supported with an older version of the specification, but this can be covered with some elegant fall-back solutions.

So with this in mind, I have redesigned this website to take advantage of the CSS Grid Layout system, the look hasn't changed much but the size of CSS and JS files has been greatly reduced.

If you are thinking of taking advantage of the CSS Grid Layout system I would recommend a great starting point is some great examples by Rachel Andrew at [Grid By Example] (https://gridbyexample.com/learn/), some examples at [CSS-Tricks] (https://css-tricks.com/snippets/css/complete-guide-grid/) and also this [article] (https://alistapart.com/article/practical-grid) by Eric Meyer at A List Apart.

Previous Article: Perch CMS Gulp Workflow utilising Pipit Pinion