网格将项目放在列中，而不是行中

Question

考虑一个绝对定位的<aside>，它有一个display: grid 和grid-template-columns。

我希望黄色框出现在蓝​​色框的左侧，并且都与容器（黑框）的右侧对齐。而是将黄色框放置在蓝色框的顶部。

另请注意，将.fix1 或.fix2 添加到<aside> 会使网格按预期将项目排成一排（但会破坏其他内容）。

为什么网格项目（<span>'s）放在一列而不是一行？如何解决这个问题仍然使用 CSS 网格定位内容？ （我对 Flexbox、浮动等不感兴趣）

main {
  width: 300px;
}

div {
  position: relative;
}

section {
  width: 100%;
  height: 30px;
  background-color: black;
}
 
aside {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(auto-fill, 2em);
  top: 0;
  right: 5px;
  height: 100%;
}

span {
  display: block;
}

span:nth-child(1) {
  background-color: yellow;
}

span:nth-child(2) {
  background-color: blue;
}

/* Adding this class to <aside>
   fixes the issue, but aligns
   grid contents to the left */
.fix1 {
  width: 100%;
}

/* Adding this class to <aside>
   fixes the issue, but breaks
   the placement of <aside> */
.fix2 {
  position: relative;
}

<main>
  <div>
    <aside class="">
      <span>.</span>
      <span>.</span>
    </aside>
    <section/>
  </div>
</main>

Answer 1

这与 CSS 网格无关，而是与绝对元素的 shrink-to-fit 行为有关。来自the specification 我们有：

缩小以适应宽度的计算类似于使用自动表格布局算法计算表格单元格的宽度。粗略地说：通过格式化内容而不换行来计算首选宽度，而不是显式换行，并计算首选最小宽度，例如，通过尝试所有可能的换行。 CSS 2.1 没有定义确切的算法。第三，计算可用宽度：这是通过将'left'（情况1）或'right'（情况3）设置为0后求解'width'得到的。

那么缩容宽度为：min(max(preferred minimum width, available width), preferred width).

在您的情况下，可用宽度足够大，并且首选最小宽度与首选宽度（使用的宽度）相同，因为没有可能的换行符。

如果我们检查与 auto-fill 相关的 CSS 网格的 the specification

当自动填充被指定为重复次数时，如果网格容器在相关轴上有确定的大小或最大大小，则重复次数是不会导致网格溢出的最大可能正整数网格容器（如果确定，则将每个轨道视为其最大轨道尺寸函数，否则视为其最小轨道尺寸函数，并考虑间隙）； 如果任何重复次数会溢出，则重复 1 次。否则，如果网格容器在相关轴上有明确的最小尺寸，则重复次数是满足该最小要求的最小可能正整数。 否则，指定的曲目列表只会重复一次。

基本上你属于最后一种情况，因为绝对元素的大小就是其内容的大小，我们只能在其中放置一个重复。

删除display:grid查看大小：

main {
  width: 300px;
}

div {
  position: relative;
}

section {
  width: 100%;
  height: 30px;
  background-color: black;
}
 
aside {
  position: absolute;
  grid-template-columns: repeat(auto-fill, 2em);
  top: 0;
  right: 5px;
  height: 100%;
}

span {
  display: block;
}

span:nth-child(1) {
  background-color: yellow;
}

span:nth-child(2) {
  background-color: blue;
}

/* Adding this class to <aside>
   fixes the issue, but aligns
   grid contents to the left */
.fix1 {
  width: 100%;
}

/* Adding this class to <aside>
   fixes the issue, but breaks
   the placement of <aside> */
.fix2 {
  position: relative;
}

<main>
  <div>
    <aside class="">
      <span>.</span>
      <span>.</span>
    </aside>
    <section/>
  </div>
</main>

要获得你想要的，你可以考虑一个列流并将每列定义为 2em：

main {
  width: 300px;
}

div {
  position: relative;
}

section {
  width: 100%;
  height: 30px;
  background-color: black;
}
 
aside {
  position: absolute;
  display:grid;
  grid-auto-columns: 2em;
  grid-auto-flow:column;
  top: 0;
  right: 5px;
  height: 100%;
}

span {
  display: block;
}

span:nth-child(1) {
  background-color: yellow;
}

span:nth-child(2) {
  background-color: blue;
}

/* Adding this class to <aside>
   fixes the issue, but aligns
   grid contents to the left */
.fix1 {
  width: 100%;
}

/* Adding this class to <aside>
   fixes the issue, but breaks
   the placement of <aside> */
.fix2 {
  position: relative;
}

<main>
  <div>
    <aside class="">
      <span>.</span>
      <span>.</span>
    </aside>
    <section/>
  </div>
</main>

---

position:relative 解决了这个问题，因为宽度计算将不再是缩小以适应，但您将拥有容器块宽度的100% ^ref 所以你有足够的空间多次重复。

width:100% 以与position:relative 相同的方式解决此问题，因为宽度会增加以有足够的空间进行更多重复。