不同尺寸展示不同列

// html
<div className="test-container">
  <div className='main-container'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>

PC端展示4列，移动端展示2列

1、grid布局

  .main-container {
    display: grid;
   
    @media screen and (max-width: 768px) { /*mobile*/
      grid-template-columns: 1fr 1fr;
      div:nth-of-type(2n) {
        margin-right: 0;
      }
    }
    @media screen and (min-width: 769px) { /*pc*/
      grid-template-columns: 1fr 1fr 1fr 1fr;
      div:nth-of-type(4n) {
        margin-right: 0;
      }
    }
    div {
      margin: 10px 0px;
      height: 100px;
      line-height: 100px;
      background-color: skyblue;
      margin-right: 10px;
      font-size: 24px;
    }
  }

2、flex布局

  .main-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    @media screen and (max-width: 768px) { /*mobile*/
      div {
        width: calc((100% - 10px)/2);
      }
      div:nth-of-type(2n) {
        margin-right: 0;
      }
    }
    @media screen and (min-width: 769px) { /*pc*/
      div {
        width: calc((100% - (10px * 3))/4);
      }
      div:nth-of-type(4n) {
        margin-right: 0;
      }
    }
    div {
      margin: 10px 0px;
      height: 100px;
      line-height: 100px;
      background-color: skyblue;
      margin-right: 10px;
      font-size: 24px;
    }
  }