<!--
Resize window to see wrapping behavior
Context: <https://thenewobjective.com/web-development/css-grid-with-detail-view>
-->
<div class="container">
<label class="item">
<input type="radio" name="rdo-visible">
<span class="box">1</span>
<span class="block">1. Lipsum Lipsum</span>
</label>
<label class="item">
<input type="radio" name="rdo-visible">
<span class="box">2</span>
<span class="block">2. Lipsum Lipsum</span>
</label>
<label class="item">
<input type="radio" name="rdo-visible">
<span class="box">3</span>
<span class="block">3. Lipsum Lipsum</span>
</label>
<label class="item">
<input type="radio" name="rdo-visible">
<span class="box">4</span>
<span class="block">4. Lipsum Lipsum</span>
</label>
<label class="item">
<input type="radio" name="rdo-visible">
<span class="box">5</span>
<span class="block">5. Lipsum Lipsum</span>
</label>
<label class="item">
<input type="radio" name="rdo-visible">
<span class="box">6</span>
<span class="block">6. Lipsum Lipsum</span>
</label>
<label class="item">
<input type="radio" name="rdo-visible">
<span class="box">7</span>
<span class="block">7. Lipsum Lipsum</span>
</label>
<label class="item">
<input type="radio" name="rdo-visible">
<span class="box">8</span>
<span class="block">8. Lipsum Lipsum</span>
</label>
<label class="item">
<input type="radio" name="rdo-visible">
<span class="box">9</span>
<span class="block">9. Lipsum Lipsum</span>
</label>
<label class="item">
<input type="radio" name="rdo-visible">
<span class="box">10</span>
<span class="block">10. Lipsum Lipsum</span>
</label>
<label class="item">
<input type="radio" name="rdo-visible">
<span class="box">11</span>
<span class="block">11. Lipsum Lipsum</span>
</label>
<label class="item">
<input type="radio" name="rdo-visible">
<span class="box">12</span>
<span class="block">12. Lipsum Lipsum</span>
</label>
<label class="item">
<input type="radio" name="rdo-visible">
<span class="box">13</span>
<span class="block">13. Lipsum Lipsum</span>
</label>
</div>
.container {
position: relative;
outline: 1px solid green;
width: 60%;
margin:auto;
font: 16pt sans-serif;
}
.item {
position: static;
display: inline-block;
vertical-align: top;
margin: 10px;
width: 50px;
overflow: visible;
}
[name=rdo-visible] {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
[name=rdo-visible]:checked ~ .box {
margin-bottom: 2em;
}
[name=rdo-visible]:checked ~ .block {
display: block;
margin-top: -1.6em;
}
.box {
display: block;
cursor: pointer;
width: 50px;
height: 50px;
background-color: red;
color: white;
line-height: 50px;
text-align: center;
}
.block {
display: none;
position: absolute;
left: 10px;
right: 10px;
height: 2em;
line-height: 2em;
background-color: blue;
color: white;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.