CSS Grid Layout

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.

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.