The Grid Within

Building on the previous article CSS Grid Layout, in this article we are going to look at grids within grids, or more correctly termed nested grids, to show you just how powerful CSS Grid Layout is. Take a look at the example 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;
  }

  .inner-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(50px, auto);
    padding-bottom: 40px;
  }

  .seven{
    grid-column: 1 / 3;
    grid-row: 1;
    border: solid 1px #8a8a6f;
    background-color: #99998c;
  }

  .eight{
    grid-column: 1;
    grid-row: 2;
    padding-top: 10%;
    border: solid 1px #8a8a6f;
    background-color: #99998c;
  }

  .nine{
    grid-column: 2;
    grid-row: 2;
    padding-top: 10%;
    border: solid 1px #8a8a6f;
    background-color: #99998c;
  }

  .ten{
    grid-column: 1;
    grid-row: 3/7;
    padding-top: 10%;
    border: solid 1px #8a8a6f;
    background-color: #99998c;
  }

  .eleven{
    grid-column: 2;
    grid-row: 3;
    padding-top: 10%;
    border: solid 1px #8a8a6f;
    background-color: #99998c;
  }

  .twelve{
    grid-column: 1;
    grid-row: 7;
    padding-top: 10%;
    border: solid 1px #8a8a6f;
    background-color: #99998c;
  }

  .thirteen{
    grid-column: 2;
    grid-row: 4/8;
    padding-top: 10%;
    border: solid 1px #8a8a6f;
    background-color: #99998c;
  }
          

HTML

  <div class="wrapper1">

    <div class="one">One</div>

    <div class="two">Two

      <div class="inner-grid">

        <div class="seven">

          <p>Seven</p>

          <p>(I&apos;m Part Of The Inner Grid)</p>

        </div>

        <div class="eight">Eight</div>

        <div class="nine">Nine</div>

        <div class="ten">Ten</div>

        <div class="eleven">Eleven</div>

        <div class="twelve">Twelve</div>

        <div class="thirteen">Thirteen</div>

      </div>

    </div>

    <div class="three">Three</div>

    <div class="four">Four</div>

    <div class="five">Five</div>

    <div class="six">Six</div>

  </div>
          

Output

What Is Happening

Once again let’s take a look at what his happening in the above example.

• Carrying on from where we left off last time, you can see we have made an addition to box two. This is where we added our inner grid, .inner-grid, and our extra boxes, seven through to thirteen, to show you just how powerful and flexible using Grid Layout can be.We start off by creating a div element inside the existing class=”two” div; giving it the class=”inner-grid”. Then we create our boxes seven through to thirteen and give them their corresponding class rules. If you are familiar with CSS, you should know that a class can be used multiple times within an HTML page, and on different elements, where as an ID should only be used once. Therefore you should take care when naming your classes. In the above example we have given the boxes a class name that corresponds with their box name/number. This works fine for this tutorial as we only intend to use each box once, however this could get quite confusing if we had multiple elements, in this case divs, with the same heading, or we wanted to apply the same class rules on different elements. So take care and think about how you name your CSS Class Rules. The following article in stackoverflow CSS Class Naming Convention may help you.Anyway back to where we were. After creating our inner-grid div and our boxes seven to thirteen, we declare the rule to display the inner-grid div as a grid, display: grid; and define how we want it to behave. After that it is simply a case of defining the behaviour of the remaining boxes(div elements), within the inner-grid, much the same was as we did in the previous article, CSS Grid Layout.
• You can see from the above example, just how complex you can make your page look using CSS Grid Layout. Whilst you may not want your page to look as busy as this, I think you’ll agree the possibilities are endless, and we have barely scratched the surface.

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 this great website by Rachel Andrew Grid By Example, so please dive in and take a look.