Как сверстать открывающийся блок в сетке

Question

Как сверстать такой блок как на картинке

Вот структура тегов

<div class="q-list">
<div class="row">
  <div class="col-4">
    <!-- Контент первого блока -->
  </div>
  <div class="col-4">
    <!-- Контент второго блока -->
    <div class="блок на полную ширину">
      //список тоже по сетке
    </div>
  </div>
  <div class="col-4">
    <!-- Контент третьего блока -->
  </div>
   <!-- остальные блоки в сетке -->
   </div>
 </div>
 </div>
</div>

Answer 1

Я так понял вы используете bootstrap, поэтому просто посмотрите на структуру, которую я построил в HTML - именно так формируются блоки в bootstrap сетке. А стили я сам накидал для наглядности, по сути они уже есть в bootstrap.

.row {
  display: flex;
  flex-wrap: wrap;
}
.col-3 {
  display: block;
  width: 33.333333%;
  border: 1px solid;
  min-height: 50px;
  box-sizing: border-box;
}
.col-4 {
  display: block;
  width: 25%;
  border: 1px solid;
  min-height: 50px;
  box-sizing: border-box;
}
.col-12 {
  display: block;
  width: 100%;
  border: 1px solid;
  min-height: 50px;
  box-sizing: border-box;
  padding: 5px;
}

<div class="row">
  <div class="col-4">
    
  </div>
  <div class="col-4">
    
  </div>
  <div class="col-4">
    
  </div>
  <div class="col-4">
    
  </div>
  <div class="col-12">
    <div class="row">
      <div class="col-4">

      </div>
      <div class="col-4">

      </div>
      <div class="col-4">

      </div>
      <div class="col-4">

      </div>
    </div>
  </div>
  <div class="col-4">
    
  </div>
  <div class="col-4">
    
  </div>
  <div class="col-4">
    
  </div>
  <div class="col-4">
    
  </div>
  <div class="col-12">
    
  </div>
  <div class="col-3">
    
  </div>
  <div class="col-3">
    
  </div>
  <div class="col-3">
    
  </div>
</div>

Answer 2

Предложу такой, несколько альтернативный вариант.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-3 border border-black">
      <div>col-3</div>
    </div>
    <div class="col-3 border border-black bg-success">
      <p>
        <button class="btn p-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><div>col-3</div></button>
      </p>
    </div>
    <div class="col-3 border border-black">
      <div>col-3</div>
    </div>
    <div class="col-3 border border-black">
      <div>col-3</div>
    </div>
  </div>
  <div class="row collapse" id="collapseExample">
    <div class="col-3">
      <div>content col-3-success</div>
    </div>
    <div class="col-3">
      <div>content col-3-success</div>
    </div>
    <div class="col-3">
      <div>content col-3-success</div>
    </div>
    <div class="col-3">
      <div>content col-3-success</div>
    </div>
  </div>
  <div class="row">
    <div class="col-3 border border-black">
      <div>col-3</div>
    </div>
    <div class="col-3 border border-black">
      <div>col-3</div>
    </div>
    <div class="col-3 border border-black">
      <div>col-3</div>
    </div>
    <div class="col-3 border border-black">
      <div>col-3</div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Answer 3

Вот рабочее решение (код на vue 3):

<template>
 <div>
<div v-for="(row, rowIndex) in rows" :key="rowIndex" class="row">
  <div
    v-for="(block, colIndex) in row"
    :key="colIndex"
    :class="getColumnClass()"
    @click="toggleExpandedBlock(rowIndex * columnsPerRow + colIndex)"
  >
    <div class="block-content">
      {{ block }}
    </div>
  </div>
  
  <div v-if="expandedRowIndex === rowIndex" class="col-12">
    <div class="expanded-block">
      Expanded Block (для блока {{ expandedBlockIndex + 1 }})
    </div>
  </div>
</div>
 </div>
 </template>

<script setup>
import { ref, computed } from 'vue'

 const blocks = ref(['Block 1', 'Block 2', 'Block 3', 'Block 4', 'Block 5', 'Block 6'])

const columnsPerRow = 3

const expandedBlockIndex = ref(null)

const expandedRowIndex = computed(() => {
 return expandedBlockIndex.value !== null
? Math.floor(expandedBlockIndex.value / columnsPerRow)
: null
 })

   const toggleExpandedBlock = (index) => {
   expandedBlockIndex.value = expandedBlockIndex.value === index ? null : index
   }

  const rows = computed(() => {
   const result = []
   for (let i = 0; i < blocks.value.length; i += columnsPerRow) {
     result.push(blocks.value.slice(i, i + columnsPerRow))
   }
  return result
  })

  const getColumnClass = () => {
  return columnsPerRow === 2 ? 'col-6' : 'col-4'
 }
 </script>

<style>
.row {
 display: flex;
  flex-wrap: wrap;
 }
 .col-4, .col-6 {
 padding: 10px;
 box-sizing: border-box;
 }
.col-12 {
 width: 100%;
 }
 .block-content {
 background-color: lightblue;
  padding: 20px;
 text-align: center;
 cursor: pointer;
 border: 1px solid #ccc;
 }
.expanded-block {
  width: 100%;
  background-color: lightcoral;
 padding: 30px;
 margin: 10px 0;
}

БЛОГ НА HUSL

Как сверстать открывающийся блок в сетке

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