совместить grid и list через css

14 января 2022, 21:10

Пытаюсь сделать верстку подобного характера:

вывод контента через react-jsx

{key % 4 == 0 ? (
  <div className="grid">grid</div>
) : (
 <div className="list">list</div>
)}

получаю такой макет:

<div class="grid">grid</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="grid">grid</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="grid">grid</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="grid">grid</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>

задача как из этого макета верстать как на скриншоте по средству css

Answer 1

Вот жесть с переносами на следующую строку (по 8 на строке в 4 колонки).
И вновь пришлось отказаться от флексов и натворить жести на флоатах :D

.grid, .list { 
  float: left; 
  width: 25%; 
  outline: 1px dotted red; 
} 
 
.grid { 
  height: 180px; 
  background: silver; 
} 
 
.list { 
  height: 60px; 
  margin-right: 40%; 
} 
 
.grid:nth-child(8n + 5) { 
  margin: -120px 0 0 -40%; 
} 
 
.list:nth-child(even) { 
  background: antiquewhite; 
} 
 
.list:nth-child(8n + 6), .list:nth-child(8n + 7), .list:nth-child(8n + 8) { 
  margin: 0 0 0 -15%; 
} 
 
.list:nth-child(8n + 6) { 
  margin-top: -120px; 
} 
 
.list:nth-child(8n + 7) { 
  margin-top: -60px; 
}

<div class="grid">grid</div> 
<div class="list">list</div> 
<div class="list">list</div> 
<div class="list">list</div> 
<div class="grid">grid</div> 
<div class="list">list</div> 
<div class="list">list</div> 
<div class="list">list</div> 
<div class="grid">grid</div> 
<div class="list">list</div> 
<div class="list">list</div> 
<div class="list">list</div> 
<div class="grid">grid</div> 
<div class="list">list</div> 
<div class="list">list</div> 
<div class="list">list</div>

Answer 2

body { 
  display: flex; 
  flex-direction: column; 
  flex-wrap: wrap; 
  height: 180px; 
} 
 
.grid { 
  flex: 1 0 100%; 
  background: silver; 
} 
 
.list { 
  flex: 1 0 33%; 
} 
 
.list:nth-child(even) { 
  background: antiquewhite; 
}

<div class="grid">grid</div> 
<div class="list">list</div> 
<div class="list">list</div> 
<div class="list">list</div> 
<div class="grid">grid</div> 
<div class="list">list</div> 
<div class="list">list</div> 
<div class="list">list</div> 
<div class="grid">grid</div> 
<div class="list">list</div> 
<div class="list">list</div> 
<div class="list">list</div> 
<div class="grid">grid</div> 
<div class="list">list</div> 
<div class="list">list</div> 
<div class="list">list</div>