CSS Grid - Как поддержать разное кол-во столбцов в сетке

Question

Хочу сделать сетку, которая бы поддерживала в себе 3 и 4 столбца.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: space-between;
  grid-gap: 2rem;
}

.item {
  height: 180px;
  background-color: #232322;
}

.item1 {
  grid-column: span 4;
}

.item6 {
  grid-column: span 2;
}

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item item6"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Как можно 3 блока во втором ряду растянуть на всю ширину (т.е. 3 столбца) ?

Answer 1

Я пытался использовать flex-box

body{
    margin:0;
    padding: 0;
}
.container{
  width:100%;
}

.container tr .item:last-child{
    margin-right: 0;
}

.container tr{
    display: flex;
    margin: 20px  20px;
}

.item {
  width: 100%;
  height: 180px;
  background-color: #232322;
  margin-right: 20px;
}

<table class="container">
<tr>
   <td class="item"></td> 
</tr>
<tr>
    <td class="item"></td>
    <td class="item"></td>
</tr>
<tr>
    <td class="item"></td>
    <td class="item"></td>
    <td class="item"></td>
</tr>
<tr>
    <td class="item"></td>
    <td class="item"></td>
    <td class="item"></td>
    <td class="item"></td>
</tr>
</table>

Answer 2

Решение на гридах. Так вы хотели?

.grid
{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 5px;
}

.grid__item
{
  height: 180px;
  background-color: #232322;
}

.grid__item.col-12
{
  grid-column: span 12;
}

.grid__item.col-6
{
  grid-column: span 6;
}

.grid__item.col-4
{
  grid-column: span 4;
}

.grid__item.col-3
{
  grid-column: span 3;
}

<div class='grid'>

  <div class='grid__item col-12'></div>
  
  <div class='grid__item col-6'></div>
  <div class='grid__item col-6'></div>
  
  <div class='grid__item col-4'></div>
  <div class='grid__item col-4'></div>
  <div class='grid__item col-4'></div>
  
  <div class='grid__item col-3'></div>
  <div class='grid__item col-3'></div>
  <div class='grid__item col-3'></div>
  <div class='grid__item col-3'></div>

</div>

БЛОГ НА HUSL

CSS Grid - Как поддержать разное кол-во столбцов в сетке

Ответы (2 шт):