标签: css-grid

我想要的是

旁注。当然，最重要的问题是将它们放置在相对于引用它们的文本高度的高度。我可以使用 JavaScript 来完成，查看offsetTop注释引用的属性，但随后我还必须处理视口调整大小和缩放，而 CSS 解决方案会将这些留给浏览器。因此，CSS 解决方案是更可取的。

背景和动机

这是博客响应式设计的一部分。如果页边空白处有足够的空间，则注释应显示为旁注；否则，它们将作为脚注出现。这篇文章更详细地解释了它。请记住，超过一定宽度后，无论如何我们都会有边距，因为如果要保持可读性，文本行不能超过一定长度，因此我们也可以使用其他未使用的空间。Tufte 是该解决方案的知名支持者。

我试过的

到目前为止，我已经尝试了两种方法。它们都在标记 (a <sup>)上使用相对定位，以便能够以<span>相对于参考文本的顶部偏移量来定位注释 (a )。

我的第一次尝试使用绝对定位：

article {
   width: 50%;
   margin-left: auto;
   margin-right: auto;
}

sup {
   /* Needed to position sidenotes */
   position: relative;
}

.sidenote {
   width: 20%;
   position: absolute;
   
   /* BTW: This should be proportional to the note's height,
      so as to make its vertical center align with the text
      referencing it */
   top: -100%;
} …

使用时：

grid-template-columns: repeat(auto-fit, minmax(*size*, 1fr));

在网格内部，一切似乎都完美无缺。它可以创建尽可能多的瓷砖以适应空间。

当我将 a 添加grid-column: span 2到网格项目时，一切正常，直到只有一个项目的足够空间。

由于span 2网格永远不会分解为一列，并且会创建一个非常小的列，其中包含以下项目并且永远不会换行。

如果我取出span 2，它会完美地包裹起来。

如果可能的话，我宁愿不使用媒体查询来解决这种行为。

有没有人知道为什么会发生这种情况？

这是行为的 Codepen：https ://codepen.io/anoblet/pen/BYOeQM

grid-template-columns: repeat(auto-fit, minmax(*size*, 1fr));

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
}

.span-2 {
  grid-column: span 2;
}

.grid-auto {
  background: red;
}

.grid-900 {
  max-width: 850px;
  background: blue;
}

如果您调整窗口大小，两个网格都会显示该行为，但第二个网格会立即显示它。

谢谢您的帮助 ：）

我想知道这是否可以仅使用 flexbox 来完成，或者我是否还需要合并网格功能。我试图让特定的单元格跨越多行和多列。我是我的独特案例，它只是第一个框需要与它下方的 2 个框具有相同的宽度，并且与它右侧的两个框具有相同的高度。

这是我最初尝试的代码笔，我明白为什么它不起作用。只是想知道是否有办法得到这个：

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 31.58585%;
  background-color: #f1f1f1;
  border: 1px solid #aaa;
  margin-bottom: 10px;
  margin-top: 10px;
  text-align: center;
}

.highlight {
  flex-basis: 65.9%;
}

<div id="container">
  <div class="box highlight">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
</div>

进入这个：

我正在尝试以简历样式创建网格模板。

基本上，我有一个包含 2 列 1 fr 和 3fr 的网格。

1fr 具有该部分的标题，而 3fr 具有所有内容。在 3fr 部分中，我正在添加工作经验，并将其布局以便有 2 列具有 display: flex 属性

每个都在一个带有 div 的部分中。

现在，当我添加第一个工作时看起来不错，但随后我添加了第二个工作，并将其分层在第一个工作之上，依此类推。我希望他们在该部分中基本上处于各自的行中。

我如何才能使它们不会相互堆叠，而是整齐地一个接一个地放置？

我需要在该网格行内制作另一个网格吗？

任何帮助都会很棒，请在下面查看我的 Codepen（这只是一个片段，请参阅下面的完整 codepen）

简历编码笔

.container {
  display: grid;
  max-width: 82em;
  max-height: auto;
  margin: auto;
  grid-template-areas: "head head"
                       "nav nav"
                       "about about-info"
                       "work work-info"
                       "education education-info"
                       "skills skills-info"
                       "footer footer";
  grid-template-rows: 300px 50px 12.50em 31em 500px 500px 50px;
  grid-template-columns: 1fr 3fr;
  grid-gap: .075em;
  background-color: white;
}

