Responsive grid with CSS Grids

Responsive grid with CSS Grids

by zerrax

HTML

<ul class="pages_sub">
  <li><img src=""></li>
  <li>
    <div class="accordion">
    <input type="radio" name="accordion" id="accordion-a">
    <label class="accordion__header" for="accordion-a">First header</label>
    <div class="accordion__content">
        <a>uio</a>
        <a>Accusamus</a>
        <a>Adipisci</a>
        <a>uio</a>
        <a>Accusamus</a>
        <a>Adipisci</a>
        <a>uio</a>
        <a>Accusamus</a>
        <a>Adipisci</a>
        <a>uio</a>
        <a>Accusamus</a>
        <a>Adipisci</a>
    </div>

    <input type="radio" name="accordion" id="accordion-b">
    <label class="tabs__tab" for="accordion-b">Second header</label>
    <div class="accordion__content">
        <a>Lorem</a>
        <a>Culpa</a>
    </div>
</div>
  </li>
</ul>

CSS

body {
  padding: 0;
  font-family: Helvetica;
  background-color: #20262e;
}

.pages_sub {
  display: grid;
  grid-template-columns: repeat(auto-fit, 100%);
  grid-gap: 0.1vh;
}

.pages_sub > li {
  position:relative;
  display: block;
  height: 49.9vh;
  background-color: #fff;
  font-size: 14px;
}
.pages_sub > li > img{
  width:100%;
  height:100%;
}
.accordion {
  position:absolute;
  display:block;
  bottom: 0;
  left:0;
  right:0;
  top:0;
  background-color: #2d2d2d;
}
.accordion input[type=radio] {
  position: absolute;
  opacity: 0;
}
.accordion input[type=radio] + label {
  display: block;
  background-color: #2d2d2d;
  cursor: pointer;
  padding: 10px;
  font-size: 22px;
  color: #fff;


}
.accordion input[type=radio]:checked + label {
  border-bottom: 1px solid #333;
  color: #fff;
  background-color: #3068cc;
}
.accordion input[type=radio]:checked + label + div {
  display: block;
}
.accordion__content {
  display: none;
     display: none;
    overflow: scroll;
    height: auto;
    /* width: 200px; */
   
   height: calc(100% - 95px);
    overflow-x: hidden;
    overflow-y: scroll;
    pointer-events: auto;

}
.accordion__content a{
  display:block;
  border-bottom: 1px solid #1a1a1a;
  padding: 10px;
  font-size: 18px;
  background-color: #3a3a3a;
  color: white;
}