标签: css-grid

我正在尝试构建一个带有标题栏、导航页眉、页脚和中间的主要内容区域的 Web 布局（侧边栏和主视图一分为二）。

我打算使用 CSS Grid 布局。我当前的代码管理这一切，除了：主要内容（和侧边栏）根据其内容进行调整。这不是我想要的。

如何让第三个网格行填充所有剩余的垂直空间？

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: min-content min-content auto min-content;
  grid-gap: 10px;
  grid-template-areas: "header header" "nav nav" "sidebar main" "footer footer";
}

.title {
  grid-area: header;
  background-color: #1BC336;
}

.navigation {
  grid-area: nav;
  background-color: #C3A21B;
}

.sidebar {
  grid-area: sidebar;
  background-color: gold;
  overflow: auto;
}

.main {
  grid-area: main;
  background-color: #1BC3B9;
  overflow: auto;
}

.footer {
  grid-area: footer;
  background-color: #5C1BC3;
}

<div class="grid">
  <div …

IE 11中的Css Grid中的项目相互叠加.在Chrome,FF和Safari中,一切都运行正常,但不是IE 11.

铬:

IE:

码:

.content-item__image {
  height: 210px;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.content-item__description {
  padding: 16px 28px;
}

.content-grid {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  -ms-grid-rows: 1fr 1fr;
  grid-gap: 1rem;
}

<div class="content-grid">
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div> …

下面的代码段使用 CSS Grid 来增加宽容器的列数。对于窄容器（例如取消注释width: 80vw或调整示例大小），它添加了隐式行（grid-template-rows属性中只有 2 个是显式的）。如何仅保留 2 行，使“溢出”2×n 网格的网格项隐藏？

.wrapper {
  border: 2px solid #f76707;
  background-color: #fff4e6;
  display: grid;
  /* width: 80vw; */
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(2, 1fr);
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

我一直在尝试使用 css 网格创建响应式组件，而不是依赖媒体查询，以便它可以利用不同布局中的可用空间。如果空间足够大，应该有两列，第一列是固定宽度（包含图像），第二列是剩余的（带有文本），一个 2x1 的网格。如果不是，那么应该有一列占据所有可用空间，并且网格更改为 1x2，例如

宽 2x1 网格

+---+---------+
| o | text    |
+---+---------+

窄 1x2 网格

+---------+
|    o    |
+---------+
| text    |
+---------+

我看着使用repeat(auto-fill, ...)多列维度，但随后它重复了 2 列模式，这是有道理的，但不能解决我的问题。我希望有一种方法可以为不同的auto-fill列定义不同的宽度。否则，我怀疑可能有一个解决方案涉及*-content? 我正在尝试做的可能吗？

我的页面顶部有一个导航。其中我有 5 家不同公司的 5 只市场股票。我想以全宽显示 5，但随着窗口变小，我基本上想要的行为是切断溢出的窗口，并调整剩余窗口的大小以填充导航容器（所以假设在某些时候它只会显示 3 只股票并隐藏其他股票）。这是现在的代码：

.stocks-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 150px);
  grid-template-rows:1fr;
  grid-auto-rows: 0;
  overflow-y: hidden;
  justify-content: space-between;
  width: 75%;
  font-size: 11px;
  overflow-y: hidden;
}

目前这几乎就是我所需要的。问题是，现在溢出的库存项目（基本上应该创建一个新行）被挤在第一行的顶部。同样，我不希望他们创建新行或可滚动。我只是根本不想让他们出现。有任何想法吗？

我使用 CSS Grid 布局来创建页面的基本布局，而我最初是在 Chrome 中工作的。我现在也在 Firefox 中对此进行了测试，并注意到一些我不理解的行为，并且似乎不符合我理解的规范。

我创建了一个显示行为的简化示例。问题是搜索标题 div 的高度。这被设置为 max-content 并且应该和所包含的元素一样大。

这在 Chrome 66 中按预期工作，但不适用于 Firefox 52 ESR 或 Firefox 62 开发人员版（均在 Linux 上）。在 Firefox 中，搜索头 div 更大并且超出了包含的范围。这只发生在搜索侧栏 div 中有输入元素时，并且我添加的元素越多，搜索标题 div 就越大。

我是否误解了 max-content 应该如何工作？为什么 Firefox 和 Chrome 在这种情况下表现不同？我该如何解决这个问题？

.search {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 4fr;
  grid-template-rows: max-content auto;
  grid-gap: 10px;
  height: 95vh;
  width: 100%;
  align-self: stretch;
  background: #FFF;
  overflow: hidden;
  margin-top: 5px;
}

