Есть ли способ сделать ребенка в макете сетки растянуть на полную ширину с помощью CSS

Question

Я пытаюсь создать следующую сетку, которая будет показывать ребенка при клике.

Итак,

[ссылка1] [ссылка2] [ссылка3]

[ссылка4] [ссылка4] [ссылка4]

станет,

[ссылка1] [ ссылка2 ] [ссылка3]

[--------- ссылка2 содержание ---------]

[ссылка 4] [ссылка 4] [ссылка 4]

Т.е., щелкнув ссылку2, вы обнаружили содержимое, относящееся к ссылке2 в сетке под ней.

Я пытался сделать это семантически, сгруппировав ссылку и контент вместе в dl ..

<div style="display: flex">

    <dl>
        <dt><a href="#accordion1">Link1</a></dt>
        <dd>Content 1</dd>
    </dl>

    <dl>
        <dt><a href="#accordion2">Link2</a></dt>
        <dd>Content 2</dd>
    </dl>

    <dl>
        <dt><a href="#accordion3">Link3</a></dt>
        <dd>Content 3</dd>
    </dl>

    ..etc

</div>

С этим расположением я прав, думая, что я не смогу сделать соответствующую ширину соответствующей из-за смежных блоков ??

И если это так, нужно ли разбивать макет на серию div (за счет уменьшения семантики)?

Любая помощь приветствуется.

Заранее большое спасибо,

Answer 1

CSS Grid может сделать это, но только с изменением HTML.

Вот один из них, который использует hover, но может быть очень просто адаптирован для кликов.

По сути, "описание""скрыто до тех пор, пока не потребуется, и принудительный переход к нижнему ряду и другим элементам адаптируется из-за значения dense в автопотоке.

.container {
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  grid-gap: 1em;
}

.item,
.desc {
  border: 1px solid grey;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.item {
  background: lightblue;
  transition: background 0.25s ease;
}

.item:hover {
  background: rebeccapurple;
}

.item:hover+.desc {
  display: block;
}

.desc {
  background: palegoldenrod;
  display: none;
  grid-column: 1 / -1;
}

@media (min-width: 700px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
  }
}

<div class="container">
  <div class="item">1</div>
  <div class="desc">Description 1</div>
  <div class="item">2</div>
  <div class="desc">Description 2</div>
  <div class="item">3</div>
  <div class="desc">Description 3</div>
  <div class="item">4</div>
  <div class="desc">Description 4</div>
  <div class="item">5</div>
  <div class="desc">Description 5</div>
  <div class="item">6</div>
  <div class="desc">Description 6</div>

</div>