<div class="status_area">

  뷰포트 너비: <span class="status"></span>px

</div>

<ul class="box_list">

  <li class="list_item" style="background-color: #1A237E;">

    <span class="number">1</span>

  </li>

  <li class="list_item" style="background-color: #FFD54F;">

    <span class="number">2</span>

  </li>

  <li class="list_item" style="background-color: #FF5252;">

    <span class="number">3</span>

  </li>

  <li class="list_item" style="background-color: #FFAB40;">

    <span class="number">4</span>

  </li>

  <li class="list_item" style="background-color: #E6EE9C;">

    <span class="number">5</span>

  </li>

  <li class="list_item" style="background-color: #673AB7;">

    <span class="number">6</span>

  </li>

</ul>

.box_list .list_item {

  float: left;

  width: 100%;

  aspect-ratio: 1/1;

}

@media (min-width: 360px) {

  .box_list .list_item {

    width: 50%;

  }

}

@media (min-width: 768px) {

  .box_list .list_item {

    width: 33.33%;

  }

}

@media (min-width: 1280px) {

  .box_list .list_item {

    width: 16.66%;

  }

}

​

/* ********************** */

​

body {

  margin: 0;

}

ul, li {

  list-style: none;

  margin: 0;

  padding: 0;

}

div {

  margin: 0;

}

.status_area {

  padding: 20px;

  font-size: 20px;

  font-weight: bold;

  text-align: center;

}

.box_list {

  overflow: hidden;

  max-width: 1200px;

  margin: 0 auto;

}

.number {

  display: block;

  padding: 20px;

  font-size: 48px;

  color: #fff;

}

const status = document.querySelector(".status");

​

status.innerHTML = window.innerWidth;

window.addEventListener("resize", function() {

  status.innerHTML = window.innerWidth;

});

​