Стек элементы сетки css

Я получил макет, основанный на сетках. Два меню слева и справа и область для содержимого посередине.

В области содержимого я получил сетку 4х4. Пример макета с сеткой 4x4: https://codepen.io/mannberg/pen/qemayy

html / мопс

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 требуется для некоторых классов, используемых в примерах.

Сетка 4x4

Получился еще один макет с сеткой 2х2 в области содержимого. Пример макета сетки 2x2: https://codepen.io/mannberg/pen/pMPNOK

html / мопс

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

Как я могу наложить сетку 2x2 на сетку 4x4? Я попытался возиться со значениями z-index класса css .inner-grid2, но у меня не получилось заставить его работать

Я хотел что-то подобное

составные сетки

Но получил этот https://codepen.io/mannberg/pen/qemRXa: '(

Как мне использовать z-index / position, чтобы это работало?


html css css-grid
person Goran    schedule 31.07.2019    source источник
comment
Включите код, относящийся к вопросу, в самом вопросе. Ваш пример в его нынешнем виде также немного сбивает с толку. Возможно, замените цифры в наложении буквами, чтобы их было легче идентифицировать. Наконец, тег center устарел и не должен использоваться   -  person Jon P    schedule 31.07.2019
comment
Спасибо за ваши предложения. Я включил код для сеток   -  person Goran    schedule 31.07.2019
comment
Хотя не совсем достаточно, но это начало. См. минимальный воспроизводимый пример, CSS действительно нуждается в HTML для контекста.   -  person Jon P    schedule 31.07.2019
comment
Спасибо за ваш вклад. Весь код, необходимый для воспроизведения примеров, был добавлен в вопрос. Я использовал ‹center›, потому что не хотел больше добавлять CSS. Хорошего дня   -  person Goran    schedule 31.07.2019

Ответы (1)


arrow_upward
1
arrow_downward

Поскольку 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.

person Jon P    schedule 31.07.2019
comment
Отлично, это то, что я ищу. Могу ли я сделать так, чтобы верх и низ сетки также совпадали? - person Goran; 31.07.2019
comment
Я обернул .mainContent блоком div с отступом и удалил его из .mainContent. Спасибо. Идеальное решение! codepen.io/mannberg/pen/aeWLza - person Goran; 31.07.2019