使 CSS 网格占据另一行（单独的）重叠 CSS 网格

Question

我有一个布局，其中文本介绍与第一个产品网格项目内联。然后其余的产品网格应该包裹在下面。

但是，在移动设备上，我需要将这些项目分开，因为介绍需要位于产品网格上方——它在手风琴中水平滚动。所以产品“卡片”被包裹在一个 div 中以包含它们。

在我的示例中，大部分内容都在工作，但是介绍跨越了网格的 2 行（当添加更多产品行时，更多），因此如果文本较长，它将位于项目卡片的后面。

那么我如何限制该网格只占用产品网格的 1 行？只用 CSS 有可能吗？

您需要在更宽的 (800px+) 视口上查看示例以查看桌面布局。

body {
  background: #eee;
}

.products {
  margin: 64px 32px;
}

.products__grid {
  display: flex;
  flex-wrap: nowrap;
  column-gap: 4px;
  margin: 0 -32px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 32px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-card {
  background-color: white;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  padding: 32px 32px 64px;
  width: 100%;
  max-width: 100%;
}

.product-card__title {
  color: black;
  display: flex;
  font-size: 1rem;
  padding: 0 32px;
}

.product-card--story {
  background-color: transparent;
  justify-content: center;
  padding: 0 32px;
  text-align: center;
}

@media only screen and (min-width: 800px) {

  .products {
    display: grid;
    column-gap: 4px;
    margin: 64px 32px 64px;
    grid-template-columns: repeat(12, 1fr);
  }

  .products__desc {
    background: rgba(255, 0, 0, .24);
    grid-column: 2 / span 4;
    grid-row: 1;
  }


  .products__grid {
    display: grid;
    column-gap: 4px;
    row-gap: 4px;
    grid-template-columns: repeat(12, 1fr);
    grid-row: 1;
    grid-column: 1 / span 12;
    margin: 0;
  }

  .product-card {
    grid-column: span 4;

    &:first-child {
      grid-column: 9 / span 4;
    }
  }

  .product-card__title {
    color: black;
    display: flex;
    font-size: 1rem;
    padding: 0 32px;
  }

  .product-card--story {
    background-color: transparent;
    justify-content: center;
    padding: 0 32px;
    text-align: center;
  }

}

<div class="products">
                
                <div class="products__desc">
                    <h2>Title of the Block</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    <ul>
                        <li>Lorem ipsum dolor</li>
                        <li>Lorem ipsum dolor</li>
                        <li>Lorem ipsum dolor</li>
                        <li>Lorem ipsum dolor</li>
                    </ul>
                </div>
                <div class="products__grid">
                    <a href="#" class="product-card">
                        <h3 class="product-card__title">Title of Product #1</h3>
                        <img src="https://images.pexels.com/photos/13446290/pexels-photo-13446290.jpeg" alt="ALT TEXT" class="product-card__image"> 
                    </a>
                    <a href="#" class="product-card">
                        <h3 class="product-card__title">Title of Product #2</h3>    
                        <img src="https://images.pexels.com/photos/13446290/pexels-photo-13446290.jpeg" alt="ALT TEXT" class="product-card__image">
                    </a>
                    <a href="#" class="product-card">
                        <h3 class="product-card__title">Title of Product #3</h3>
                        <img src="https://images.pexels.com/photos/13446290/pexels-photo-13446290.jpeg" alt="ALT TEXT" class="product-card__image">
                    </a>    
                    <div class="product-card product-card--story">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
                
            </div>

Answer 1

可能有更优雅的方法来做到这一点，但问题似乎是突破滚动条网格并将项目放入主网格。不确定那是否可能。所以我的解决方法很简单：将第一个产品加倍，在移动设备上隐藏最上面的一个，然后将其隐藏在桌面的滚动条中。

.description {
        background: red;
        padding: 24px;
        box-sizing: border-box;
      }

      .scroller {
        background: yellow;
        overflow-x: scroll;
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        max-width: 100%;
      }

      .product {
        display: inline-block;
        width: 400px;
        height: 400px;
        box-sizing: border-box;
        padding: 24px;
        background: cyan;
        flex-shrink: 0;
      }

      .products > .first {
        display: none;
      }

      .first {
        background: greenyellow;
      }

      @media screen and (min-width: 800px) {
        .products {
          display: grid;
          grid-template-areas:
            "a b"
            "c c";
          grid-template-columns: auto 400px;
          gap: 12px;
        }

        .description {
          grid-area: a;
          height: 400px;
        }

        .products > .first {
          grid-area: b;
          display: block;
          background: pink;
        }

        .scroller {
          grid-area: c;
        }
      }

    <div class="products">
      <div class="description">Description</div>
      <div class="product first">product 1a</div>
      <div class="scroller">
        <div class="product first">product 1b</div>
        <div class="product">product 2</div>
        <div class="product">product 3</div>
        <div class="product">product 4</div>
        <div class="product">product 5</div>
        <div class="product">product 6</div>
        <div class="product">product 7</div>
        <div class="product">product 8</div>
      </div>
    </div>

另一种选择——不加倍内容——是通过绝对定位将第一个产品从滚动条中拉出来。这有它的缺点，因为您需要根据产品内容块的大小设置描述宽度和高度，否则您的第一个产品将与描述重叠。

  .description {
        background: red;
        padding: 24px;
        box-sizing: border-box;
      }

      .scroller {
        background: yellow;
        overflow-x: scroll;
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
      }

      .product {
        display: inline-block;
        width: 400px;
        height: 400px;
        box-sizing: border-box;
        padding: 24px;
        background: cyan;
        flex-shrink: 0;
      }

      .first {
        background: greenyellow;
      }

      @media screen and (min-width: 800px) {
        .products {
          position: relative;
        }

        .description {
          grid-area: a;
          height: 400px;
        }

        .first {
          position: absolute;
          top: 0;
          right: 0;
          background: pink;
        }
      }

 <div class="products">
      <div class="description">Description</div>
      <div class="scroller">
        <div class="product first">product 1</div>
        <div class="product">product 2</div>
        <div class="product">product 3</div>
        <div class="product">product 4</div>
        <div class="product">product 5</div>
        <div class="product">product 6</div>
        <div class="product">product 7</div>
        <div class="product">product 8</div>
      </div>
    </div>