max-width css grid container not taking up 100% of parent container

Question

I am trying out css-grid but I am having some trouble with content taking up 100% of parent container. I am absolutely lost. I have a max-width: 1200px on the content in my layouts/index.js file. I then call grid-template-columns: 1fr in the child Component. The child component background-image does not take up 1200px but rather 423px. The image is 2600px wide. I thought 1fr would take up all the space of the max-width content container. What am I missing?

layouts/index.js

const Wrapper = styled.div`
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: red;
  height: 100vh;
  overflow-y: auto;
`;

const Content = styled.div`
  max-width: 1200px;
  background: pink;
  padding-top: 2rem;
  ${media.desktop`padding: 2rem ;`}
  ${media.tablet`padding: 2.4rem;`}
  ${media.phone`padding: 1.2rem;`}
  margin: 0 auto;
`;

const LayoutWrapper = ({ children }) => (
  <Wrapper>
    <Helmet
      title="Fouts Tax Service"
      meta={[
        { name: 'description', content: 'A tax service in Anderson, Indiana run by Jerry Fouts' },
        { name: 'keywords', content: 'tax, anderson, 46011, indiana, service, fouts,' },
      ]}
    />
    <ResponsiveHeader/>
    <Content>
      {children()}
    </Content>
    <Footer/>
  </Wrapper>
);

pages/index.js

import HeroImg from '../images/taxes.jpg'

const Grid = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  border: 2px solid black;
  grid-gap: 10px;
  align-content: center;
`;

const Showcase = styled.div`
  background-image: url(${HeroImg});
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #a7a7a7;
  background-blend-mode: color-burn;
  grid-gap: 10px;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;

class IndexPage extends Component {

render() {
    return (
      <Grid>
        <Showcase>
          <h1>Fouts Tax Service</h1>
          <h3>Year round tax service</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
        </Showcase>
      </Grid>
    )

  }
}

Here is a picture of what I am talking about.

Answer 1

You can also try adding min-width: 0; to grid-items.