Using CSS Grid

When designing Startpages or new Pages and Controls, one of the most challenging things is the layout of the design and make it as responsive as possible. Using HTML Tables is still an effective way to keep a grip on the layout, but Tables can be tricky when you want to do a responsive design. Using CSS Flex is a great way to make things more responsive. But Flex only allows you to work either horizontal or vertical. There are some workarounds for that, but for some reason I kept going back to using Tables. Maybe also because I'm more experienced with them thus more comfortable. But now CSS Grid is supported by all modern browsers, that is about to change.

Grid versus Flex

Flex works great for horizontal designs or vertical designs. In other words, Flex is mainly a one-dimensional way of thinking. Enter CSS Grid which is a true two-dimensional way of thinking and designing your page layout. Using grid-template-columns and grid-template-rows you can truely rasterize your page. After that, you can place your content on the grid. Independent of their position within the grid.

Have a look at this example that you can find on our website.

As you can see in the source of the page, the 4 Divs are listed underneath each other. So without CSS they would be displayed like that in the actual page. But the first thing I did with CSS Grid is create the grid itself using:

grid-template-columns: 2fr 1fr;

This makes for a layout with 3 columns where the first 2 columns are merged together. Much like most website that make use of a sidebar.

Now I wanted the 3rd Div to appear on the second Row in the Grid. Spanning all 3 Columns. This was done using:

grid-row: 2;
grid-column: 1/3;

This will automatically move the 2nd and 4th Div to third Row. And since the Grid's first and second column are merged together, the 4th Div will automatically move to the third column.

Rearrange everything for Responsive Design

As you can see, CSS Grid makes it really simple to place all your elements on a true two-dimensional grid. Which in itself is already very useful But when it comes to Responsive Design, that's where things get really usefull. As you resize your browser with our demo page, you see things will be rearranged.

As you can see in the source code of the page, the screen width is detected using:

@media screen and (max-width: 1200px)

From there, the positioning of the Divs is completly rearranged. Placing the 4th Div right behind the first one. And moving the 3rd Div to the bottom of the grid.

This is where CSS Grid stands out above HTML Tables or CSS Flex. Rearranging elements on your page would simply be impossible using those techniques. A workaround could be the use of Bootstrap, but that adds quite a bit of complexity. CSS Grid is a native technique that solves this problem in a much easier way.

Multi-Browser Support

CSS Grid is supported in all major Browsers for the current versions. Internet Explorer 10 also supports CSS Grid (in fact it was the first Browser to support it) but the standard has changed since those days. So if you expect a lot of users using your Pages or Applications, make sure to test and verify it works as intended.

Where to start?

The presentation that convinced me of the beauty of CSS Grid was one of Morten Rand-Hendriksen at WordCamp Europe in Paris last summer. This one you really should check out and get inspired.

A great tutorial including sources is one from Brad Traversy from Traversy Media. Who not only makes a lot of great tutorials but also is a great guy and I can highly recommend subscribing to his Youtube Channel.

And once you have mastered these basics, get in-depth knowledge from CSS Tricks where it's all explained into detail.

Now get started!

That's all for this post. I hope you got inspired by all the great possibilities CSS Grid has to offer and the ease of getting things done using it. I'm sure it will help you create even more beautiful Pages and Controls for your Essence Portals. Got Questions? Need some help? Just let me know!