Search code examples
csscss-grid

Nested CSS Grid layout issue

I am trying to achieve this overall desktop page layout with CSS grid…

page layout sample

To be brief, some pages (such as my blog), will have text formatted in the center of the page for readability, but sometimes I will want to have a hero image or another large image that runs from the left edge of the screen to the right edge of the text area (to act as a sort of counter balance to the fixed-width masthead I am placing at the right of the page). I am trying to achieve this with CSS Grid, but am stumped as the yellow & red are not behaving as I'm expecting.

I have a pen here of where I'm at thus far. As a quick summary, I am using a 5 column grid layout to try to achieve this, with a Main element spanning the first three columns, and defining a nested grid within that to help position the text & full-sized image/object content. The nested grid is where I'm getting hangups, it won't set the text content to the 712px column like I want it to, instead starting it off at the beginning of the nested grid. Code below…

From the pen…

/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Define main grid */
body {
  background-color: #efefef;
  display: grid;
  grid-template-columns: 180px 1fr 712px 1fr 180px; /* Last column must be 180px for masthead, and both columns to the left of 712 px should match both to the right, so mirroring the two sides */
  grid-template-rows: 1fr 70px; /* Not sure I need this? */
}

/* Masthead: Set at right of page, narrow column, full page height */
header {
  grid-column: 5 / 6;
  grid-row: 1 / 3;
  background: green;
}

/* Main content area:
   Should span from left edge to just before second to last .body column.
   Defining a nested grid here to position content. */
main {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  display: grid;
  grid-template: 180px 1fr 712px; /* Mimics body grid's first three columns */
}
  
  /* Centered/margined content: Should be centered to page at 712 px */
  main h2, main h3, main p {
    grid-column: 3 / 4; /* PROBLEM AREA: Should be centered to the 712 px column, for line length readability, but is starting at left edge instead. Cannot figure this out. */
    background: red;
  }

  /* Large content: Should fill all of main */
  .full {
    grid-column: 1 / 4;
    background: yellow;
  }

/* Footer: Should be centered like text safe content. This is behaving correctly. */
footer {
  grid-column: 3 / 4;
  grid-row: 2 / 2;
  background: blue;
}
<header>
  <h1>Masthead</h1>
</header>

<main>
  <h2>Content text</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus lectus nec nibh maximus, vel tincidunt lacus luctus. Aliquam sit amet sagittis dolor. Pellentesque feugiat nibh nec massa sagittis venenatis eu a purus. Nullam sed dignissim dolor. In fringilla egestas elit non sagittis.</p>
  <img class="full" src="#" alt="Content full size object"></img>
  <h3>Subhead</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus lectus nec nibh maximus, vel tincidunt lacus luctus. Aliquam sit amet sagittis dolor. Pellentesque feugiat nibh nec massa sagittis venenatis eu a purus. Nullam sed dignissim dolor. In fringilla egestas elit non sagittis.</p>
<img class="full" src="#" alt="Content full size object"></img>
<h3>Subhead</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus lectus nec nibh maximus, vel tincidunt lacus luctus. Aliquam sit amet sagittis dolor. Pellentesque feugiat nibh nec massa sagittis venenatis eu a purus. Nullam sed dignissim dolor. In fringilla egestas elit non sagittis.</p>
</main>

<footer>
  <h1>Footer</h1>
</footer>

Solution

  • Thanks to G-Cyr for this; I was missing grid-template-columns on .main, I only had grid-template. Issue is resolved.