CSS Grid Support

So, I finally decided to try out CSS Grids today on a single page website that I had to build. Grid has been out for a while and currently most, if not all, modern browsers support it. It makes creating layouts much simpler compared to the older methods using floats and flex-box.

CSS Grid Example

Below is a basic example.

<div class="grid-box">
    <div class="grid-box__item">
        <p>Content 1</p>
    </div>
    <div class="grid-box__item">
        <p>Content 2</p>
    </div>
    <div class="grid-box__item">
        <p>Content 3</p>
    </div>
    <div class="grid-box__item">
        <p>Content 4</p>
    </div>
</div>
.grid-box {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
}

That’s it. For the simplest grid, all you need is to have a property of  display: grid; on the parent element to define the grid. The next thing you can do is to define columns in your grid by using the  grid-template-columns: property. In the example, you can see that it is set to  2fr repeat(3, 1fr); which is the same as, and just a more organized way of writing  2fr 1fr 1fr 1fr;. An ‘fr’ unit (a ‘fraction’), in plain terms, is simply a unit that helps us divide the available space.

So in our example, the four units will create 4 columns in our grid. The immediate child elements  .grid-box__item will fall into place and assume their positions within the grid columns. The first column will take up 2/5th of the space within the grid, and the rest will take a fifth of the space, as exemplified below.

Content 1

Content 2

Content 3

Content 3

Simple enough, isn’t it? There is obviously much more to grids than just this. If you’d like to learn more about CSS Grid, I would highly recommend you go through this guide on CSS Tricks.

Back to the Story

Let’s get back to my story about using grids for the first time on a website. Soon enough, I completed the site and sent it over. It was great. Life was good.

A couple of days later, I received a message saying that the site looked broken on an older Macbook Air. Given that the site was done in a rush to meet a deadline, I didn’t have the time to test it out on older browsers (which I know I should have). All I did manage to do was to make the site responsive. What if the site was opened by a browser that didn’t support css grids? Well, this was my opportunity to investigate.

Discovery

I soon found out that when an older browser does not recognize a css property, it simply ignores it. So all of the  display: grid; properties on the few grids I had on the site were being ignored. The child divs now untethered from its parent elements, were each taking up the entire available width. The main grid that I used for the layout appeared relatively fine. It looked like a mobile layout with all the divs stacking on top of each other, which I was totally okay with, so I wasn’t worried about it.

The problem was with a ‘gallery’ grid block that I had within one of the main grid columns (yes, grids can be nested). Each image within the grid was taking up the entire width of the container.

After looking for a solution, I found out about a CSS at-rule @supports which is known as a feature query that checks and runs a block of CSS code if the browser supports that feature.

@supports (display: grid) {
  div {
    display: grid;
  }
}

This was exactly what I needed, and exactly what I used.

.gallery {
    display: flex;
    flex-flow: row wrap;
}

.gallery a {
    width: 20%;
}

.gallery img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

@supports (display: grid) {
    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        grid-auto-rows: 1fr;
    }
    .gallery a {
        width: 100%;
    }
}

In short, all I did was create a flex-box fallback. If a browser does not support grids then the display: flex; property will not be overridden by the display: grid; property that lives within the feature query.

This simple CSS rule saved my ass. I sent the website over and life was back to being good again.

Thank you for taking the time to read this post. The live site can be found at tibetfest.org for your perusal.


TL;DR Use the @supports feature query to override a fallback property.

Leave a Reply

Your email address will not be published. Required fields are marked *