标签: css-grid
有没有办法对 CSS 网格中的项目流进行蛇行/排队？
默认行为：
|A|B|C|D|
|E|F|G|H|
|I|J|K|L|
期望的行为：
|A|B|C|D|
|H|G|F|E|
|I|J|K|L|
我已经研究了该grid-auto-flow属性以及该direction属性，但如果不求助于 javascript，似乎没有解决方法。有没有办法用 CSS 来实现这一点？
推荐指数
解决办法
查看次数
CSS Grid 将高度和宽度拉伸到容器
我无法让 CSS 网格在高度和宽度上拉伸到其父级尺寸。当设置为 100% 时，宽度会很好地拉伸，但高度会保持其初始大小？我不确定高度尺寸是在哪里计算的。
当将所有行的 grid-template-rows 设置为 25% 时，我认为这会给我所需的 100% 高度，但它不起作用。
body {
margin: 10px;
background-color: red;
height: 100%;
}
.wrapper {
display: grid;
grid-gap: 1px;
background-color: #fff;
color: #444;
grid-template-rows: 25% 25% 25% 25%;
grid-template-columns: auto auto auto auto;
grid-template-areas:
"a b c d"
"e f f g"
"h f f i"
"j k l m";
height: 100%;
width: 100%;
}
.box {
background-color: #444;
color: #fff;
padding: 20px;
font-size: 150%;
}
.a {
grid-area: a;
} …推荐指数
解决办法
查看次数
让 CSS 网格区域在移动设备上堆叠（单列布局）
我试图让 CSS 网格块在小屏幕上查看时彼此堆叠。我知道我可以编写媒体查询将两列更改为一列。但我认为网格可以在没有它们的情况下处理这个问题？
我想我可以通过自动调整列来实现这一点。但是，我想我可能误解了这是如何工作的？
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-template-rows: 1fr 1fr;
grid-template-areas: "leftCol rightTop" "leftCol rightBottom";
height: 100vh;
}
.leftCol {
grid-area: leftCol;
background-color: pink;
width: 100%;
height: 100;
}
.rightBottom {
grid-area: rightBottom;
background-color: yellow;
width: 100%;
height: 100;
}
.rightTop {
grid-area: rightTop;
background-color: blue;
width: 100%;
height: 100;
}<div class="grid-container">
<div class="leftCol"></div>
<div class="rightBottom"></div>
<div class="rightTop"></div>
</div>当屏幕低于 400 像素时，右侧栏就会消失。我原以为它们会叠在一起。
例如：
推荐指数
解决办法
查看次数
How to make a grid container shrink to fit the content?
I'm trying to make a game with a grid. I have x divs with x divs inside them, to create the grid.
The problem is that I want the container div for all of this to only be as big as it needs to be (say, 5x5 squares at 25px each = 125px x 125px container div). The height is fine, but the width stretches to the end. Each box is to be 25px.
I've tried grid-template-rows: repeat(auto-fill, 25px) which …
推荐指数
解决办法
查看次数
在 CSS 网格中重复两行模式
我想模仿这种模式（一遍又一遍）：
所以我写grid-template-columns: 65% 35%了第一行。然而，我想 grid-template-columns: 65% 35%对第二行（以及第四行、第六行等）执行此操作，但我不确定如何在保持65%和 的同时做到这一点35%。
#parent {
display: grid;
grid-template-columns: 60% 40%;
grid-gap: 24px;
}
.child {
height: 50px;
background-color: #DDD;
}<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>推荐指数
解决办法
查看次数
如何给CSS网格元素添加边框半径
https://codepen.io/siddagra/pen/vYBoJyM
我想为五个紫色+灰色盒子中的每一个添加边框半径，理想情况下不添加任何 html 样式，因为盒子本身内的 div 元素的排列可能会受到影响改变。请帮忙，我尝试过：第一个孩子和第二个孩子选择器，但这不起作用。
.ExpandedSetPiece:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.ExpandedSetPiece:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
推荐指数
解决办法
查看次数
CSS 网格，数据按行分组
在过去的几个小时里我一直在进行display: grid测试，但还没有找到如何将数据按行分组的有效示例（这似乎是一个非常常见的用例）。我正在尝试用 CSS 网格替换表格布局，但无法完全破解它。
考虑这个 HTML：
<div class="wrapper">
<div class="row">
<div class="col1">Short Data</div>
<div class="col2">Very Much Longer Data</div>
</div>
<div class="row">
<div class="col1">Short Data</div>
<div class="col2">Regular Data</div>
</div>
</div>
还有这个CSS：
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}
上面的 CSS 只会影响行，但不会布局列。如果我在每行内嵌套另一个网格，则数据点没有关系，并且不会一致扩展（直到subgrid）。
这对我来说很重要有几个原因：
- 我希望每一行都是一个 React 组件，它需要一个外部包装标签。
- 我正在循环一个未知长度的数据集，React
key在每次迭代时都需要 a 。 - 我想创建按行响应的斑马条纹或悬停事件。
- 我的强迫症不喜欢所有的孩子都住在彼此旁边而不进行某种分组。
我应该只使用good-ol 表吗？
推荐指数
解决办法
查看次数
CSS 网格：分数中的分数
我正在构建一个仪表板并想使用 CSS 网格。我设置了 4 列网格。在第 3 行中，我需要其中 2 个项目跨越 1.5 列。
如何使 D 和 E 的宽度相等，以便它们各自占据可用空间的一半，并且它们加起来等于 C 的宽度？我需要创建不同的列结构吗？ 代码笔
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 5px;
grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [col4-start] 1fr [col4-end];
grid-template-rows: [row1-start] .75fr [row2-start] 2fr [row3-start] 4fr [row4-start] 1fr [row5-start] 1fr [row6-start] 1fr [row6-end];
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.a {
grid-column: col1-start / col4-start;
grid-row: row1-start …推荐指数
解决办法
查看次数
CSS 网格装订线导致列溢出，如何强制列宽一致
我正在尝试创建一个相当简单的 12 列 CSS 网格框架并允许嵌套网格。
.grid {
grid-template-columns: repeat($grid-column-count, minmax(0, 1fr));
column-gap: 2rem;
}
我目前遇到的问题是，当增加装订线宽度时，无论其中有什么内容，小数列都会被推出嵌套网格容器。
我尝试在声明列时将 minmax 值设置为 0，但它仍然坚持扩展。我知道这是因为装订线的宽度加起来超过了内容，但是有没有办法在不使用溢出属性的情况下强制它下降？
列被装订线和/或内容推动：
...当列应该容纳装订线时：
.grid {
grid-template-columns: repeat($grid-column-count, minmax(0, 1fr));
column-gap: 2rem;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
display: grid;
grid-template-columns: [left-gutter-start] auto [left-gutter-end] minmax(0, 960px) [main-content-end] auto [right-gutter-end];
overflow-wrap: break-word;
}
.container>.grid {
grid-column-start: left-gutter-end;
grid-column-end: main-content-end;
}
.container>.grid.grid-breakout {
grid-column-start: left-gutter-start;
grid-column-end: right-gutter-end;
}
.grid {
width: 100%;
display: grid;
grid-template-columns: …推荐指数
解决办法
查看次数
CSS 网格使用特定项目高度作为最大行高
我试图防止侧边栏高度超过内容高度。
“区域”将包含任意高度的图像，因此其高度不是固定的或预先已知的。
function toggleTabsContent() {
const display = document.querySelector('.content').style.display;
if (display == "none") {
document.querySelector('.content').style.display = "block";
} else {
document.querySelector('.content').style.display = "none";
}
}.grid {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 1fr auto;
grid-template-areas:
"tabs area"
"footer footer";
}
.tabs {
grid-area: tabs;
background: #FF9800;
}
.area {
grid-area: area;
height: 200px;
background: #673AB7;
}
.footer {
grid-area: footer;
background: #607D8B;
height: 40px;
}
.content {
height: 250px;
}<button onclick="toggleTabsContent()">Make tabs taller/shorter</button>
<div class="grid">
<div class="tabs">
<div …推荐指数
解决办法
查看次数