主页 / 问题 / 919306
Accepted
E_K
Asked:2020-12-13 08:27:19 +0000 UTC2020-12-13 08:27:19 +0000 UTC

为什么 `grid-row: 1 / -1` 为什么网格项从第一列开始放置？

  • 772

为什么具有属性的元素второй从第一列开始放置？但是，如果您设置一个元素（第五个块）应该占用多少条车道，那么它会保留在原来的位置。третийgrid-row: 1 / -1grid-row: span 2

.grid {
  display: grid;
  padding: 5rem;
  grid-template-rows: [start1] 100px [end1 start2] 100px  [end2] 50px;
  grid-template-columns: repeat(5, 1fr);
  //grid-auto-flow: row;
  grid-gap: 1rem;
}
.grid__item {
  width: 100%;
  height: 100%;
  background-color: #eaeaea;
  font-size: 24px;
  font-weight: bold;
}

.grid__item-2 {
  grid-row: 1 / -1;
}
.grid__item-3 {
  grid-row-start: start1;
  grid-row-end: end2;
}
.grid__item-5 {
  grid-row: span 2;
}
<div class="grid">
  <div class="grid__item grid__item-1">1</div>
  <div class="grid__item grid__item-2">2</div>
  <div class="grid__item grid__item-3">3</div>
  <div class="grid__item grid__item-4">4</div>
  <div class="grid__item grid__item-5">5</div>
</div>

css

1 个回答

  1. Best Answer

    根据规范，这是默认行为。grid-элементов特定属性grid-row-start/end设置具有最小正索引的列的起始行的自动放置算法。避免重叠该区域grid-area并占用另一个grid-cell.

    处理锁定到给定行的项目。

    对于每个具有确定行位置的网格项（即 grid-row-start 和 grid-row-end 属性定义了一个确定的网格位置），按照 order-modified 文档顺序：

    “稀疏”打包（默认行为）

    将其放置的列起始行设置为最早（最小的正索引）行索引，以确保该项目的网格区域不会与任何占用的网格单元重叠，并且超过此步骤之前放置在该行中的任何网格项目。

    据我了解，пятый该块被放置在它的位置是因为我们没有指出grid-линии它应该附加到哪个位置，而只是将它的大小设置为 2 grid-полосы。

    • 1

相关问题