响应式网格，在选定行下方有下拉行

Question

是的我真的不知道怎么解释这个，so here's a diagram of what I want。基本上我想要一个响应的“项目”网格（简单的网格或弹性框）。但是我还希望它在当前所选项目下面的行中显示描述。

我有办法做到这一点，但它不是非常敏感或可扩展（每次我需要插入一个新项目时，我必须在HTML中移动东西，我做了很多）。

以下是我目前正在使用的内容：

<!-- Row 1 -->
<ul class="row">
    <li><a class="tablinks" onclick="openCity(event, 'description1')>Item 1</a></li>
    <li><a class="tablinks" onclick="openCity(event, 'description2')>Item 2</a></li>
    <li><a class="tablinks" onclick="openCity(event, 'description3')>Item 3</a></li>
</ul>

<div id="description1" class="tabcontent">
    <span onclick="this.parentElement.style.display='none';">Description 1</span>
</div>
<div id="description2" class="tabcontent">
    <span onclick="this.parentElement.style.display='none';">Description 2</span>
</div>
<div id="description3" class="tabcontent">
    <span onclick="this.parentElement.style.display='none';">Description 3</span>
</div>

<!-- Row 2 -->
<ul class="row">
    <li><a class="tablinks" onclick="openCity(event, 'description4')>Item 4</a></li>
    <li><a class="tablinks" onclick="openCity(event, 'description5')>Item 5</a></li>
</ul>

<div id="description4" class="tabcontent">
    <span onclick="this.parentElement.style.display='none';">Description 4</span>
</div>
<div id="description5" class="tabcontent">
    <span onclick="this.parentElement.style.display='none';">Description 5</span>
</div>


<!-- onclick script -->
<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
function scrollWin() {
    window.scrollTo(0, 0);
}
</script>

我想要的只是下面类似的东西，所以我没有必要在html中改变一些东西。

<div class="wrapper">
    <div class="item" onclick="showDesc(event, 'description1'>Item 1</div>
    <div class="item" onclick="showDesc(event, 'description2'>Item 2</div>
    <div class="item" onclick="showDesc(event, 'description3'>Item 3</div>
    <div class="item" onclick="showDesc(event, 'description4'>Item 4</div>
    <div class="item" onclick="showDesc(event, 'description5'>Item 5</div>
</div>

<div if="description1" class="description">Description 1</div>
<div if="description2" class="description">Description 2</div>
<div if="description3" class="description">Description 3</div>
<div if="description4" class="description">Description 4</div>
<div if="description5" class="description">Description 5</div>

我真的不在乎它是否使用网格或flexbox等等。只要它有效。

Answer 1

也许不是您正在寻找的结构，但您可以利用CSS Grid和dense自动流程布局算法。

我在这里使用了:hover，但你可以用一些javascript / Jquery来修饰它。

这里的概念是，当显示时，“描述”自动填充整行（grid-column:1 / -1），因此将换行以形成自己的行，并且由于auto-flow:dense，在回填后的项目占据空白。

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

.item,
.desc {
  border: 1px solid grey;
  height: 50px;
  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(3, 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>

Codepen.io Demo