<nav>
  <h1>Subgrid</h1>
</nav>

<main>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, debitis nisi commodi provident distinctio optio, expedita enim qui deleniti amet error ea, itaque sequi nemo dolore! Unde labore nulla quia!</p>
  
  <img src="https://doodleipsum.com/700x394/flat?i=7f17b2c8c0638d108da44ecf527d9821" alt="">
  
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, debitis nisi commodi provident distinctio optio, expedita enim qui deleniti amet error ea, itaque sequi nemo dolore! Unde labore nulla quia!</p>
</main>
@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";

body {
  display: grid; 
  gap: 3ch 0;
  /*  main grid with named grid lines  */
  grid-template-columns: [fullbleed-start] auto [main] min(90%, var(--size-content-3)) auto [fullbleed-end];
}

nav {
  /*  placed fullbleed  */
  grid-column: fullbleed;
  
  /*  subgrid: adopts parent columns  */
  display: grid;
  grid-template-columns: subgrid;
  
  /*  some style  */
  box-shadow: var(--shadow-3);
  padding-block: 1ch;
}

nav > h1 {
  /*  place in center column [main]  */
  grid-column: main;
  color: var(--indigo-5);
}

main {
  /*  placed fullbleed  */
  grid-column: fullbleed;
  
  /*  subgrid: adopts parent columns  */
  display: grid;
  gap: 2ch 0;
  grid-template-columns: subgrid;
}

main > * {
  /*  place everything in center column  */
  grid-column: main;
}

main > img {
  /*  placed fullbleed in subgrid lines  */
  grid-column: fullbleed;
  
  background: var(--indigo-5);
  inline-size: 100%;
}











body {
  min-block-size: auto;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.