html - 堆叠CSS网格元素

我有一个基于网格的布局。左右两个菜单以及中间的内容区域。

在内容区域中，我得到了一个4x4的网格。
示例4x4网格布局：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;
}

示例之间共享的CSS

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。

我在内容区域得到了另一个带有2x2网格的布局。
示例2x2网格布局：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网格叠加在4x4网格上？我试图弄乱CSS类.inner-grid2的z-index值，但是我没有使它起作用

我想要这样的东西

但是得到这个
https://codepen.io/mannberg/pen/qemRXa
：'（

如何使用z-index / position使它正常工作？

最佳答案

由于position:absolute从正常流程中删除项目。

将position:relative添加到.mainContent，以便网格相对于其定位。

将width:100%添加到innerGrid2以将其强制为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>

另请参见：https://codepen.io/nobloss/pen/JgNywB

关于html - 堆叠CSS网格元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57282022/