問(wèn)題

包含的代碼示例顯示了所需的布局/結(jié)果。當(dāng)您添加額外的。產(chǎn)品卡意味著又增加了一行，我有一張，你可以用。然后，重疊的文本描述會(huì)延伸到產(chǎn)品網(wǎng)格的新高度，并且可以位于產(chǎn)品卡的后面/上面。

合理的

我有單獨(dú)的重疊網(wǎng)格的原因是，我不能在同一個(gè)網(wǎng)格中顯示描述，因?yàn)樾枰谝苿?dòng)設(shè)備上單獨(dú)顯示在可滾動(dòng)的轉(zhuǎn)盤(pán)中的產(chǎn)品上方。

在這個(gè)例子中，初始布局是正確的，因?yàn)槲乙呀?jīng)用grid-template-rows指定了兩行:repeat(2，1fr)；但顯然，如果添加更多的產(chǎn)品，這需要更新的布局工作。

問(wèn)題

沒(méi)有javascript有辦法實(shí)現(xiàn)嗎？一種始終確保描述是第一行/產(chǎn)品卡高度的方法？或者您是否需要(以及如何)計(jì)算行數(shù)并動(dòng)態(tài)更新？

我知道一個(gè)簡(jiǎn)單的解決方案是復(fù)制描述，在網(wǎng)格內(nèi)放置一個(gè)，在網(wǎng)格外放置另一個(gè)，并在需要時(shí)顯示/隱藏。但是對(duì)SEO來(lái)說(shuō)，重復(fù)相同的內(nèi)容似乎不太好？

代碼示例

因?yàn)槲矣幸苿?dòng)布局包括顯示為什么我需要這樣的標(biāo)記。您需要在更寬的視窗中查看桌面布局。

/* Base */

body {
  background: black;
  margin: 0;
  padding: 32px 0;
}

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

h3 {
  font-size: 1.2rem;
  margin: 0 0 8px;
  padding: 0;
}

p {
  font-size: 1.1rem;
  margin: 0 0 8px;
  padding: 0;
}

/* Mobile */

.products {
  margin: 0 32px;
}

.products__desc {
  color: white;
  margin-bottom: 64px;
}

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

.product-card {
  background: white;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  margin: 0;
  padding: 0;
  position: relative;
  scroll-snap-align: start;
  width: 100%;
  max-width: 100%;
}

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

/* Desktop */

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

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

  .products__desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-column: 2 / span 6;
    grid-row: 1;
    margin-bottom: 0;
    padding: 64px 0;
    z-index: 1;
  }

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

  .product-card:first-child {
    grid-column: 9/span 4;
  }
}

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

  .products__desc {
    grid-column: 2/span 4;
  }

}

<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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

  <div class="products__grid">
  
    <div class="product-card">
      <img src="https://images.pexels.com/photos/15031202/pexels-photo-15031202/free-photo-of-canoe-on-lake-in-mountains.jpeg">
      <h3>Product Title</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
    
    <div class="product-card">
      <img src="https://images.pexels.com/photos/15031202/pexels-photo-15031202/free-photo-of-canoe-on-lake-in-mountains.jpeg">
      <h3>Product Title</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
    
    <div class="product-card">
      <img src="https://images.pexels.com/photos/15031202/pexels-photo-15031202/free-photo-of-canoe-on-lake-in-mountains.jpeg">
      <h3>Product Title</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
    
    <div class="product-card product-card--story">
      <h3>Product Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    
    <!-- <div class="product-card">
      <img src="https://images.pexels.com/photos/15031202/pexels-photo-15031202/free-photo-of-canoe-on-lake-in-mountains.jpeg">
      <h3>Product Title</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </div> -->
    
  </div>
  
</div>