Checkboard like layout CSS JS-CodePudding

I need a checkboard layout to display elements, i.e. the individual elements are displayed in the layout in two colors like a chessboard. The elements come from a CMS and the editor is required to insert the elements so that the colored layout fits (colors always alternate). The editor gives each element a background color. A case here is that in the desktop view a 4 checkboard is displayed. In a mobile view, however, the checkboard is supposed to wrap and wrap to a 3 checkboard. This also works, however this has the consequence that as in the attached picture the change of the colors is no longer correct. Is there a way to use Css(SCSS, e.g. with Order) to make it reasonable to rearrange the elements?

Here a short code snipped: html:

<section >
 <div />
  <div />
  ....
</section>

css:

.checkboard-container {
  display: flex;
  flex-items: wrap;
  Align-items: stretch;
}

.element {
 flex-basis: 25%;
 min-width: 25%;
 padding: 0;
 
 @media only screen and (max-width: 900px) {
   flex-basis: 33%;
   min-width: 33%;
 }
}

CodePudding user response：

In this case, if you are only concerned with the background color and not the content of the elements then you can utilize media queries to change the background color of the present elements to keep the checkered effect consistent on desktop and mobile.

section {
  display:flex;
  flex-wrap: wrap;
}
div {
    width: 25%;
    height: 100px;
}

/* 4 column colouring */
div:nth-child(8n 1), div:nth-child(8n 3), div:nth-child(8n 6), div:nth-child(8n 8) {background-color:black;}
div:nth-child(8n 2), div:nth-child(8n 4), div:nth-child(8n 5), div:nth-child(8n 7) {background-color:gray;}

@media screen and (max-width: 800px) {
    div {width:33%;background-color: black;}
    div:nth-child(6n 1),div:nth-child(6n 3), div:nth-child(6n 5) {background-color:black;}
    div:nth-child(6n 2), div:nth-child(6n 4), div:nth-child(6n 6) {background-color:gray;}
}

    <section>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </section>

SCSS version:

    /* 4 column colouring */
section {
    display: flex;
    flex-wrap: wrap;
}
div {
    width: 25%;
    height: 100px;
    &:nth-child(8n 1),&:nth-child(8n 8),&:nth-child(8n 3),&:nth-child(8n 6),&:nth-child(8n 8) {
        background-color: black;
    }
    &:nth-child(8n 2),&:nth-child(8n 5),&:nth-child(8n 7),&:nth-child(8n 4) {
        background-color: gray;
    }
}
@media screen and (max-width: 800px) {
    div {
        width: 33%;
        background-color: black;
        &:nth-child(6n 1),&:nth-child(6n 3),&:nth-child(6n 5) {
            background-color: black;
        }
        &:nth-child(6n 2),&:nth-child(6n 6),&:nth-child(6n 4)  {
            background-color: gray;
        }
    }
}