Question

调整窗口大小时，我想要网格项目＆＃39; C＆＃39;填补网格项留下的空白区域＆＃39; B＆＃39; （个人资料图片）。我用了align-self：start;在网格项目＆＃39; B＆＃39;确保它保持方形。因此，我最终得到了一个空的＆＃39;当我调整窗口大小时的空间。我想要网格项目＆＃39; C＆＃39;填补这个空间，中间有正常的网格间隙。

查看现实生活中的问题和代码 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

如果我理解你的问题，那么你想要的是，在缩小屏幕范围时，但在媒体查询处理之前， 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>

我可以使用CSS网格从不同的网格项中填充网格项目的空列空间吗？

1 个答案: