On this page
full-bleed
https://css-tricks.com/full-bleed/
https://fedev.cn/css/full-bleed-layout.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
.wrapper1 {
width: 200px;
height: 200px;
background-color: antiquewhite;
margin: 0 auto;
.full-bleed {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
height: 100px;
background-color: bisque;
}
}
.wrapper2 {
display: grid;
grid-template-columns:
1fr
min(65ch, 100%)
1fr;
> * {
grid-column: 2;
}
.full-bleed {
width: 100%;
grid-column: 1 / -1;
background-color: blanchedalmond;
}
}
</style>
</head>
<body style="margin: 0">
<div class="wrapper1">
<div class="full-bleed">33</div>
</div>
<div class="wrapper2">
<h1>Some Heading</h1>
<p>Some content and stuff</p>
<div class="full-bleed">33</div>
</div>
<script></script>
</body>
</html>