𝌞 Flexible content without wrapper divs

On this page

Based on this article by Ryan Mulligan

.content {
  --content-max-width: 900px;
  --content-breakout-width: 2rem;
  display: grid;
  grid-template-columns:
    /* prettier-ignore */
    [full-start] 1fr
    [breakout-start] var(--content-breakout-width)
    [content-start] minmax(min-content, var(--content-max-width))
    [content-end] var(--content-breakout-width)
    [breakout-end] 1fr [full-end];

  > * {
    grid-column: content;
  }

  .content-breakout {
    grid-column: breakout;
  }

  .content-full {
    grid-column: full;
  }

  .content-callout {
    padding: 1rem;
    background-color: #ddd;
  }
}

    

<section class="content">
  <h1>Flexible content without wrapper divs</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad iusto eligendi
    provident amet. Ab ullam dolores, veritatis nemo atque consectetur quae
    numquam commodi amet veniam totam eligendi placeat ratione velit?
  </p>
  <p class="content-breakout content-callout">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, odit rem
    natus modi eos molestias sed delectus quos tempora. Architecto ipsum ex vel
    et minus itaque deserunt sequi unde consectetur?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad iusto eligendi
    provident amet. Ab ullam dolores, veritatis nemo atque consectetur quae
    numquam commodi amet veniam totam eligendi placeat ratione velit?
  </p>
  <img
    src="https://images.unsplash.com/photo-1682687220211-c471118c9e92?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    class="content-full"
  />
  <p class="content-callout">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, odit rem
    natus modi eos molestias sed delectus quos tempora. Architecto ipsum ex vel
    et minus itaque deserunt sequi unde consectetur?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad iusto eligendi
    provident amet. Ab ullam dolores, veritatis nemo atque consectetur quae
    numquam commodi amet veniam totam eligendi placeat ratione velit?
  </p>
</section>

    

Alternate solution for full-bleed content Jump to heading

From this article by Andy Bell

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

    

---

← Back home