CODEWITHSUNDEEP
csscss-grid
Sander
Sander

Reputation: 71

Can I make a grid item fill up empty column space from a different grid item with CSS grid?

When adjusting the window-size, I want grid item 'C' to fill up the empty space left by grid item 'B' (the profile picture). I used align-self: start; on grid item 'B' to make sure it stays square shaped. Because of this I end up with an 'empty' space when I resize my window. I would like grid item 'C' to fill up this space, with the normal grid-gap in between.

View the problem and code in real life at https://codepen.io/SanderNiesten/pen/mxaEme?editors=1100 or https://sanderniesten.github.io/.

Enter image description here

HTML content:

<!-- 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 content:

/* 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;
    }
}

Upvotes: 3

Views: 2588

Answers (1)

vals
vals

Reputation: 64164

If I understand your question ok, you want that , when narrowing the screen, but before the media query tekes place, the c element gets adjacent to the square image.

If this is the case, you need to set

.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";
}

Because you have 3 rows, the image is spanning the first 2, and you want the c element that is on the third row to take up the remaining space

forked codepen

A minimal example showing your request. Hover it to see how it adapts the size

.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>

Upvotes: 1

Related Questions