.search-sidebar {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background: #CCFFFF;
  padding: …

我有一个像这样整洁的响应式网格：

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

这使得每个网格项目的宽度至少为 200px。其中一项（红色）的宽度是其两倍，如下所示：

grid-column-end: span 2;

到目前为止很棒！

现在，当我调整到较小的宽度时，红色项目会强制网格变为两列。这给了我一个奇怪的小列，即使我指定了最小宽度为 200px。看：

我真的很希望红色项目折叠成一列，这样网格就不会破坏。

然而问题是，我不知道总网格的宽度，所以我无法使用在特定视口大小触发的媒体查询。

有没有办法将红色项目强制到一列，或者以另一种方式定义网格列来解决这个问题？

在我的 React 组件中，我尝试（第一次）使用 css 网格布局。该列应该跨越 2，但实际上只有 1：

   < Value textAlign="right" gridCol={1} gridRow={index + 3} weight={'regular'}>
                <select>
                    <option />
                    <option value="-">Non-recurring income </option>
                    <option value="+">Non-recurring expense</option>
                    <option value="-">Rental Income (new purchase)</option>
                    <option value="+">Rental Expense (new purchase)</option>
                    <option value="+">Discretionary Super</option>
                    <option value="-">Capex</option>
                    <option value="-">Working Capital Adjustments </option>
                </select>
            </Value>

            <Value textAlign="right" gridCol={2} gridRow={index + 3}>
                {adjustment.lastYear}
            </Value>

            <Value textAlign="right" gridCol={3} gridRow={index + 3}>
                {adjustment.currentYear}
            </Value>

            <Value textAlign="right" gridCol={4} gridRow={index + 3}>
                DEL
            </Value>

            <ValueComments textAlign="right" gridRow={index + 4} >
                <textarea>Leave your comments …

在下面的示例中，圆圈适应网格宽度并保持其纵横比。随着容器宽度的缩小，圆圈也随之缩小……

然而，当高度小于宽度时（第二个框），圆圈不会缩小重叠在网格外，而是有没有办法让它在保持纵横比的同时也适应高度？

.container {
	display: grid;
	background-color: greenyellow;
	margin: 5px;
	min-height: 10px;
	min-width: 10px;
}

.portrait {
		max-height: 100px;
		max-width: 200px;
}

.landscape {
		max-height: 200px;
		max-width: 100px;
}

.aspect-ratio {
	grid-column: 1;
	grid-row: 1;
	background-color: deeppink;
	border-radius: 50%;
 align-self: center;
	justify-self: center;
}

<div class="container landscape">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>

<div class="container portrait">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>

结果应如下所示：

我有一排任意宽度的项目。它们在容器内居中（注意红色容器左右两侧的空白）：

有时容器会小于所有项目的宽度：

发生这种情况时，我希望最后的项目像这样包装到下一行：

对我来说非常重要的是每一行的内容必须左对齐，但整个网格必须居中：

最初，我尝试用 FlexBox 实现它。经过很多挫折和头发拉扯，我了解到这在 FlexBox 中是不可能的：https ://stackoverflow.com/a/32811002/901944

同一页面上的另一个答案建议使用 CSS 网格而不是 flexbox。

CSS grid 产生的结果略有不同，但这也适合我：

这是使其工作的代码：

.red-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
  justify-content: center;
}

该代码包含了很多的关键词，我不明白：grid-template-columns，repeat，auto-fit，minmax和max-content。我尝试阅读它们并失败了。没有任何指南和 API 文档明确解释这种特定组合的工作原理。MDN 文档太短而且含糊不清。

我特别纠结的是这个210px神奇的数字。为什么有必要？（呃，我知道这是必要的，因为规范是如何设计的，但这并不能帮助我理解。）

我的网格中项目的大小是任意的，所以我不能使用固定值。此外，设置此固定值会使结果略有偏差：小项目会增长，而大项目会溢出容器。

我本质上想要的是：

  grid-template-columns: repeat(auto-fit, minmax(min-content, max-content));

但该规则被浏览器认为是错误的。

我偶然发现了这个答案，它解释了在这种情况下规范禁止使用两者min-content和max-content一起使用。答案的建议解决方案是……使用 Flexbox！

循环已关闭。我回到了我开始的地方，希望我现在头上的头发又少了一轮。

如何在左对齐每行内容的同时使网格居中，项目具有任意宽度？

为了您的方便，这里有一个样板：https ://jsbin.com/vuguhoj/edit?html,css, output

可以通过拖动右下角来调整容器的大小。

PS 不display: inline，float: left请。 …