example

example

by lobodava

HTML

<div class="grid">
      <div class="red-box"></div>

      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="item">Item 9</div>
      <div class="item">Item 10</div>  
      <div class="item">Item 11</div>
      <div class="item">Item 12</div>
      <div class="item">Item 13</div>
      <div class="item">Item 14</div>
      <div class="item">Item 15</div>
      <div class="item">Item 16</div>
      <div class="item">Item 17</div>
      <div class="item">Item 18</div>
      <div class="item">Item 19</div>
      <div class="item">Item 20</div>
    </div>

CSS

body {
      background-color: black;  
    }

    .grid {
      display: flex;
      flex-flow: row wrap;
    }

    .grid > div {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .item {
      width: calc(33.33% - 10px);
      margin: 5px;
      height: 60px;
      background-color: gainsboro;  
    }

    .red-box {
      box-sizing: border-box;
      width: calc(33.33% - 60px);
      margin: 30px 30px;
      height: 80px;
      margin-bottom: -70px; 
      order: 2!important;
      background-color: red;
      border: 2px solid gainsboro;      
    }

    .red-box > div {
      background-color: red;
      height: 60%;
      width: 60%;
      border: 2px solid gainsboro; 
    }    

    @media (max-width: 499px) {
      .grid > div:nth-child(-n+3) {
        order: 1;
      }
      .grid > div:nth-child(n+4) {
        order: 3;
      }      
      .grid>div:nth-child(5) {
        margin-right: calc(33.33% + 5px);
      }
    }

    @media (min-width: 500px) and (max-width: 999px) {
      .grid > div:nth-child(-n+4) {
        order: 1;
      }
      .grid > div:nth-child(n+5) {
        order: 3;
      } 
      
      .item {
        width: calc(25% - 10px);
       }
       .red-box {
        width: calc(25% - 60px);
       }
       .grid>div:nth-child(7) {
         margin-right: calc(25% + 5px);
       }
    }

    @media (min-width: 1000px) {
      .grid > div:nth-child(-n+5) {
        order: 1;
      }
      .grid > div:nth-child(n+6) {
        order: 3;
      } 
      
      .item {
        width: calc(20% - 10px);
       }
       .red-box {
        width: calc(20% - 60px);
       }
       .grid>div:nth-child(9) {
         margin-right: calc(20% + 5px);
       }
    }