.work-info {
  border: 1px solid black;
  grid-area: work-info;
  display: …

这是可能的“偏移”一个div在CSS网格的图像中？

是否可以像 css 中的弹性项目一样缩小网格项目？

网格项目

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.child {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 3px solid #a07;
}

<div class="container">
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
</div>

提琴手

弹性项目

.container {
  display: flex;
  margin-left: -10px;
  flex-flow: row wrap;
}

.child {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  padding: …

是否可以为 grid-template-columns 属性设置动画？我正在构建技术文档的布局，在网格的第一列中您可以看到不同错误的描述，在第二列中可以看到相关技术内容的超链接。

按下按钮，使用 javascript 超链接容器将消失并将网格的列号更改为 1。

它正在工作，但效果是快速效果，我的目标是缓出幻灯片效果。

css：

.content-grid-rc {
    display: grid;
    grid-template-columns: auto 350px;
    grid-template-rows: auto auto;
    grid-template-areas: "a b"
                     "c c";
    transition: all 1s;

}

javascript:

    function hideLinks(){
    let x = document.getElementsByClassName("card");
        for(let i = 0; i < x.length; i++){
            x[i].style.display = "none";
            document.getElementById("content-grid-rc").style.gridTemplateColumns = "100% 0%";
        }
    }

非常感谢您的提示！

我开始使用 CSS Grid，我一直在阅读有关有助于响应的属性；所以我正在尝试构建一个包含 6 个元素的小网格；我的目的是让它们在较大的设备上显示为 2 行，如下所示：

并且为了将它们全部显示在较小的设备上，所以对于较小的设备来说一切都很好，我正在使用auto-fill它以保持响应，但是如果我在笔记本电脑屏幕或台式机上查看页面，它能够再填充一列最终看起来像这样：

这是我的grid布局代码。

display: grid;
grid-template-columns: repeat(auto-fill, 260px);
justify-content: center;
row-gap: 18px;
column-gap: 18px;

有没有办法保持响应行为但也设置最大列数？任何帮助表示赞赏；如果它只能通过媒体查询来完成，那很好，但我首先尝试寻找不使用它们的方法。此外，我通过padding为整个网格容器设置水平以补偿附加列的大小，使其按预期工作；但同样，如果有更好的方法，我会全神贯注。谢谢！

工作示例 https://codepen.io/IvanS95/pen/NEYdxb

我为对话场景构建了一个 CSS 网格。我使用的max-content功能grid-template-columns来确保最长的扬声器名称定义左列的宽度。

问题是.stage-director没有扬声器名称的列。在当前设置下，舞台导演的声明定义了左列的最大内容，这毫无意义。

有没有办法忽略- 计算的.dd.statement.stage-director内容max-content？

dl {
  display: grid;
  grid-template-columns: max-content auto;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}

dt,
dd {
  margin: 0;
  padding: 0;
}

.speaker.stage-director {
  display: none;
}

.statement.stage-director {
  grid-column: span 2;
}

<dl>
  <dt class="speaker">ROMEO</dt>
  <dd class="statement">What, shall this speech be spoke for our excuse? Or shall we on without a apology?</dd>

  <dt class="speaker stage-director"></dt>
  <dd class="statement stage-director">This is a long statement of the stage …

我今天刚开始学习 CSS 网格，我可以开始看到使用这个很棒的 css 类的意义。但真正让我困惑的一件事是如何在移动设备上重新组织网格。

我在这里做了一个例子。这是在桌面视图上应该如何工作。当屏幕尺寸低于 991px 时。我希望网格看起来像这样：

但是我应该如何使用 CSS 网格来控制它？

.wrapper {
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  grid-auto-rows:minmax(100px,auto);
  grid-gap:1em;
}	

.wrapper > div {
  background-color: #eee;
  padding: 1em;
}
.wrapper > div:nth-child(odd) {
  background-color: #ddd;
}

.box1 {
  grid-column:1/3;
  grid-row:1/3;
}

.box2 {
  grid-column:3;
}

.box3 {
  grid-column:3;
}

<div class="wrapper">
  	<div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
</div>