标签: css-grid

我们正在使用 CSS Grid，我们意识到还有其他方法可以让以下代码工作，但我们想使用 CSS Grid。

我们有以下场景，我们的 CSS 编译为：

.r4 {
  grid-template-rows: var(--height-base) auto minmax(var(--height-base), -webkit-max-content) minmax(var(--height-base), -webkit-max-content);
  grid-template-rows: var(--height-base) auto minmax(var(--height-base), max-content) minmax(var(--height-base), max-content);
}

Autoprefixer在第一个属性中添加了-webkit前缀max-content。这是预期和期望的。但是，当您尝试在 Safari 中呈现此 CSS 时，Safari 使用第二个属性（无-webkit前缀）并且无法正常工作。

我相信 Safari 会看到具有相同名称的属性并使用后者。

问题：我应该如何使用max-content它才能在 Safari 和 Chrome 中工作？有没有办法让Safari“选择”包含-webkit前缀的正确属性，max-content或者我应该使用max-content/min-content以不同的方式？

请看这个codepen

.r4 {
  grid-template-rows: var(--height-base) auto minmax(var(--height-base), -webkit-max-content) minmax(var(--height-base), -webkit-max-content);
  grid-template-rows: var(--height-base) auto minmax(var(--height-base), max-content) minmax(var(--height-base), max-content);
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: …

是否可以自动跨越最后一列以占据网格中的剩余空间？基本上我正在努力实现这一目标：

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.col {
  background: blue;
  padding: 20px;
  border: 1px solid red;
}

.col:last-child {
  background: yellow;
  /* missing magic here */ 
}

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
</div>

看起来 jQuery UI Resizable 似乎不适用于 CSS 网格布局。当开始调整元素大小时，它会向右跳转添加 CSS 网格的偏移量。

$('#resize').resizable();

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
}

.grid_cell {
  background-color: white;
  border: 1px solid gray;
  text-align: center;
}

#resize {
  background-color: grey;
  position: absolute;
  width: 100%;
  text-align: center;
  grid-column-start: 2;
  grid-column-end: 3
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div class="grid">
  <div class='grid_cell'>
    grid cell
  </div>
  <div class="grid_cell">
    grid cell
  </div>
  <div id="resize">
    resize me!
  </div>
</div>

JSFiddle

https://jsfiddle.net/Bensky/91bgbfxg/11/

知道如何解决吗？

我在一个网格系统上开发，其中有几个连续折叠的项目。单击标题或缩略图时会触发折叠。

现在的问题是：当我展开一行的 1 个项目时，所有其他项目也会自动展开，但展开的文本仅显示在当前项目中。我只想扩展 1 个项目，其余项目在网格系统中自行排序：

这个 img 显示了它目前的行为：

这就是我希望它的行为方式：

这是我当前代码的小提琴： Fiddle

1 项的 HTML 代码（仅因为小提琴需要一些代码）：

<div class="flex-container">
  <div id="item1" class ="item">
     <a data-toggle="collapse" href="#collapse-1" class="collapsed" aria-expanded="false">
            <div class="item-body">
              <div class="image">
                    <img src="https://www.lycatv.tv/img/web/avatar_1.png" alt="Dummy" title="Dummy">          
                </div>

                <div class="content">                                                   
          <h3>TEST</h3>
          <h4>Testmodell 0</h4>
          <div class="btn-group-vertical buttons" role="group" aria-label="...">
                  <button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button>
                    </div>                                  
                </div>
            </div>
      </a>

            <div class="item-footer collapse" id="collapse-1" aria-expanded="false" style="height: 11px;">
              <p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy …

我想以较小的屏幕宽度从嵌套网格中显示元素。在示例中，当屏幕达到某个像素宽度时，所有元素都设置为彼此。

我希望元素一个接一个地显示，并以更大的像素宽度返回到原始区域。可能这是一个相当简单的解决方案，但我还没有找到任何提示。也许有人有想法？

body {
  margin: 40px;
}

.sidebar {
  grid-area: sidebar;
}

.sidebar2 {
  grid-area: sidebar2;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

.footer {
  grid-area: footer;
}

.wrapper {
  background-color: #fff;
  color: #444;
}

.wrapper {
  display: grid;
  grid-gap: 1em;
  grid-template-areas: "header" "sidebar" "content" "sidebar2" "footer"
}

@media only screen and (min-width: 500px) {
  .wrapper {
    grid-template-columns: 20% auto;
    grid-template-areas: "header   header" "sidebar  content" "sidebar2 sidebar2" "footer   footer";
  }
}

@media only screen and (min-width: …

我在我的公司做了一个关于新 CSS 网格规范的技术演示，我的经理问了我一个非常有趣的问题，我没有一个简单的答案。为什么在网格中定位元素时，位置是由它们之间的网格线引用的，而不是使用某种固有的方式来识别列和行？我知道 grid-template-areas，但这仍然是你必须自己定义的东西。

本质上，我的问题是：为什么以下示例中的数字指的是网格线号而不是网格列号？

grid-column: 1/4;

我正在学习 CSS Grid 并试图重现一些 flex 行为（我知道两者是互补的，这是一个学习练习）。

下面的 flex 示例允许div堆叠未定义数量的s（未定义，因为它们的数量不会影响 CSS 部分）

#flex {
  height: 100px;
  display: flex;
  flex-direction: row;
}

#flex > div {
  background-color: blue;
}

<div id="flex">
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

我尝试将其移植到 CSS Grid 实现中：

/* updated with correct comment delimiters, thanks @vals */

#grid {
  height: 100px;
  display: grid;
  grid-auto-flow: column;  /* when something has to be added, be it a column */
  grid-auto-columns: fit-content; /* when a new column is added, its size will …

我想创建一个响应式网格，随着窗口大小的增加添加额外的列，但列的总数始终是奇数。

我找到了一个适用于 Chrome/Opera/Safari 但不适用于 Firefox 的解决方案：

grid-template-columns: repeat(auto-fill, minmax(150px,1fr) minmax(150px,1fr)) minmax(150px,1fr);

关于如何在 Firefox 中进行这项工作的任何建议？

CodePen：https ://codepen.io/andybarefoot/pen/MrOzod ? editors = 0100

我想要的是

旁注。当然，最重要的问题是将它们放置在相对于引用它们的文本高度的高度。我可以使用 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%;
} …

这是关于使用 css Grid 在特定数量的子元素之后实现列换行的问答。

HTML 模型

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  .....
  <div class="child">n</div>
</div>

所需的布局类似于，

1  7   13
2  8   14
3  9   .
4  10  .
5  11  n
6  12

在特定数量的项目（在这种情况下为 6）之后，剩余的内容应该被包装到一个新列上。