CSS Grid Layout

13th August 2020

For this article I am going to assume that you are already familiar with CSS, and that you are ready to add a powerful and relatively new tool to your armoury, CSS Grid Layout, more commonly known as Grid.

As of March 2017 Grid has been supported by most of the major browsers, including Chrome, Firefox, and Safari. The IE/Edge version of the specification is prefixed with an -ms prefix, and at the moment implementation is not 100%. With that I mind you might be forgiven for asking "Should I be using Grid"? Well it's a personal decision, but for me the answer is an unequivocal yes. It is also worth noting that you do not have to use Grid in an all or nothing way, as it integrates well with other css methods, making it a great method for enhancing and updating existing sites.

Okay, so what is Grid? According to W3 Grid defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. Basically this means it can handle both columns and rows, Take a look below:-

CSS

  .wrapper1 {
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
    grid-auto-rows: minmax(100px, auto);
    color: black;
    margin-bottom: 50px;
  }

  .one {
    grid-column: 1 / 4;
    grid-row: 1;
    text-align: left;
    z-index: 20;
    padding: 10px 36% 10px 3%;
    border-radius: 10px;
    box-shadow: 5px 5px 20px #000;
    background-color: #99998c;
    opacity: 0.7;
  }

  .two {
    grid-column: 3 / 5;
    grid-row: 1 / 6;
    text-align: center;
    padding: 10px;
    z-index: 30;
    border-radius: 0 10px 0 0;
    background-color: #e5e5c8;
    opacity: 0.9;
  }

  .three {
    grid-column: 1;
    grid-row: 2 / 3;
    padding: 10px;
    transform: rotate(-40deg);
    text-align: center;
    z-index: 10;
    background-color: #e5e5c8;
    opacity: 0.7;;
  }

  .four {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    padding: 10px;
    z-index: 5;
    border: solid 1px red;
    opacity: 0.7;
    background-color: #8a8a6f;
  }

  .five {
    grid-column: 1 / 3;
    grid-row: 3 / 6;
    padding: 10px;
    border-radius: 50%;
    text-align: center;
    padding-top: 100px;
    z-index: 50;
    box-shadow: 5px 5px 20px #000;
    opacity: 0.7;
    background-color: #a2a289;
  }

  .six {
    grid-column: 2 / 5;
    grid-row: 4;
    padding: 10px;
    z-index: 40;
    box-shadow: 5px 5px 20px #000;
    opacity: 0.7;
    background-color: #99998c;
  }

HTML

  <div class="wrapper1">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
    <div class="four">Four</div>
    <div class="five">Five</div>
    <div class="six">Six</div>
  </div>

Output

One

Two

Three

Four

Five

Six

What Is Happening

So let's take a look at what his happening in the above example.

Firstly we have created a div with the class name "wrapper1" to encompass the whole section within the page. we start by giving the wrapper a 20px top padding, just to bring it down from the top of the page. I have also given it a margin of 50px at the bottom, purely to separate it from this descriptive section. There is also a rule of, color: black; just to make the text stand out. Now for the really interesting bit, we first let the browser know that we are going to be using a grid, by declaring the rule display: grid;

Next we let the browser know that the grid wants to be four equal columns across the page, grid-template-columns: repeat(4, 1fr); How do we know this? Well the grid-template-columns: tell us we are working with columns and the repeat(4, 1fr); tells us that we want 4 columns each to be 1fr (1 flexible fraction) wide. This means that however wide the page is, each column will shrink or grow to accommodate the available space on a equal column basis. We could have also declared this rule thus, grid-template-columns: 1fr 1fr 1fr 1fr;

Now we give some white space between each column and row using the rule grid-gap: 30px. This is in effect the gutter between each row and each column. If we only wanted a column gap or row gap, we would use grid-column-gap or grid-row-gapFinally by declaring the rule, grid-auto-rows: minmax(100px, auto); we haven't actually implicitly added any rows, but we have said that, any rows that are automatically created are done so with the caveat that, each row has a minimum height of 100px, and a maximum height automatically determined by the content within the row.
Next we declare the rule for the class="one", or .one. The first declaration is probably the hardest to get your head around at first, grid-column: 1 / 4;. If we have four columns | | | | | we have five lines to define those columns and the rule grid-column: 1 / 4; actually means start at line one and end at line four. You can clearly see that in the above example, where box one does not go all the way to the end, but in fact stops where the imaginary line four would be.

Then comes grid-row: 1; this div (box one) occupies one row, and as we know it is a minimum of 100px in height with a maximum set by its content. After that we follow with some more commonly used CSS rules: text-align: left; to align the text to the left; z-index: 20; the stack order of the div, An element with greater stack order is always in front of an element with a lower stack order.

Next comes padding: 10px 36% 10px 3%; which in this case is a mixture of pixels(fixed) and percentage(flexible) measurements. 10px top, 36% right, (can you guess why?) 10px bottom and 3% left.After that we give our box a radius on the corners, a box shadow, a background color and finally an opacity. When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead
Now we move on to the CSS rule for class="two". Firstly we can see by applying the CSS rule, grid-column: 3 / 5; we are spanning from line three to line five, the end of column four. The next rule grid-row: 1 / 6; is interesting, here we are spanning from line one to line 6, effectively generating 5 rows, each with a minimum of 100px and a row gap of 30px as declared in the original .wrapper rule setting up the grid. This means that in effect, if we did nothing else after creating this box, there would be a box 2 columns wide and 5 rows high with the text "two" at the top and in the center, text-align: center; The z-index of box two is higher than that of box one, thus it appears on top of box one. It only has a radius in the top right corner and the rest of the rules are similar to box one.
The CSS rule for class="three" is similar to the previous two rules with the exception of rules, grid-column: 1; and transform: rotate(-40deg); The rule, grid-column: 1; tells us to start at grid line one, but because no end line or span is declared the grid-column-end is set to auto which has a default span of 1. The CSS rule, transform: rotate(-40deg); is a CSS3 property that is not specific to grid layout, but is mentioned because of the added flexibility it has when used within a grid context.
The remaining classes use variations of the CSS rules we have already discussed, but help to show the power and versatility of using CSS Grid

So once we have written the CSS the page is constructed with just eight lines of code

I hope you have found this article useful and informative, and please feel free to leave any comments via my contact form, that you feel may be relevant. If you would like to learn more about CSS Grid, there are numerous resources available on the web, including a great website by Rachel Andrew Grid By Example, so please dive in and take a look.

Previous Article Next Article