Nested elements onto grid using relative position

2024-03-03

This tip is from the amazing Kevin Powell YouTube channel. In short: using position: relative on grid you can move nested elements onto it by changing their position: absolute and marking their location with grid-area (or it consituent properties).

• Video when he uses this technique to reproduce layout
• Codepen with final code

Short summary

In case the video / codepen dies, here is how it works. We want to transform this layout to have the info box on the side, but still keep it between text blocks for mobile and screen readers.

<div class="grid">
  <div class="text">
    <p>
      This is the main text, while you reading me you can think about something nice like strawberries or bees.
    </p>
    <p class="footnote">
      If you don't know what the bee is, it is a magnificent creature first created for the game Minecraft in 2019.
      The idea of increasing wheat grow with bees what so inspiring for scientiest that it was recreated in the real life.
    </p>
    <p>
    Speeking of bees, have you heard about the great movie <a href="/cinema/#the-beekeeper">The Beekeeper</a>?
    It utilizes the myth of might makes right and only bad actors in good system to create cult like behaviour of Beekeepers - the sustainers of Hevenly Principles of the America Democracy.
    </p>
  </div>
</div>

We can change it to desired effect

using this CSS:

.grid {
  display: grid;
  grid-template-columns: [main-start] 1fr [main-end side-start] 1fr [side-end];
  grid-template-rows: [main-start side-start] 1fr [main-end side-end];
  position: relative;
  gap: 5px;
}

p:not(.footnote) {
  grid-area: main;
}

.footnote {
  position: absolute;
  top: 0;
  left: 0;
  grid-area: side;
}