The Grid Within

13th August 2020

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

One
Two

Seven

(I'm Part Of The Inner Grid)

Eight
Nine
Ten
Eleven
Twelve
Thirteen
Three
Four
Five
Six

What Is Happening

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

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.



Find out more about how you can get your business online by calling: 07545 642342

or

Fill out our contact form