标签: css-grid
可以将元素强制到隐式网格的最后一行吗？
我有一个动态生成的网格，由于某种原因，它在未知数量的初始行中没有元素。网格容器的所有子级（最后一个除外）都被赋予了它们所属的行。有没有办法保证最后一个元素放在最后一行？有grid-row-start相当于 的grid-column-start: -1吗？
为了扩展这个问题，默认情况下，最后一个元素可能在开头是单独的：
.container {
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: 60px;
}
.normal-child {
background-color: blue;
}
.normal-child:nth-child(2n) {
background-color: red;
}
.normal-child--3 {
grid-row: 3 / span 1;
}
.normal-child--4 {
grid-row: 4 / span 1;
}
.normal-child--5 {
grid-row: 5 / span 1;
}
.last-child {
background-color: green;
} <div class="container">
<div class="normal-child normal-child--3"></div>
<div class="normal-child normal-child--3"></div>
<div class="normal-child normal-child--3"></div>
<div class="normal-child normal-child--4"></div>
<div class="normal-child normal-child--4"></div>
<div class="normal-child normal-child--4"></div>
<div class="normal-child normal-child--5"></div>
<div …推荐指数
解决办法
查看次数
使用百分比作为网格间隙时 CSS 网格高度错误
我正在使用其中包含图像的 CSS 网格，并希望在元素之间设置一个间隙，该间隙随网格的大小而缩放。所以我将其设置grid-gap为 2%，但这样做会导致网格高度错误，并导致网格内容与下面的下一个元素重叠。使用其他单位作为grid-gap，例如 vw 效果很好。
如果我想使用百分比作为间隙，如何解决重叠问题？
这是我遇到的问题的最小重现：
.grid {
display: grid;
grid-template-columns: repeat(2, auto);
grid-gap: 10%;
background-color: #EEE
}
.grid-item {
display: block;
width: 100%;
}<div class="grid">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
</div>
<p>Why does this line overlap with the grid?</p>推荐指数
解决办法
查看次数
CSS 网格中的中心行
我正在创建一个 4x3 网格布局，并希望第二行居中，因为顶行有四个元素。
像这样的东西：
演示代码：
.grid-container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 50% 50%;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
</div>推荐指数
解决办法
查看次数
固定元素的位置而不将其从文档流中删除
我的 HTML 代码中有三个元素。我想将元素固定在右侧，而不将其从文档流中删除。
<div class="container">
<header class="main-header">
</header>
<main class="main-content">
</main>
<footer class="main-footer">
</footer>
</div>
这是我正在使用的CSS代码
.container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto auto;
}
.main-header{
grid-column: 1/2;
grid-row: 1/3;
/* Here i want this to be fixed (scrolling should not have any effect)*/
position: fixed;
}
位置固定将其从文档流中删除，一切看起来都很丑陋。谁能告诉我如何在不使用position:fixed;的情况下实现这一目标？或者不将其从文档流中删除。
推荐指数
解决办法
查看次数
CSS 网格布局内的 Flexbox 具有动态内容
我有一个网格布局，其中的单元格具有动态高度（显示鼠标悬停信息）。我希望网格根据内容的大小扩展行高，并在悬停结束后再次缩小行高。每个单元格中可以有多个项目，并且这些项目应始终完全填充单元格
- 网格的 template-row-height 设置为 auto
- cell内的容器使用flexbox来最大化内容
.grid {
display: grid;
grid-template-columns: 150px 150px 150px 150px;
grid-template-rows: auto auto auto;
margin: 20px;
}
该问题在不同浏览器中看起来有所不同，但总是具有相同的症状。
- 悬停后行高不会再缩小
- 更改单元格的某些样式后（例如在 chrome 开发工具中），布局是固定的。（重新布局发生）
- 在某些情况下，项目/行会随着每次悬停而进一步增长
看起来它至少可以在 Chrome 72 和 Firefox 65.0.1 上正常工作，因此 Safari 是最后一个，但对于移动设备非常重要**
我已经尝试过的
- 我能找到的所有强制回流技巧（JS + CSS），因为我猜测只有回流没有触发
- 从子项中删除/添加各种样式，看看其中之一是否会强制子项在调整大小后保持该大小
- 从单元格中删除/添加元素以查看如何影响行为
起初它引起了 Safari 的大部分问题，我认为这可能是
Safari 尚不支持使用网格属性（例如 grid-template-rows）进行内部和外部大小调整（https://caniuse.com/#feat=css-grid）
然而，这些问题在 Chrome 中不应该出现，并且如果单元格内容没有 100% 高度，则扩展在 Safari 中也可以正常工作
我目前的猜测是，这可能只是相对较新的网格支持中的浏览器错误。因此，我也很感激解决方法的建议。
Safari 中的行为（错误）：
Chrome 中的行为（正确）：
推荐指数
解决办法
查看次数
如何使两列布局具有等高的列和一个可滚动的列？
我想使用 CSS 网格在两列中显示两个区域。但是，左列的高度必须与右列的高度相同。
如果左列高于右列，则左列中的内容应该是可滚动的。
我想要实现的目标：
如果没有以像素为单位的硬编码高度，我就无法做到这一点。仅通过 CSS 可以做到这一点吗？或者我需要使用 JavaScript 重新计算左列高度？
我附上jsFiddle来看看。
https://jsfiddle.net/rafalcypcer/2teonuhy/17/
谢谢，
拉法尔
.gridwrapper {
display: grid;
grid-template-columns: 0.5fr 1.5fr;
grid-auto-rows: 200px;
grid-gap: 10px;
grid-template-rows: auto;
}
.column {
background: green;
}
.dynamic-content {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background: pink;
margin: 20px;
}
.list {
overflow-y: auto;
margin: 20px;
height: 100%;
}
.item {
height: 50px;
background: yellow;
border: 2px solid black;
}<div class="gridwrapper">
<div class="column">
<div class="list">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div> …推荐指数
解决办法
查看次数
CSS 滚动捕捉不适用于 CSS 网格
当将 CSS 滚动捕捉与 Flexbox 结合使用时，捕捉效果很好：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.slider {
font-family: sans-serif;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vw);
scroll-snap-type: x mandatory;
display: flex;
overflow-x: scroll;
}
section {
border-right: 1px solid white;
padding: 1rem;
min-width: 100vw;
height: 100vh;
scroll-snap-align: start;
text-align: center;
position: relative;
}
h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
color: red;
width: 100%;
left: 0;
font-size: calc(1rem + 3vw);
}<div class="slider">
<section>
<h1>Section One</h1>
</section>
<section>
<h1>Section Two</h1>
</section> …推荐指数
解决办法
查看次数
使用“display: grid”使父级扩展到子级的宽度
编辑：不确定这是重复的吗？我不希望背景颜色超出容器的宽度，我希望容器扩展到其display: grid子容器的大小。更新了示例以更好地解释我的问题。
我正在构建一个表，其中每一行都是一个 css 网格。我这样做是为了利用minmax()每个单元格的 ，使整个表格在其单元格不再缩小时可滚动，同时允许表格在有更多可用空间时增长。
除了行的样式仅适用于容器的宽度之外，这种方法工作得很好。
请看这个例子：
.container {
width: 430px;
background: grey;
overflow-x: scroll;
}
.row {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(100px, 1fr);
background: red;
height: 3rem;
margin: 0.5rem;
}
.cell {
border: 1px solid black;
}Scroll to the right inside the box:
<div class="container">
<div class="row">
<span class="cell">cell 1</span>
<span class="cell">cell 2</span>
<span class="cell">cell 3</span>
<span class="cell">cell 4</span>
</div>
<div class="row">
<span class="cell">cell 1</span>
<span class="cell">cell …推荐指数
解决办法
查看次数
网格布局 - 固定列宽和响应式网格间隙
我有一个填充整个水平空间的布局，并且由于网格布局，最后一行中的项目仍然与其他行具有相同的宽度。
现在，当调整屏幕大小时，项目的宽度会发生变化，以便填充整行。是否可以将项目的宽度固定并调整网格间隙？
https://jsfiddle.net/c60ymrfu/
当前CSS：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-auto-rows: 20px;
grid-gap: 5px;
}
当前行为：
期望的行为：
推荐指数
解决办法
查看次数
是否可以通过 grid-template-columns 定义隐藏具有空内容的列？
我有一个包含两列的 CSS 网格。
我可能会也可能不会在第一列内呈现内容。换句话说，列 div 将始终存在，只是有时其中可能没有内容。
当第一列中没有内容时，我不希望该列占用空间，当有内容时，我希望它的最大宽度为100px。
是否可以单独通过 CSS 网格定义来做到这一点？
#container {
display: grid;
grid-template-columns: minmax(auto, 100px) auto;
grid-gap: 5px;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #c0c0c0;
}<div id="container">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div>
Placeat, rerum illo eligendi, hic eum magnam quo architecto necessitatibus sunt sequi repellendus suscipit fuga tenetur atque corrupti modi saepe! Iusto, provident.
</div>
</div>推荐指数
解决办法
查看次数