tobireif.com / posts Twitter

Layout-Fun with CSS Grid

CSS Grid is fast (no framework needs to be loaded), powerful (it can be used for almost any layout), responsive (it has eg minmax, fr, repeat(auto-fit) ), well-supported (it works in all modern browsers), quick (complex layouts can be coded quickly), and it's pure CSS (no need to change eg HTML attributes).

A Grid demo

Check out the demo at tobireif.com/demos/grid. It features three responsive layouts applied to the same HTML.

View each of the three layouts, and while viewing each layout slowly resize the browser window to be narrow and back.

In case that's not possible (eg if you're on mobile), here's a video:

In the source there are three blocks .layout1, .layout2, .layout3 (and one for max-width 359px). Each contains page-width breakpoints.

Another demo

Here's a demo that you can resize right in the page, on desktop and on mobile:

resize

I created the demo to show that CSS Grid is a great option for implementing designs featuring complex layouts in a straightforward way.

In the above demo there are six layouts. On smartphones you can view eg four (eg five when you rotate the phone).

As content there are auto-scaling SVGs. These generated dots are just stand-ins – in real pages there'd naturally be real content such as text, photos, videos, illustrations, etc.

The outer grid of the widest layout (which is visible on desktop):

display: grid;
grid-template-columns: repeat(6, calc(100% / 6));
grid-template-rows: repeat(5, 20%);

There are six columns, all have the same width.
There are five rows, all have the same width.

Then there's code for single cells, for example:

#grid > *:nth-child(3) {
  grid-column: 5;
  grid-row: 1 / span 3;
}

In this widest layout (which is shown in desktop widths) there are two nested grids.

The layout shown in demo-widths below 300px (the third layout when you resize the demo from small towards larger):

grid-template-columns: 25% 15% 20% 15% 25%;
grid-template-rows: 15% 15% 15% 10% 15% 15% 15%;

All of the six layouts are implemented using simple and readable Grid code.

I hope that the two demos show that CSS Grid is fun.

Dealing with obsolete browsers

Browser-support for CSS Grid is really great, all modern browsers support it.

But obsolete browsers with insufficient support for web standards still exist and need to be dealt with.

I simply prompt users of obsolete browsers to use a modern browser (any modern browser).

Using JS I do feature-detection and when necessary display this for users of obsolete browsers:

"Please use a modern browser, for example Microsoft Edge, or Google Chrome, or eg Mozilla Firefox."

Here's the code:

function supportsCssGrid() {
  return ("CSS" in window) && CSS.supports("display", "grid");
}
if (!supportsCssGrid()) {
  document.body.innerHTML =
    '<p style="padding:0.5em;text-align:center;' +
    'font-size:1.6em;color:black">' +
    'Please use a modern browser, ' +
    'for example Microsoft Edge, ' +
    'or ' +
    '<a href="https://www.google.com/chrome/">Google Chrome</a>, ' +
    'or eg ' +
    '<a href="https://www.mozilla.org/en-US/firefox/">Mozilla ' +
    'Firefox</a>.' +
    '</p>';
}

Make sure to test on all relevant desktop and mobile setups, including those browsers that you recommend in the prompt. Everything should work well in all modern browsers (otherwise consider reporting the respective bug). And in obsolete browsers the update prompt should be shown.

An added benefit for these users is that their chosen modern browser will potentially be more secure than their obsolete browser. Another benefit is that all sites will potentially work better for them, not just the one displaying the prompt.

Promoting the use of modern browsers means promoting support for web standards!

Another option is to use @supports and fallback-CSS.

If you enjoyed this post, follow me on Twitter Twitter