CSS 网格：如何在尊重最大宽度的同时使部分内容在一侧转义容器

Question

我正在开发一个布局，其中我需要一个部分元素在一侧突破其容器以扩展全宽度，但在另一侧，它应该尊重其父级的最大宽度。我正在努力寻找允许这种行为的 CSS 解决方案。我希望 .full-width-split-screen 部分有一个重音 div，它超出左侧的最大宽度，而右侧的图像应保持在最大宽度的范围内。 .max-width-container 应应用 max-width 居中。 mx-auto 是我用来居中内容的实用程序类。有人可以帮我找出实现此布局所需的 CSS 吗？该解决方案应该是响应式的并且不需要 JavaScript。

还有更强大的解决方案来转义最大宽度容器吗？最重要的是像 max-width-container 中的 max-width 一样尊重边距和填充。这两个元素应该具有相同的边距。

在较小的屏幕上它工作正常，但如果我们在 1920x1080 屏幕上检查这一点，那么边距就会关闭。

:root {
  --wrapper-padding-inline: 1rem;
  --wrapper-max-width: 50rem;
  --section-padding-block: 3rem;
}

body {
  margin: 0;
  font-family: system-ui;
  font-size: 1.125rem;
  line-height: 1.7;
  color: white;
  background-color: black;
}

img {
  max-width: 100%;
  display: block;
}

h1 {
  font-size: clamp(3rem, 10vw, 5rem);
  line-height: 1;
  margin-bottom: 1.5rem;
}

section {
  padding-block: var(--section-padding-block);
}

.accent {
  background-color: var(--clr-accent);
}

.wrapper {
  max-width: var(--wrapper-max-width);
  margin-inline: auto;
  padding-inline: var(--wrapper-padding-inline);
}

.full-width-split-screen {
  padding-block: 0;
}

.full-width-split-screen > :not(img) {
  padding-block: var(--section-padding-block);
  padding-inline: var(--wrapper-padding-inline);
}

@media (min-width: 600px) {
  .full-width-split-screen {
    display: grid;
    grid-template-columns:
      minmax(var(--wrapper-padding-inline), 1fr)
      minmax(0, calc(var(--wrapper-max-width) / 2))
      minmax(0, calc(var(--wrapper-max-width) / 2))
      minmax(var(--wrapper-padding-inline), 1fr);

    position: relative;
  }

  .full-width-split-screen > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .full-width-split-screen > img:last-child {
    grid-column: 3 / -1;
  }

  .full-width-split-screen > :not(img) {
    display: grid;
    align-content: center;
    justify-items: start;
  }

  .full-width-split-screen > :not(img):first-child {
    padding-left: 0;
    grid-column: 2 / 3;
  }

  .full-width-split-screen > :not(img)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
  }

  .full-width-split-screen > :not(img):first-child::before {
    grid-column: 1 / 2;
  }
}

.max-width-container{
  max-width: 1188px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 24px;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

<section>
  <div class="wrapper">
    <h1>Full-width on one side only</h1>
  </div>
</section>
<section class="full-width-split-screen">
  <div class="accent">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit officiis dolores vitae sed libero ipsa. Aut, eos accusantium, quas at laborum tempore ab quidem eum exercitationem odit excepturi incidunt iste.</p>
    <p>Deleniti voluptates harum nemo eos deserunt? Cum quos blanditiis dignissimos facilis , pariatur vel nostrum consectetur nesciunt in numquam.</p>
  </div>
  <img src='https://images.unsplash.com/photo-1684139517679-032b7213ad2e?q=80&w=2128&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' alt=''>
</section>
<section class="max-width-container mx-auto">
    <p>Deleniti voluptates harum nemo eos deserunt? Cum quos blanditiis dignissimos facilis , pariatur vel nostrum consectetur nesciunt in numquam.</p>
  </div>
  <img src='https://images.unsplash.com/photo-1684139517679-032b7213ad2e?q=80&w=2128&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' alt=''>
</section>

Answer 1

看看 Kevin Powell 的这段代码。 凯文·鲍威尔的Codepen 他使用网格来处理一些很酷的东西。我在此基础上进行了构建。

你可以这样做：

    .full-left {
        grid-column: full-width-start / content-end;
    }

    .full-right {
        grid-column: content-start / full-width-end;
    }

我也做了这个：

    .content-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        grid-column: content;
    }

在那里你可以并排放置元素。但是如果你想让图像向右流动。还将类 full-right 添加到与 .content-cols 相同的 div 中。

所以如果你将它们结合起来，你就会得到你想要的效果。 我正在使用 scss，但这是我的网格文件。

@mixin content-grid-setup(){
    --padding-inline: 1rem;
    --content-max-width: clamp(300px, 80vw, 1500px);
    --breakout-max-width: 2000px;
    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
    display: grid;

    grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(100% - (var(--padding-inline) * 2),var(--content-max-width))
    [content-end] minmax(0, var(--breakout-size)) 
    [breakout-end] minmax(var(--padding-inline), 1fr)
    [full-width-end];
}

@mixin full-width(){
    grid-column: full-width;
    display: grid;
    grid-template-columns: inherit;
}

.content-grid {
    @include content-grid-setup();

    & {
        .content-cols {
            display: grid;
            grid-template-columns: 23vw 1fr;
            gap: 1rem;
            grid-column: content;
        }

        .full-width {
            @include full-width();
        }

        .content {
            grid-column: content;
        }

        .breakout {
            grid-column: breakout;
        }

        .full-left {
            grid-column: full-width-start / content-end;
        }

        .full-right {
            grid-column: content-start / full-width-end;
        }

        .breakout-left {
            grid-column: breakout-start / content-end;

            @include respond-to(lg) {
                grid-column: breakout-start / breakout-end;
            }
        }

        .breakout-right {
            grid-column: content-start / breakout-end;

            @include respond-to(lg) {
                grid-column: breakout-start / breakout-end;
            }
        }
    }
}

我将 cols 设置为 40%、60%，然后针对移动设备。具有 .content-cols 的容器，我设置以下内容：

grid-column: full-width;
gap: 0;
@include content-grid-setup();