The CSS Grid I have found CSS Grid to be a fantastic way to layout a website. It can make the design, as well as the development of the front-end a million times faster and easier. I am a big fan! CSS Grid enables you to create a grid, then go on to position elements of the page within and/or over the grid. If you are familiar with graphic design grid layouts then you will already feel comfortable with this idea, so when starting to work with CSS Grid it all seems to make perfect sense.
However, I have only found examples that use just a single CSS Grid across a whole website. With this article and demo, I aim to introduce the idea of using multiple grids within just one website with the purpose of aiding the iteration process found within todays development environments.
The Problem For me, the problem started to arise when designing and developing a one-page website. Love them, or hate them, the one-pager still has its place on the web and when using CSS Grid this can become a little tricky. This is due to the fact that all sections of information are on that same one page, causing the grid to get extremely long. In turn, this means editing or adding sections at a later date during an iteration process can become troublesome. This got me thinking… “What if I used HTML5 Section tags to divide the grid into more manageable chunks?”
My Solution With this in mind, I went about trying to create a solution to this problem and created The Multi-Grid One-Page Layout. This experimental layout demonstrates an alternative method of sectioning information while still having the benefits offered by CSS Grid layout. This is achieved through using HTML5 Section tags as usual but then placing separate CSS Grids within each section instead of just working with one huge site-long grid. The result of using this method looks a little something like this demo I have created here on CodePen.
In Conclusion I have found with this method that the information architecture of a website is far easier to maintain. It also means that code can be edited faster when working within teams and within an iterative development process. However, this said, I feel that The Multi-Grid One-Page Layout is still just one solution, to just one problem. I hope with CSS Grid we learn to break the mould that has become todays front-end with most designers playing it safe and keeping to the same familiar layouts for every website they create. Flexbox and CSS Grid give designer/developers a much greater control and freedom over the layouts they create. As CSS Grid becomes further adopted I hope it will bring with it a far more creative landscape while still maintaining a high focus on UX.
One Last Note It can be noted that another way to solve this problem would be through a method of using Nested Grids. By nesting smaller grids within the larger site-long grid a similar end result can be achieved. However, when placing a brand new section of information within a website it can still mean you need to move whole sections into other grid-areas. This then creates a domino-like knock-on effect which can be fiddly in more complex designs. It is for this reason I have found it is still easier to manage sections of content when using multi-grids nested within HTML5 Sections instead of other grids. An example of Nested Grids can be found HERE on Grid by Example created by Rachel Andrew.
The full article I have written on this topic can be found on Medium HERE.
Thanks for reading!