CSS GRID - Create a blog layout

Question

I would like to have that layout with the following HTML:

<div>
  <p>left</p>
  <p>right 1</p>
  <p>right 2</p>
  <p>right 3</p>
  <p>right 4</p>
</div>

I can't change the HTML, can you help me achieve that with CSS grid?

https://jsfiddle.net/1y98feza/

Answer 1

Here is how you can do it if you absolutely can't use anything else:

div{
    display: grid;
}

p
{
    border: 5px solid #FF0000;
}

p:nth-child(1)
{
    grid-area: 1 / 1 / span 4 / span 1;
}

p:nth-child(2)
{
    grid-area: sidebar;
}