Fixed Header or Footer with responsive CSS Grid layout inside

Question

I need to make a webpage where the footer is fixed, and the content inside the footer is laid-out using CSS Grid.

But when I apply position: fixed; to the footer, the column widths no longer fill the page and change to the width of the longest line of text instead.

How can I make this work?

https://codepen.io/simonhrogers/pen/pQNYjW

html, body {
  padding: 0;
  margin: 0;
}

img {
  width: 100%;
}

.image-grid {
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 2em;
  grid-row-gap: calc(2em - 0.22em);
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 2em;
  padding-bottom: calc(2em - 0.22em);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 2em;
  grid-row-gap: calc(2em - 0.22em);
  padding-top: 2em;
  padding-bottom: 2em;
  padding-left: 2em;
  padding-right: 2em;
  bottom: 0;
  background-color: green;
  opacity: 0.75;
}


li {
  list-style-type: none;
}

ul {
  padding: 0;
}

.fixed-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 2em;
  grid-row-gap: calc(2em - 0.22em);
  padding-top: 2em;
  padding-bottom: 2em;
  padding-left: 2em;
  padding-right: 2em;
  bottom: 0;
  background-color: red;
  opacity: 0.75;
}

.fixed-footer-grid-container {
  position: fixed;
  bottom: 0;
}

<div class="image-grid">
  <div class="image">
    <img src="http://img2.storyblok.com/1400x0/filters:format(webp)/f/45723/2835x3543/6531101ff6/jr_0209_hb_aw18_campaign_mf_sp_4.jpg" alt="">
  </div>
    <div class="image">
    <img src="http://img2.storyblok.com/1400x0/filters:format(webp)/f/45723/2835x3543/6531101ff6/jr_0209_hb_aw18_campaign_mf_sp_4.jpg" alt="">
  </div>
    <div class="image">
    <img src="http://img2.storyblok.com/1400x0/filters:format(webp)/f/45723/2835x3543/6531101ff6/jr_0209_hb_aw18_campaign_mf_sp_4.jpg" alt="">
  </div>
    <div class="image">
    <img src="http://img2.storyblok.com/1400x0/filters:format(webp)/f/45723/2835x3543/6531101ff6/jr_0209_hb_aw18_campaign_mf_sp_4.jpg" alt="">
  </div>
    <div class="image">
    <img src="http://img2.storyblok.com/1400x0/filters:format(webp)/f/45723/2835x3543/6531101ff6/jr_0209_hb_aw18_campaign_mf_sp_4.jpg" alt="">
  </div>
    <div class="image">
    <img src="http://img2.storyblok.com/1400x0/filters:format(webp)/f/45723/2835x3543/6531101ff6/jr_0209_hb_aw18_campaign_mf_sp_4.jpg" alt="">
  </div>
</div>

<div class="footer-grid">
    <div class="credits">
      <ul>
        <li>Correct Column Layout</li>
      </ul>
    </div>
    <div class="credits">
      <ul>
        <li>Correct Column Layout</li>
        <li>Correct Column Layout</li>
        <li>Correct Column Layout</li>
        <li>Correct Column Layout</li>
        <li>Correct Column Layout</li>
      </ul>
    </div>
    <div class="credits right">
      <ul>
        <li>But Needs to be Fixed Position at Bottom</li>
      </ul>
    </div>
</div>

<div class="fixed-footer-grid-container">
  <div class="fixed-footer-grid">
    <div class="credits">
      <ul>
        <li>Incorrect Column Width</li>
      </ul>
    </div>
    <div class="credits">
      <ul>
        <li>Incorrect Column Width</li>
        <li>Incorrect Column Width</li>
        <li>Incorrect Column Width</li>
        <li>Incorrect Column Width</li>
        <li>Incorrect Column Width</li>
      </ul>
    </div>
    <div class="credits right">
      <ul>
        <li>Needs to be 100% screen width</li>
      </ul>
    </div>
  </div>
</div>

Answer 1

Since your fixed-position element is removed from the document flow, it won't automatically expand full width, like an in-flow block element. You need to specify its dimensions.

Add this to your code:

.fixed-footer-grid-container {
    position: fixed;
    bottom: 0;
    width: 100%; /* new */
}

revised codepen