CSS Grid Layout for Sitecore

It is copy of my article to keep everything in one place, initially published here.

Before reading this blog, I recommend familiarising yourself with CSS Grid Layout. I like this guide. Or if you prefer to learn it during play in game, try CSS Grid Garden.

Major part of Sitecore projects from my experience has either predefined preset of layouts(containers for components) or are based on basic components of CSS frameworks: rows and columns(e.g.: Bootstrap, Foundation and others).

First approach is clear and obvious, you have predefined list of possible layouts: single column, two equal columns, three equal columns, one narrow column one wide column and others. This approach works good, but when site editor would need some new layout, he would not be able to create it without help of a developer. After passing of some time you will get a lot of containers that are designed only to build grid system. And when you are creating new page it is hard to select right container control from bunch of “three column layouts”.

Second approach is more flexible. You have 2 generic controls: Row and Column. You can define column width, row height. Exactly, like you do with Bootstrap grid system. Difference is only that you set column and row parameters on the level of rendering parameters in Sitecore. By combination of different rows and columns, you would be able to get any layout you can imagine. And you have only two controls that respond for grid structure: row and column. You know exactly what they do and how they will behave in different situations. The back side of coin is difficulties in designing complex layout. You get dozen of rows and columns. You are able to manage them somehow in the Experience Editor, making time to time mistakes with adding components to the wrong placeholder. And you get mess in the layout details of your page. You see bunch of rows and columns in the list with absence of understanding what is inside of them and are they still in use?

Mixed path of first and second approaches can resolve some of their limitations. But misuse of it by site managers could create a mess.

CSS Grid layout offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. It is supported by modern browsers:

sing CSS Grid allow you to get column/row layout without needs to include any additional frameworks. You can have only one container component per page in Sitecore. This component is configurable, you can set any amount of columns and rows, spacing between columns and rows, alignment.

I have created prototype of CSS Grid Layout for Sitecore.

You can try it by yourself:

1. Download Sitecore update package from AppVeyor
2. Install it using update installation wizard /sitecore/admin/UpdateInstallationWizard.aspx
3. You will be able to insert "Container" component /sitecore/layout/Renderings/CSSGrid/Container. Amount of columns and rows is configurable using rendering parameters.
4. Inside placeholder under "Container" component you will be able to insert any amount of "Item" components /sitecore/layout/Renderings/CSSGrid/Item. Location(row/column) and size(rows/columns) of “Item” component is configurable using rendering parameters (It is expected that all UI components will be compatible with Grid CSS and you will be able to place them inside container. And configure location/size/alignment using rendering parameters)

If you have any difficulties, refer to example how to use it.

Few screenshots, how it will work:

Using CSS Grid Layout for Sitecore we have got flexible layout for Sitecore project without mess in layout details. We have only one container for unlimited number of controls. Location of each control is configured by its rendering parameters. In the next part I will describe how to use this module in details.

P.S. If you are interested in free automated system that prepares Sitecore CSS Grid Layout package from GitHub sources, please read my article about possible CI/CD configuration for open source projects.