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

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 我们有：

Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, calculate the available width: this is found by solving for 'width' after setting 'left' (in case 1) or 'right' (in case 3) to 0.

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

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

如果我们检查与 auto-fill

相关的 CSS 个网格的 the specification

When auto-fill is given as the repetition number, if the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container (treating each track as its max track sizing function if that is definite or as its minimum track sizing function otherwise, and taking gap into account); if any number of repetitions would overflow, then 1 repetition. Otherwise, if the grid container has a definite min size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. Otherwise, the specified track list repeats only once.

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

去掉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 解决了这个问题，因为宽度计算将不再是 shrink-to-fit 但你将有 100% 的容器块宽度 ^ref 所以你有足够的空间进行多次重复。

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

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

Grid places items in the column, not a row

css

css-position

css-grid