Оформление блоков в CSS Grid [закрыт]

146

11 декабря 2019, 19:40

Closed. This question is off-topic. It is not currently accepting answers.

Want to improve this question? Update the question so it's on-topic for Stack Overflow на русском.

Closed 9 месяцев назад.

В данный момент осваиваю CSS Grid и во время верстки столкнулся с проблемой: не понимаю, как можно "оформить" блок созданный с помощью грида. Т.е, к примеру, добавить в него еще один div, чтобы создать еще один блок внутри. Когда пытаюсь провернуть подобное, все столбцы улетают на орбиту. Помогите понять, пожалуйста, каким образом можно добавить оформление к подобным блокам. Желаемый результат (примерный) прикрепил в виде изображения.

Answer 1

Так?

.grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-gap: 10px; 
  width: 320px; 
  background: #232323; 
} 
 
.item { 
  display: block; 
  width: 100%; 
  background: #343434; 
} 
 
.window { 
  display: block; 
  width: calc(100% - 20px); 
  height: 80px; 
  margin: 10px; 
  background: #d7d7d7; 
  margin-bottom: 50px; 
} 
 
.bottom { 
  display: block; 
  width: 100%; 
  height: 30px; 
  background: #5539c3; 
}

<div class="grid"> 
  <div class="item"> 
    <div class="window"></div> 
    <div class="bottom"></div> 
  </div> 
  <div class="item"> 
    <div class="window"></div> 
    <div class="bottom"></div> 
  </div> 
  <div class="item"> 
    <div class="window"></div> 
    <div class="bottom"></div> 
  </div> 
</div>