Неравное количество элементов сетки в строке в контейнере сетки с использованием сетки CSS - PullRequest
Новая
       2

Неравное количество элементов сетки в строке в контейнере сетки с использованием сетки CSS

0 голосов
/ 13 октября 2019

enter image description here

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

Ответы [ 3 ]

1 голос
/ 13 октября 2019

Вот еще одна идея с меньшим количеством кода: 

.grid {
  display: grid;
  grid-auto-rows: 100px;
  grid-gap: 20px;
  width: 70%;
  margin: 50px auto;
}

.grid  > * {
  border: 1px solid black;
  padding: 10px;
}

.full-width {
  grid-column: span 3
}
<div class="grid">
  <div class="full-width"></div>
  <div class="full-width"></div>
  <div class="one-third-width"></div>
  <div class="one-third-width"></div>
  <div class="one-third-width"></div>
</div>
0 голосов
/ 13 октября 2019

Для справки: этот блог css tricks .

свойство grid-column принимает начальную и конечную строки или начальную строку и значение диапазона. Таким образом, идея состоит в том, чтобы сделать три столбца и дать первые два элемента полной ширины. 

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  width: 70%;
  margin: 50px auto;
}

.full-width, .one-third-width {
  border: 1px solid black;
  padding: 10px;
}

.full-width {
  grid-column: 1 / 4
}
<div class="grid">
  <div class="full-width"></div>
  <div class="full-width"></div>
  <div class="one-third-width"></div>
  <div class="one-third-width"></div>
  <div class="one-third-width"></div>
</div>
0 голосов
/ 13 октября 2019 
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}

.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}

.item1 {
grid-column-start: 1;
grid-column-end: 4;
}
.item2{
grid-column-start: 1;
grid-column-end: 4;
}

</style>
</head>
<body>

<h1>Grid Lines</h1>

<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>  
<div class="item4">4</div>
<div class="item5">5</div>

</div>

</body>
</html>

Так что-то вроде этого?

...