媒体查询的 CSS 网格布局更新

Question

我遇到了问题。在桌面上，我有一个连续两个列的网格，但在大型桌面客户端上需要一个完全不同的布局。我如何使用 CSS 实现它？

左边是它的样子，右边是它在断点之后的样子:

Answer 1

你需要先创建一个重复模式，然后在断点处重置它，可以使用:nth-child(n);

(灵感来自:CSS Grid - repeatable grid-template-areas)

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