标签: css-grid
为什么分页符不适用于 CSS 显示网格？
推荐指数
解决办法
查看次数
如何评估 CSS 网格中大网格区域旁边的一行的 max-content 和 min-content？
根据 MDN 文档（https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows）：
最小内容
是表示占据网格轨道的网格项的最大最小内容贡献的关键字。
所以，在这个例子中：
.grid {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: max-content max-content max-content min-content;
grid-template-areas:
"one aside"
"two aside"
"three aside"
"four aside"
}
.one {
background: red;
grid-area: one;
}
.two {
background: green;
grid-area: two;
}
.three {
background: blue;
grid-area: three;
}
.four {
background: yellow;
grid-area: four;
}
.aside {
background: grey;
grid-area: aside;
}<div class="grid">
<div class="one">
One
</div>
<div class="two">
Two
</div>
<div class="three">
Three
</div>
<div …推荐指数
解决办法
查看次数
浏览器无法将相对单位（百分比）应用到由 fr 设置的空间
问题详情
我写了这样的代码。在这里，形象应该是由保留的空间传播fr，因为width，height和object-fit性质的工作。所以我认为第二个的文字.item会溢出。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
background: red;
gap: 10px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}<div class="container">
<div class="item">
<img src="https://unsplash.it/450/450">
</div>
<div class="item">
<img src="https://unsplash.it/450/450">
text
</div>
</div>在 Firefox 中，这会导致文本用完，
Chrome 并非如此。
此外，将图像包装在div元素中而不是仅在网格项下方将解决该问题。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
background: red;
gap: 10px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
} …推荐指数
解决办法
查看次数
使所有列宽等于最宽列的长度
我试图以这样一种方式使用max-content选项，grid-template-columns即我的所有列都具有网格中最宽单元格的宽度。列数需要保持动态。
现在我有下面的 CSS 和 HTML。您可以看到只有第一列的宽度取决于我的网格中最宽的单元格（单元格 1）。因此，在所需的结果中，所有列都应具有单元格 1 的宽度。有人能告诉我如何获得具有动态列数和列宽的网格，该网格取决于网格中最大的单元格吗？
.container {
width: 400px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(max-content, 100px));
grid-gap: 5px;
}
.item {
background: yellow;
border: 1px solid red;
}<div class="container">
<div class="item">1 I am a very very wide cell</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>推荐指数
解决办法
查看次数
标题周围的有限宽度线
我有一个用 CSS 网格创建的带有线条的标题。我希望线条更小（比如 5%）我怎样才能做到这一点？
HTML 和 CSS
h1 {
display: grid;
grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
align-items: center;
text-align: center;
grid-gap: 20px;
width: 100%;
font-size: 3.4em;
text-transform: uppercase;
color: #000;
}
h1:before,
h1:after {
content: '';
border-top: 2px solid #ff3f3f;
}<h1>Text</h1>推荐指数
解决办法
查看次数
定义 CSS 网格中的行数
我有一个稍微假设的问题：
如果我有一个<ul>, 并且我想使用 css 网格<li>在垂直列表中显示，有没有办法自动执行此操作，以便如果<li>更改的数量，行数会自动增加/减少？
例子：
ul {
display: grid;
grid-template-rows: repeat(NUM, 1fr);
}
<ul>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>
此处NUM指定模板中的行数，但如果我要添加另一个<li>，则必须更改NUM值。
有没有办法识别子元素的数量并相应地自动设置行数？
如果我错过了任何 cdd 网格规范，我假设性地询问， - 我不是在寻找任何黑客，特别是我不是在寻找 javascript 解决方法 - 似乎有点太不灵活了，无法自动执行此操作，我是网格的新手，只是想知道它是如何工作的。
推荐指数
解决办法
查看次数
Why are CSS named grid areas not in quotes?
According to the spec, the value for grid-area is grid-line, which further uses custom-ident. Then MDN states that identifies cannot be put between quotes, which will make it a string value, which by itself is reasonable.
But adding these all up, named grid areas must be accessed via an ID without quotes. See the comparison in the example below:
.grid {
display:grid;
grid: "a b" 1fr "c d" 1fr / 1fr 1fr;
}
.foo {
/* this works …推荐指数
解决办法
查看次数
内联 SVG 仅缩放到 Google Chrome 中的父容器
编辑：适用min-height: 0;于.svg-container修复容器大小，但在 Edge 中，svg 元素会溢出其容器。
我正在尝试将内联 SVG 元素缩放到其父容器的高度。父容器的大小使用 CSS 网格（我也尝试过 flex box）。
通过将元素max-height属性设置为100%. 然而，当在其他浏览器中查看时，SVG 似乎忽略了这个规则。
这些是我尝试过的浏览器：
- 谷歌浏览器：版本 80.0.3987.87（官方版本）（64 位）——这个有效
- Microsoft Edge：44.18362.449.0
- Firefox 开发者版：73.0b12（64 位）
- 火狐：72.0.2（64 位）
这是它在 Google Chrome 中的样子（预期结果）：
这是在 FFDE 中的样子（也在常规 FF 和 Edge 中）：
在body和html元素都具有一个规则height: 100vh;和其他所有孩子大小源自%或fr。
我非常感谢有关如何确保在容器使用 css grid 或 flex 时元素不超过其父容器的 100% 的任何指导，因为到目前为止我在其他线程中找到的解决方案都没有对我有用。
这是一个jsfiddle，下面我将包含代码。感谢您的时间。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body …推荐指数
解决办法
查看次数
CSS Grid 中的“span 1/span 1”是什么意思？
我正在使用 Tailwind 的新 CSS 网格功能。它有Grid Column ，其中span 1/span 1包含 class col-span-1、span 2/ span 2for class等值，col-span-2直到span 12/span 12for class col-span-12。
然而，我无法span 1/ span 1在实践中理解。我能理解1 / span 1。我也能理解，span 1/ 3但似乎无法掌握span 1/ span 1。
推荐指数
解决办法
查看次数
两个等宽的列（宽度由最长的列设置），第三列填充剩余空间
我想制作这样的布局，如果可能，使用 CSS Grid 但对其他可能性持开放态度：
基本上，我想要一个.grid包含 3 个元素（输入、btn1、btn2）的容器。首先，btn1 和 btn2 宽度应该相同，并且由需要更多空间的元素（即更长的内容）决定。之后，剩下的元素（输入）应该拿走剩下的所有东西。我想出了这个片段，但肯定它不能工作。
.grid {
display: grid;
grid-template-columns: auto 1fr 1fr;
}<div class="grid">
<input />
<button>Foo</button>
<button>Bar Bar Bar</button>
</div>仅使用 CSS 实现此目的的好方法是什么？
推荐指数
解决办法
查看次数