时间戳

首页 > 解决方案 > 网格将项目放在列中，而不是行中

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

问题描述

<aside>考虑一个具有display: gridwith的绝对定位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>

标签： csscss-positioncss-grid

解决方案

这与 CSS 网格无关，而是与绝对元素的收缩适应行为有关。从规范我们有：

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

那么收缩到适合的宽度是：min(max(preferred minimum width, available width), preferred width).

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

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

当自动填充被指定为重复次数时，如果网格容器在相关轴上具有确定的大小或最大大小，则重复次数是不会导致网格溢出其网格容器的最大可能正整数（如果确定，则将每个轨道视为其最大轨道尺寸函数，否则将其视为其最小轨道尺寸函数，并考虑间隙）；如果任何重复次数会溢出，则 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%容器块宽度参考，因此您有足够的空间进行多次重复。

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

推荐阅读