CSS GRID - 创建博客布局

Question

我想要这样的布局 HTML:

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

我无法更改 HTML，你能帮我用 CSS 网格实现吗？

https://jsfiddle.net/1y98feza/

Answer 1

如果你绝对不能使用其他任何东西，你可以这样做：

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;
}

CSS GRID - 创建博客布局

CSS GRID - Create a blog layout

css

grid