Responsive Grid mit Drop-Down-Zeile unter der ausgewählten Zeile

Question

Ja, ich weiß nicht wirklich, wie man das zu erklären, so here's a diagram of what I want. Grundsätzlich möchte ich ein Raster von "Elementen", die reaktionsfähig sind (einfach mit einem Gitter oder Flexbox). Ich möchte jedoch, dass eine Beschreibung in einer Reihe unterhalb des aktuell ausgewählten Elements angezeigt wird.

Ich habe eine Möglichkeit, das zu tun, aber es ist nicht sehr reaktionsfähig oder erweiterbar (ich muss Sachen im HTML jedes Mal verschieben, wenn ich ein neues Element einfügen muss, was ich viel tue).

Hier ist, was ich gerade arbeite mit:

<!-- 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> 

Was ich will nur etwas Ähnliches unten ist, nur so habe ich nicht Sachen um in den HTML-Code zu mischen.

<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> 

Es ist mir egal, ob es Grid oder Flexbox oder was auch immer verwendet. Solange es funktioniert.

Answer 1

Vielleicht nicht die Struktur, die Sie suchen, aber Sie können CSS Gitter und die dense Auto-Flow-Layout-Algorithmus nutzen.

Ich habe eine :hover hier verwendet, aber Sie könnten es mit einer Prise Javascript/Jquery aufpeppen.

Das Konzept hier ist, dass, wenn die „Beschreibung“ gezeigt automagically eine ganze Zeile (grid-column:1/-1) füllt die und aufgrund auto-flow:dense es die Elemente Verfüllung nach wird daher wickeln seine eigene Reihe bilden den Raum leer aufzunehmen links .

.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