主页 / user-1352048

Rogier de Ruijter's questions

Martin Hope
Rogier de Ruijter
Asked: 2024-11-13 22:38:03 +0800 CST
  • 9

我希望能够在网格设置中实现全出血（在视口上从一端到另一端显示项目）。我希望项目具有full-bleed跨设计网格和包装网格的类。

我愿意采用其他方式构建 DOM 来实现这一点，但我想继续使用网格而不是绝对定位。

.wrapper-grid {
  display: grid;
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
  row-gap: 1rem;
}

.design-grid {
  display: grid;
  /* I can't have subgrid and declare a new grid */
  /* grid-template-clomns: subgrid; */
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.wrapper-grid>* {
  grid-column: 2;
}

.full-bleed {
  grid-column: 1 / -1;
}

.item {
  height: 40px;
  background-color: #f1f1f1;
}
<body class="wrapper-grid">
  <div class="design-grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item full-bleed">This item should go to both edges of the viewport</div>
    <div class="item"></div>
  </div>
</body>

css