CSS обновление макета сетки по медиа-запросу

Question

Я столкнулся с проблемой. На настольном компьютере у меня есть сетка из двух столбцов подряд, но на большом настольном клиенте нужна совершенно другая компоновка. Как я могу добиться этого с помощью CSS?

Слева как есть, справа как должно быть после точки останова:

Answer 1

Вам необходимо сначала создать повторяющийся узор и сбросить его в точке останова, можно использовать :nth-child(n);

(вдохновлено: CSS Сетка - повторяемая сетка- области шаблона )

main {
  counter-reset: divs;
  display: grid;
  padding: 1em;
  grid-gap: 1em;
  grid-template-columns: repeat(4, 1fr);
  width: 50%;
  margin: auto;
  grid-auto-flow: row dense;
}

/* repeating pattern setting inside the grid */
div:nth-child(10n-7) {
  grid-column: 1;
}

div:nth-child(10n-6) {
  grid-column: 2;
}

div:nth-child(10n-5),
div:nth-child(10n-4) {
  grid-column: auto /span 2;
  grid-row: auto /span 2;
}

/* reset the pattern */
@media screen and (max-width:600px) {/* choose your break point value here */
  main div:nth-child(1n) {
    grid-row: auto/span 2;
    grid-column: auto/span 2;
  }
}

/*make up */


div {
  text-align: center;
  background: #333;
  color: #eee;
}

div:before {
  counter-increment: divs;
  content: counter(divs);
  text-shadow:0 0 1px black,0 0 1px black,0 0 1px black;
}

div:after {
  content: '';
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: middle;
}

div {
  background: linear-gradient(to bottom right, rgba(0,0,0,0.4), transparent, rgba(255,255,255,0.4) ) turquoise;
  }
  
  
div:nth-child(2n) {
  background-color: #f39;
}
div:nth-child(3n) {
  background-color: #39f;
}
div:nth-child(4n) {
  background-color: #9f3;
}
div:nth-child(5n) {
  background-color: maroon;
}
div:nth-child(6n) {
  background-color: salmon;
}
div:nth-child(7n) {
  background-color: gold;

<header><h1>repeating grid pattern</h1><p>Play me full page and resize window </p></header>
<main>
  <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>
</main>

или если вы хотите мобильный первый заход

main {
  counter-reset: divs;
  display: grid;
  padding: 1em;
  grid-gap: 1em;
  grid-template-columns: repeat(4, 1fr);
  width: 50%;
  margin: auto;
  grid-auto-flow: row dense;
}


/* repeating pattern setting inside the grid */

div {
  grid-row: auto/span 2;
  grid-column: auto/span 2;
}


/* reset the pattern */

@media screen and (min-width:600px) {  /* choose your break point value here */
/* reset pattern to auto */
  div {
    grid-column: auto;
    grid-row: auto;
  }
 /* set the new pattern*/ 
  div:nth-child(10n-7) {
    grid-column: 1;
  }
  div:nth-child(10n-6) {
    grid-column: 2;
  }
  div:nth-child(10n-5),
  div:nth-child(10n-4) {
    grid-column: auto /span 2;
    grid-row: auto /span 2;
  }
}


/*make up */

div {
  text-align: center;
  background: #333;
  color: #eee;
}

div:before {
  counter-increment: divs;
  content: counter(divs);
  text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black;
}

div:after {
  content: '';
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: middle;
}

div {
  background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.4), transparent, rgba(255, 255, 255, 0.4)) turquoise;
}

div:nth-child(2n) {
  background-color: #f39;
}

div:nth-child(3n) {
  background-color: #39f;
}

div:nth-child(4n) {
  background-color: #9f3;
}

div:nth-child(5n) {
  background-color: maroon;
}

div:nth-child(6n) {
  background-color: salmon;
}

div:nth-child(7n) {
  background-color: gold;

<header><h1>repeating grid pattern</h1><p>Play me full page and resize window </p></header><main>
  <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>
</main>

ручка для игры: https://codepen.io/gc-nomade/pen/ZEYwEaa