Question

考虑一个绝对定位的<aside>，其中display: grid与grid-template-columns。

我希望黄色框出现在蓝色框的左侧，并且两个框都对准容器的右侧（黑色框）。相反，将黄色框放置在蓝色框的顶部上。

还请注意，将.fix1或.fix2添加到<aside>会使网格按预期方式连续放置项目（但会破坏其他功能）。

为什么将网格项（<span>）放在一列而不是一行中？如何修复此并仍然使用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网格无关，但与绝对元素的缩小适应行为有关。在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相同，因为宽度会增加，以便有足够的空间重复。

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

1 个答案: