如何创建交替网格布局

Question

我正在尝试使用 css 创建一个交替的网格布局，但它比预期的要难。

我想要实现的是两个交替出现的框的布局，所以首先是一个带有文本的框，然后是一个带有图像的框。图像应该覆盖整个块，并且在调整屏幕大小时，图像应该向右缩放（这意味着它应该贴在页面的右侧，但也应该与另一个块保持相同的距离，以便在屏幕之间没有巨大的空白两个街区）。

例子：

This is an example website of what I am trying to achieve

我试过用 CSS Grid 来做这个，但没有成功。

<div class="wrapper contentwrap">
  <div class="box sidebar">
    <h6>Headertext</h6>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div class="box content" style="background-image:url('https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg')">
  </div>
</div>

风格：

<style media="screen">
.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.wrapper {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 50% 50% 100%;
  grid-template-areas:
  "sidebar content";
  background-color: #fff;
  color: #444;
}

.box {
  height: 400px;
  padding: 10px;
}
</style>

我遇到的问题是，当我使用background-size:cover 时，图像会放大太多。就好像它覆盖了一个比它应该覆盖的更大的块，就好像该块继续超出屏幕的视野。如果我切换块并且文本在右侧，那么文本也会离开屏幕。此外，当我尝试向网格中添加新的一行块时，整个网格都是空的。

有没有更好的方法来做到这一点？

Answer 1

我不确定您为什么要尝试将边栏与网格结合起来。也不确定为什么在您似乎真的想要 2 列时您的网格中有 3 列。

我已经稍微简化了您的代码以创建以下示例：

.wrapper {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(2, 50vw);
    grid-template-rows: 50vh;
    background-color: #fff;
    color: #444;
}

.content {
    height: 400px;
    padding: 10px;
}

.column-image {
    background: url("https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg")
        no-repeat center/cover;
}

    <div class="wrapper">
        <div class="content">
            <h6>Headertext</h6>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <div class="column-image"></div>
    </div>
    <div class="wrapper">
        <div class="column-image"></div>
        <div class="content">
            <h6>Headertext</h6>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>

您可能希望全屏查看 sn-p，因为显然文本现在在小视图中溢出。