Html 带有排序元素的 CSS 网格

发布于09月19日

指令是，当是screen < 600px时，我得到的div顺序是这样的red, green, blue:

当screen > 600px岁时，我希望在下图中实现这一结果:

我的代码是:

body {
  background-color: white;
}

/* Add your CSS here */
[data-testid] {
  width: 100%;
  height: 100%;
  padding: 20px;
  color: white;
}

@media screen and (min-width: 600px) {
  .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  }
  
  [data-testid="red"], [data-testid="blue"] {
  grid-column: 1;
}
  
  [data-testid="green"] {
  grid-column: 2;
  grid-row: span 2;
}
}

<body>
  <div class="grid-container">
    <div data-testid="red" style="background-color: red;">Red</div>
    <div data-testid="green" style="background-color: green;">Green</div>
    <div data-testid="blue" style="background-color: blue;">Blue</div>
  </div>
</body>

but I'm getting this problem as in the image :

我如何才能修复它以达到我想要的结果？

推荐答案

问题在于填充物.

这将创建宽度为100%(网格单元格)加上2*20px的项目.

此代码段通过设置box-sizing: border-box使填充成为宽度的一部分.

body {
  background-color: white;
}


/* Add your CSS here */

[data-testid] {
  width: 100%;
  height: 100%;
  padding: 20px;
  color: white;
  box-sizing: border-box;
}

@media screen and (min-width: 600px) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  [data-testid="red"],
  [data-testid="blue"] {
    grid-column: 1;
  }
  [data-testid="green"] {
    grid-column: 2;
    grid-row: span 2;
  }
}

<body>
  <div class="grid-container">
    <div data-testid="red" style="background-color: red;">Red</div>
    <div data-testid="green" style="background-color: green;">Green</div>
    <div data-testid="blue" style="background-color: blue;">Blue</div>
  </div>
</body>