Search code examples
htmlcsscss-grid

Stack css grid elements

I got a layout that is based on grids. Two menus left and right and an area for content in the middle.

In the content area I got a 4x4 grid. Example 4x4-grid layout: https://codepen.io/mannberg/pen/qemayy

html/pug

body.h-100.body-grid
    div.h-100.menyLeft
      div.h-100.bg-primary.text-light
        div.sidebar-heading.d-flex.justify-content-center
          h2 Left Menu
    div.h-100.mainContent.d-flex.flex-column.justify-content-center
        div.h-100.inner-grid
          each val in [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
            div.h-100.card.inner-grid-item.bg-secondary
              center
                h2= val          
    div.h-100.menyRight
      div.h-100.bg-primary.text-light
        div.sidebar-heading.d-flex.justify-content-center
          h2 Right Menu

css

.inner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 16px;
}

.inner-grid-item:nth-child(4n) {
  background-color: #20c997 !important;
}

.inner-grid-item:nth-child(3n) {
  background-color: #ffc107 !important;
}

shared css between examples

html, body {
  height: 100% !important;
  margin: 0px;
  padding: 0px;
}

.mainContent {
  padding-top: 18px;
  padding-bottom: 18px;
}

.body-grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 0.125fr 1fr 0.125fr;
  grid-template-rows:  100%;
}

Bootstrap4 is required for some of the classes used in the examples.

4x4 grid

I got another layout with a 2x2 grid in the content area. Example 2x2-grid layout: https://codepen.io/mannberg/pen/pMPNOK

html/pug

body.h-100.body-grid
    div.h-100.menyLeft
      div.h-100.bg-primary.text-light
        div.sidebar-heading.d-flex.justify-content-center
          h2 Left Menu
    div.h-100.mainContent.d-flex.flex-column.justify-content-center
        div.h-100.inner-grid2
          each val in [0,1,2,3]
            div.h-100.card.inner-grid-item2.bg-secondary
              center
                h2= val          
    div.h-100.menyRight
      div.h-100.bg-primary.text-light
        div.sidebar-heading.d-flex.justify-content-center
          h2 Right Menu

css

.inner-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr 1fr;
  grid-gap: 16px;
}

.inner-grid-item2:nth-child(3n) {
  background-color: #e83e8c !important;
}

2x2 grid

How can I stack the 2x2-grid grid over the 4x4-grid? I tried messing with the z-index values of css class .inner-grid2 but I didnt get it to work

I wanted something like this

stacked grids

But got this https://codepen.io/mannberg/pen/qemRXa :'(

How do I use z-index/position to get this to work?

Solution

  • As position:absolute removes items from the normal flow.

    Add position:relative to .mainContent so the grid is positioned relative to it.

    Add width:100% to innerGrid2 to force it to 100%.

    html, body {
  height: 100% !important;
  margin: 0px;
  padding: 0px;
}

.menyLeft {
}

.mainContent {
  padding-top: 18px;
  padding-bottom: 18px;
  position:relative;
}

.menyRight {
}

.body-grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 0.125fr 1fr 0.125fr;
  grid-template-rows:  100%;
}

.inner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 16px;
}

.inner-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr 1fr;
  grid-gap: 16px;
  position: absolute;
  top: 0;
  z-index: 20;
  width:100%;
}

.inner-grid-item:nth-child(4n) {
  background-color: #20c997 !important;
}

.inner-grid-item:nth-child(3n) {
  background-color: #ffc107 !important;
}

.inner-grid-item2 {
  background-color: rgba(108, 117, 125, 0.8) !important;
}

.inner-grid-item2:nth-child(3n) {
  background-color: rgba(232, 62, 140, 0.8) !important;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<body class="h-100 body-grid">
  <div class="h-100 menyLeft">
    <div class="h-100 bg-primary text-light">
      <div class="sidebar-heading d-flex justify-content-center">
        <h2>Left Menu</h2>
      </div>
    </div>
  </div>
  <div class="h-100 mainContent d-flex flex-column justify-content-center">
    <div class="h-100 inner-grid">
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>0</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>1</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>2</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>3</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>4</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>5</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>6</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>7</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>8</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>9</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>10</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>11</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>12</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>13</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>14</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item bg-secondary">
        <center>
          <h2>15</h2>
        </center>
      </div>
    </div>
    <div class="h-100 inner-grid2">
      <div class="h-100 card inner-grid-item2 bg-secondary">
        <center>
          <h2>a</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item2 bg-secondary">
        <center>
          <h2>b</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item2 bg-secondary">
        <center>
          <h2>c</h2>
        </center>
      </div>
      <div class="h-100 card inner-grid-item2 bg-secondary">
        <center>
          <h2>d</h2>
        </center>
      </div>
    </div>
  </div>
  <div class="h-100 menyRight">
    <div class="h-100 bg-primary text-light">
      <div class="sidebar-heading d-flex justify-content-center">
        <h2>Right Menu</h2>
      </div>
    </div>
  </div>
</body>

    Also see: https://codepen.io/nobloss/pen/JgNywB