css - 我可以使用 CSS 网格让一个网格项填充来自不同网格项的空列空间吗？

Question

调整窗口大小时，我希望网格项“C”填充网格项“B”(个人资料图片)留下的空白空间。我在网格项“B”上使用了 align-self: start; 以确保它保持方形。因此，当我调整窗口大小时，我最终会得到一个“空白”空间。我希望网格元素“C”填满这个空间，中间有正常的网格间隙。

在https://codepen.io/SanderNiesten/pen/mxaEme?editors=1100 查看实际问题和代码或 https://sanderniesten.github.io/ .

HTML 内容:

<!-- About Section -->
<section class="about opacity-body" id="about">
  <div class= "a" id="about-text">
    <h1>Sander Niesten</h1>
    <p>Hi! I'm Sander a 29-year-old (on my way to be) webdeveloper from the Haarlem area. End of 2017 I suddenly bumped into my new &hearts; : programming! So I decided to give my life a new course and have not regretted it ever since. The last four months have been an epic adventure. A five week bootcamp at Codaisseur, looking into Ruby, Rails, SQL, JavaScript, test driven development and so much more. Next, I got my first taste of React through Codecademy and build my first 2 React app's and a cool little minesweeper game. The freeCodeCamp course is now on my menu. And in the future? Hopefully a traineeship and much more cool stuff to learn!</p>
  </div>
  <div class="b">
    <img id="profile-picture" src="https://source.unsplash.com/random/400x400" alt="">
  </div>
  <div class="c">
    <a href="https://drive.google.com/file/d/1odhMzbhEHV1aLQBCBzsd6M2AWEO2X8bW/view?usp=sharing" target="_blank"><i class="far fa-file-alt"></i></a>
  </div>
</section>

CSS 内容:

/* About  */

.a {
    grid-area: a;
}
.b {
    grid-area: b;
}
.c {
    grid-area: c;
}

.about
{
    display: grid;

    background-position: center;
    background-size: cover;

    grid-auto-rows: minmax(100px, auto);
    grid-template-columns: 1fr;
    grid-gap: 20px;
    grid-template-areas:
      "a"
      "b"
      "c";
}
.about > div {
    background-color: rgba(114, 133, 144, 0.95);
    padding: 1em;
    justify-items: center;
    align-items: center;
}

.b {
  padding-top: auto;
  padding-bottom: auto;
  align-self: start;
}
#profile-picture {
  display: inline-block;
  max-width: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 4px;
  border-color: white;
}

.c {
  display: grid;
  justify-items: center;
  align-items: center;
  justify-self: stretch;
}

.fa-file-alt {
  font-size: 3.5em;
  color: white;
  justify-items: center;
  align-items: center;
}

@media(min-width: 701px)
{
    .about
    {
        grid-template-columns: repeat(10, 1fr);
        grid-template-areas:
          "a a a a a a b b b b"
          "a a a a a a b b b b"
          "a a a a a a c c c c";
    }

    .grid
    {
        font-size: 1.1em;

        display: grid;

        max-width: 920px;
        margin: 0 auto;

        grid-template-columns: 1fr;
        grid-gap: 1em;
    }

    nav ul
    {
        display: grid;

        padding: 0;

        list-style: none;

        grid-gap: 20px;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .toggle
    {
        display: none;
    }
}

Answer 1

如果我理解你的问题，好的，你想要那个，当缩小屏幕时，但在媒体查询 tekes 放置之前，c 元素与方形图像相邻。

如果是这种情况，需要设置

.about {
    display: grid;

    background-position: center;
    background-size: cover;

    grid-auto-rows: auto auto 1fr;  /* changed */
    grid-template-columns: 1fr;
    grid-gap: 20px;
    grid-template-areas:
      "a"
      "b"
      "c";
} 

因为您有 3 行，图像跨越前 2 行，您希望第三行的 c 元素占据剩余空间

forked codepen

显示您的请求的最小示例。悬停它以查看它如何调整大小

.about {
  margin: 10px;
  width: 800px;
  height: 400px;
  border: solid 1px black;
  display: grid;
  grid-template-areas: "a b" "a c";
  grid-template-columns: 60% 40%;
  grid-auto-rows: auto 1fr;
  transition: width 3s;
}

.about:hover {
  width: 400px;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.b2 {
  max-width: 100%;
}
.c {
  background-color: lightblue;
  grid-area: c;
}

<section class="about">
  <div class="a">
    <p>Hi! I'm Sander a 29-year-old (on my way to be) webdeveloper from the Haarlem area. End of 2017 I suddenly bumped into my new ♥ : programming! So I decided to give my life a new course and have not regretted it ever since. The last four months have been an epic adventure. A five week bootcamp at Codaisseur, looking into Ruby, Rails, SQL, Javascript, test driven development and so much more. Next, I got my first taste of React through Codecademy and build my first 2 React app's and a cool little minesweeper game. The FreeCodeCamp course is now on my menu. And in the future? Hopefully a traineeship and much more cool stuff to learn!</p>
  </div>
  <div class="b">
    <img class="b2" src="https://source.unsplash.com/random/400x400">
  </div>
  <div class="c">
  </div>
</section>