全宽背景，具有以视口为中心的网格布局

Question

我有一个简单的网格布局来显示单列元素，如下所示：

body
{
    display: grid;
    justify-content: center;
    grid-auto-flow: row;
}

body > * {
    width: 75vw;
    max-width: 45rem;
}

body

的孩子是

header

、

main

和

footer

。我想为

header

定义一个背景（颜色）以覆盖视口的整个宽度，而其内容不会溢出上面 CSS 指令定义的区域。我发现了 pair 的 answers 指向伪元素，但它们似乎需要不同的网格设置。有没有简单的方法可以获取全宽背景颜色，而不会使非常优雅的 CSS 变得太复杂？

Answer 1

使用

border-image

body {
  display: grid;
  justify-content: center;
}

body > * {
  width: 75vw;
  max-width: 45rem;
}

main {
 border-image: conic-gradient(lightblue 0 0) fill 0//0 100vw;
}

<header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a justo interdum, gravida tellus quis, iaculis tortor. Suspendisse quis lectus scelerisque, porta felis in, faucibus dui. Vivamus lobortis pellentesque urna vel ornare. Nulla est purus, tincidunt a ante in, efficitur commodo massa. Curabitur ultrices mollis</header>
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a justo interdum, gravida tellus quis, iaculis tortor. Suspendisse quis lectus scelerisque, porta felis in, faucibus dui. Vivamus lobortis pellentesque urna vel ornare. Nulla est purus, tincidunt a ante in, efficitur commodo massa. Curabitur ultrices mollis</main>
<footer>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a justo interdum, gravida tellus quis, iaculis tortor. Suspendisse quis lectus scelerisque, porta felis in, faucibus dui. Vivamus lobortis pellentesque urna vel ornare. Nulla est purus, tincidunt a ante in, efficitur commodo massa. Curabitur ultrices mollis</footer>