Here at Fisheye we’ve been working with Magento 2 for a while now. Having the opportunity to start a fresh with a new system also gives us the opportunity to work with a new codebase and introduce a few new, more advanced techniques and tricks too. Now that CSS GRID is supported by most of the major browsers, it seems the perfect time to introduce it into Magento 2 builds. This article will go through a very simple but powerful way to utilise GRID when building bespoke Magento 2 themes.

To follow this article we are assuming you have a basic knowledge of:

  • CSS 3 including using viewport units
  • HTML 5
  • Magento 2 and modifying layout markup in XML

Each Magento 2 page template has a class added to the body tag describing the general layout. These are usually .page-template-1column, .page-template-2columns-left, .page-template-2columns-right, and .page-template-3columns although, if you know much about customising templates then you can define more in the XML. This makes life especially easy when writing the CSS for layouts.

Single Column Layout

This is the most basic layout of any page and therefore the simplest implentation of CSS GRID.

Looking at the outputted HTML from 1column.xml, if we strip out all of the extra stuff and look purely at the HTML structure of the page it looks very much like this:

Note: If you are familiar with Magento 2 page templates you will notice that I have omitted the nav element from this layout. This is because, I use xml to move the nav element inside of the header element to keep the markup cleaner. It is a personal preference and this technique would work whether you did that or not.

All we need to add to our CSS now to implement GRID is this:

At this point we are manipulating the container that will house the grid so we set it to display: grid, we then tell it how many rows (and what heights those rows would be) and columns the grid will have. In this case there would be 3 rows and only 1 column.

Pretty simple right? If we then wanted to simplify that even further, grid-template-rows and grid-template-columns could be written in shorthand using grid-template like so:

The first set of values sets the number of of rows and the height for each, the second sets the width of the single column. And, because we’ve already set the width and heights of our grid templates we don’t need to add any more styles to force the content blocks to a specific height or width. Simple.

Admittedly, this really is a very simplistic grid and probably not how it was envisaged that GRID would be used at all, but it does illustrate just how easy it is to implement using the default classes Magento outputs and add it to our layout files.

The full code in action:

2 columns

Where CSS GRID becomes really powerful though is when we start to style .page-template-2column-left and .page-template-2column-right. Following the example CSS above, by adding to the .grid-template shorthand CSS we can set two columns in the layout instead of one:

This isn’t very different from what we already had, we’ve just added / 30vw 70vw after our settings for our rows to dictate there will now be two columns and also set the width of those columns.

You may have noticed that the body class has also changed. Now that we are using a two column layout, Magento is using 2columns-left.xml to create the structure of the page and therefore automatically updates the class appended to the body tag. And our base markup would now look something like this:

As a personal preference, I place the sidebar markup underneath the main content when it displays to the left of the content on desktop. This is partly for search engine purposes so that the main content of any page can be accessed more easily. But also because, often the content in a sidebar is secondary and therefore we would want it to display underneath the main content on mobile devices and not above.

Of course, with CSS GRID we no longer have to worry about where we place the sidebar in the markup. We can structure the HTML in any order and then position it on the grid wherever we want to. For example our HTML markup has the body class of .page-layout-2columns-left indicating that we do actually want the sidebar on the left of the page. We can do this easily by using grid-row-start and grid-column-start to control where it is positioned. For example:

This tells us that we want the sidebar to start on the second row in the first column. We can then use the same syntax on the .main-content to tell it to sit on the right as follows

Again, the content block starts on row two but this time also in column two which was defined earlier as being 70vw wide. If we were writing the code for .page-template-2columns-right all we would need to do is to swap the two blocks around to start in the opposite position in grid-column-start, and then adjust the widths accordingly.

The final part to this layout is to set the header and footer to span both columns, by using span in grid-column-start we can do this easily.

The full code in action:

3 columns

This is probably as complex as it gets for Magento page templates. More complex grids can be used within specific content blocks such as on category pages but looking purely at page layout, it wouldn’t get much more complicated than this.

For a three column layout our base markup would look something like this:

We would then modify the grid-template to show three columns instead of two. And, as before, set the specific position of each of the sidebars. The header and footer would then span all three columns. The CSS for three columns would look like:

The Full code in action:

As I said earlier, this is a very simple implementation of GRID, there is a lot more that can be done with it. For example:

    • We could take this further by creating bigger, more complex grids like the 12 column grid available in Twitter Bootstrap.
    • We could apply this to category pages for a products grid.
    • We could create template areas and give them more meaningful names.
    • And, we can always change our grid at breakpoints to control the layouts across other devices if needed.

Keep an eye out for more articles on how we use it in house.