如何使孩子从第一个间隙到最后一个间隙跨越网格? [英] How to make a child span the grid from the first to the last gap?

问题描述

我有一个12列的父网格，每列之间的间距为24px.我想渲染一个子网格，该子网格将从第1列的末尾开始，或者从第一个间隙开始，最后到最后一个间隙，该如何实现?

I have a parent grid of 12 columns and a gap of 24px between each column. I want to render a child grid that will start from end of column 1 or start from first gap and end to the last gap, How can I achieve this?

这是我想要的例子:

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
}

.grid div {
  grid-column: ???;
}

<div class="grid"> 
  <div></div>
</div>

推荐答案

使元素从第二列扩展到最后一列之前，然后使用负边距:

make the element to span from the second column to before the last column then use negative margin:

.grid {
  border: 1px solid;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 24px;
}

.grid div {
  height: 100px;
  background: red;
  grid-column: 2 / -2;
  margin: 0 -24px;
}

<div class="grid">
  <div></div>
</div>

您也可以像下面这样:

.grid {
  border: 1px solid;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 24px;
}

.grid div {
  height: 100px;
  background: red;
  grid-column: 2 / -2;
  width: calc(100% + 48px);
  justify-self: center;
}

<div class="grid">
  <div></div>
</div>

这篇关于如何使孩子从第一个间隙到最后一个间隙跨越网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！