时间戳

首页 > 解决方案 > CSS网格重叠单元格而不破坏正常流程

css-grid - CSS网格重叠单元格而不破坏正常流程

问题描述

我想知道是否可以指定一个网格单元格与网格的另一个区域重叠，而不必明确指定它重叠的单元格的行和列。

考虑一个为期两周的日历：

<div class="calendar">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
  <span>11</span>
  <span>12</span>
  <span>13</span>
  <span>14</span>
</div>

使用网格：

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

到目前为止，一切都很好：

两周日历网格

我现在想添加一个范围突出显示单元格：

  <!-- ... -->
  <span>13</span>
  <span>14</span>
  <span class="range"></span>
</div>

它应该跨越第一周的周三至周日：

.range {
 grid-column: 3/8;
 grid-row: 1;
 width: 100%;
 height: 100%;
 background: skyblue;
}

除非我现在明确地为五个受影响的日期单元格中的每一个指定行和列，否则不会自动重叠。

无自动重叠

为了获得我想要的重叠，我需要添加：

.calendar span:nth-child(3) {
  grid-row: 1;
  grid-columN: 3;
}

.calendar span:nth-child(4) {
  grid-row: 1;
  grid-columN: 4;
}

/* etc... */

结果：

具有显式定位的单元格重叠

有没有办法说所有单元格都应该按顺序自动流动，除非另有说明，即使它们重叠？

片段

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 30em;
}


.range {
 grid-column: 3/8;
 grid-row: 1;
 width: 100%;
 height: 100%;
 background: skyblue;
 z-index: -1;
}

/* I don't want to do this: */

.calendar span:nth-child(3) {
  grid-row: 1;
  grid-columN: 3;
}

.calendar span:nth-child(4) {
  grid-row: 1;
  grid-columN: 4;
}

.calendar span:nth-child(5) {
  grid-row: 1;
  grid-columN: 5;
}

.calendar span:nth-child(6) {
  grid-row: 1;
  grid-columN: 6;
}

.calendar span:nth-child(7) {
  grid-row: 1;
  grid-columN: 7;
}
<div class="calendar">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
  <span>11</span>
  <span>12</span>
  <span>13</span>
  <span>14</span>
  <span class="range"></span>
</div>

标签： css-grid

解决方案

您只需要定位绝对范围，这会使它失去流动性。（您还需要设置日历位置相对）

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 30em;
  position: relative;
 
}


.range {
 grid-column: 3/8;
 grid-row: 1 / span 1;
 width: 100%;
 height: 100%;
 background: skyblue;
 z-index: -1;
 position: absolute;
}
<div class="calendar">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
  <span>11</span>
  <span>12</span>
  <span>13</span>
  <span>14</span>
  <span>15</span>
  <span class="range"></span>
</div>

推荐阅读