我如何让CSS网格完全打破偏移大小

Question

首先，我尝试使用 CSS 网格来完成此任务。每个教程或博客文章都主要是关于具有相同宽度的网格元素。

这是我到目前为止的代码：它适用于桌面，但它们都只是和我在一起

.grid-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}
@media(max-width: 990px) {
    .grid-main {
        grid-template-columns: 3fr 2fr 2fr;
    }
}

如何让第一个盒子装满，最后一个盒子以 50% 包裹在下面？

谢谢你！

Answer 1

对于平板电脑大小，您需要将

grid-column

设置为跨越第一个子元素上的两列。

.grid-main {
  display: grid;
  grid-template-columns: auto; /* mobile-first */
  gap: 5px;
}

/* tablet size */
@media (min-width: 750px) {
  .grid-main {
    grid-template-columns: 1fr 1fr;
  }
  .grid-main>div:first-child {
    grid-column: 1 / span 2;
  }
}

/* desktop size */
@media (min-width: 1000px) {
  .grid-main {
    grid-template-columns: 3fr 2fr 2fr;
  }
  .grid-main>div:first-child {
    grid-column: auto;
  }
}

.grid-main>div {
  background: #eee;
  border: 1px solid;
  height: 50px;
}

<div class="grid-main">
  <div></div>
  <div></div>
  <div></div>
</div>