20190403_grid

https://teratail.com/questions/182627

by liveasnotes

HTML

<ul>
  <li x>item-1</li>
  <li>item-2</li>
  <li>item-3</li>
  <li x>item-4</li>
  <li>item-5</li>
  <li x>item-6</li>
  <li>item-7</li>
  <li x>item-8</li>
  <li x>item-9</li>
  <li x>item-10</li>
  <li>item-11</li>
  <li x>item-12</li>
  <li>item-13</li>
  <li x>item-14</li>
  <li x>item-15</li>
  <li x>item-16</li>
  <li>item-17</li>
  <li>item-18</li>
  <li>item-19</li>
  <li>item-20</li>
  <li>item-21</li>
  <li>item-22</li>
  <li>item-23</li>
</ul>

CSS

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: lemonchiffon;
}

ul {
  display: grid;
  grid-template-rows: repeat(auto-fit, 1fr 1fr 2fr);
  grid-template-columns: 5fr 1fr 4fr;
  list-style: none;
  background: #fff;
  width: 300px;
  margin: 2em;
  padding: 0 5px 5px 0;
}

li {
  background: pink;
  padding: 1em;
  margin: 5px 0 0 5px;
}

li:nth-child(5n-4) {
  grid-row: span 2;
  grid-column: span 2;
  height: 105px; /* marginの分を足している */
}

li:nth-child(5n-3),
li:nth-child(5n-2) {
  grid-row: span 1;
  grid-column: span 1;
  height: 50px;
}

li:nth-child(5n-1) {
  grid-row: span 2;
  grid-column: span 1;
  height: 105px; /* marginの分を足している */
}

li:nth-child(5n) {
  grid-row: span 2;
  grid-column: span 2;
  height: 105px;
}

JavaScript

let es = document.querySelectorAll("[x]");

es.forEach(e => {e.parentNode.removeChild(e)});