我有一个由两个元素组成的网格，一个图像和一些文本。
.card {
width: 100%;
display: grid;
grid-template-columns: 60% 40%;
grid-template-rows: 50vw;
grid-template-areas:
"a b"
}
.card-text {
grid-area: a;
background-color: #02B277;
}
.card-text p {
width: 70%;
margin: auto;
top: 10rem;
font-weight: 500;
}
.image {
background: url('img/placeholder.jpg');
background-size: cover;
grid-area: b;
}<div class="card">
<div class="card-text">
<p>Lorem ipsum blablabla</p>
</div>
<div class="image">
</div>
</div>当窗口水平缩小时，具有固定 的文本font-size会自动垂直扩展，溢出 div。如何使网格模板行展开以包围文本？我已经尝试将其设置为，auto但它只是遵循图像的比例。
我对 Material-UI Table 组件及其大小和可滚动性有疑问。
如果 Material-UI 表格组件的父组件具有固定大小，则该组件只能滚动。如果我将大小设置为 100% 适合父级，则会溢出。
我在 Reactjs 中有一个简单的 Web 应用程序，它由标题、正文（表格所在的位置）和页脚组成。我的应用程序组件的样式被设计为分布这三个基本布局组件，如下所示：
const useStyles = makeStyles((theme) => ({
root: {
height: "100vh",
maxHeight: "100vh",
display: "grid",
gridTemplateRows: "auto 1fr auto",
},
}));
效果很好。我的身体组件占据了所有可用空间来填充整个视口。该组件如下所示：
<div className={classes.root}>
<Controls /> //just some buttons, arranged in one line
<Table /> //my table component, which uses pagination
</div>
该表本身使用分页，并且默认每页 10 行。
它的 CSS 看起来像这样：
root: {
maxHeight: "100%",
display: "grid",
gridTemplateRows: "min-content 1fr",
gap: "25px",
},
表组件本身如下所示：
<div className={classes.root}>
{loading ? …我的网格中有 3 列。
我希望他们的行为是这样的：
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
如本代码笔所示：https ://codepen.io/chriscoyier/pen/xBmYJN
但我希望每行只有 3 列，最后一列为 3fr（其他 2 列大小的 3 倍），即“1fr 1fr 3fr”。我希望最后一列在满足其最小宽度时自动转到新行。
使用上面的示例时，当列不适合时，它们会自动折叠到新行。对于我的情况有办法做到这一点吗？无需手动配置网格模板区域并根据@media屏幕宽度调整它们？
我假设该功能来自重复（）的自动填充参数...
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 1rem;
}
.grid>div {
background: #EDE7F6;
padding: 1.5rem;
border-radius: 1rem;
}
body {
margin: 2rem;
font: 12px system-ui;
}到目前为止，我使用 Mads Kristensen 的 Web 编译器，但现在我在编译新的 sass 命令（如 @use）或使用一些 css 计算（如）时遇到问题
grid-template-columns:repeat(auto-fill,minmax(max(200px,(100% - (var(--n) - 1)*10px)/var(--n)),1fr));
我发现了 sass 的新实现：Dart Sass 但没有找到任何扩展来在 Visual Studio 中管理它，只有一些用于 Visual Studio 代码
Web 编译器上次更新是在 2018 年
我也尝试Sass 编译器，但得到相同的编译错误：
200px,(100% - (var(--n) - 1)*10px)/var(--n) 不是正确的 max 值
即使它是纯粹的工作CSS，也许它太新并且编译器无法识别它
目前唯一的方法是将该规则放入纯 css 文件中，并将其与 sass 生成的 css 一起导入，但这似乎不是一个好的解决方案
我正在尝试使用 CSS 网格布局构建一个表单。标签显示在左列中，输入显示在右列中。该align-items属性设置为baseline。在 Chrome 中，标签和输入的文本在其基线上垂直对齐。但在 Firefox v94 中，标签的位置高于输入中的文本。
这是该问题的最小可重现示例：
<!DOCTYPE html>
<html>
<head>
<style>
.login-grid {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 10px 2px;
align-items: baseline;
}
label, input {
font-size: 3em;
}
</style>
</head>
<body>
<div class="login-grid">
<label>username</label>
<input type="text">
</div>
</body>
</html>
此示例已在Codepen上发布。
当我将输入包装在 a 中时div，文本确实跨列对齐。我不想这样做，因为嵌套会影响尺寸。
我已经检查了许多关于对齐问题的其他帖子，但我没有找到与 CSS 网格相关的帖子。
我设法将一个元素的 with 调整为 100 的倍数。
:root{--unit:100px;}
.grid{
display:grid;
gap:0;
grid-template-columns: repeat( auto-fill, var(--unit) );
}
.grid-content { outline:4px solid #ccc; grid-column: 1 / -2; }
我怎样才能在垂直方向（元素高度）获得相同的效果。它不必是网格，它可以是任何东西，只要不是 JS 即可。这是笔： https: //codepen.io/szopos/pen/ZEXBWrg
我有一个 CSS grid，有时并非所有元素都被使用。在实际用例中，我使用的是grid输入小部件，其中可能有额外的帮助文本或错误放入特定的grid-area. 我遇到的问题是grid-gap，如果该行为空，它仍然应用间隙。这会导致底部出现双行间隙。有没有办法禁止显示空行之间的间隙？
我一直面临这个问题，它使得网格间隙对我来说无法使用，所以通常我不使用网格间隙，而是使用更复杂的边距设置。
.parent {
background: gray;
padding: 16px;
margin: 16px;
display: grid;
grid-template-columns: 64px 128px;
grid-template-areas:
"childa childb"
"childc childd"
"childe childf";
grid-gap: 16px;
}
[class^="child"] {
background-color: red;
}
.childa { grid-area: childa }
.childb { grid-area: childb }
.childc { grid-area: childc }
.childd { grid-area: childd }
.childe { grid-area: childe }
.childf { grid-area: childf }<p>Grid gap is okay if all cells filled:</p>
<div class="parent"> …我试图仅显示 CSS 网格的前两行。
\n容器的宽度未知，因此它应该具有响应能力。
\n每个盒子的内容也未知。
我当前的 hacky 解决方案是定义以下两个规则：
\ngrid-auto-rows: auto auto 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 …
我想设置一个 CSS 布局，其中容器包含固定数量的具有以下属性的灵活宽度图块：
也许纯 CSS 是不可能的，但感觉应该可以！下面有一个最小的例子，我将在这里详细说明：
https://jsfiddle.net/vztskh6f/1/
这似乎是最好的选择，因为我们总是希望图块宽度保持一致。为了使列换行，我相信您需要使用repeat()语法，并且repeat(auto-fit, ...)似乎最适合此用例。显而易见的解决方案似乎是使用repeat(auto-fit, minmax(100px, 200px)). 然而，这不起作用，200px无论容器的宽度如何，瓷砖总是保持在原处。在所有其他方面，这都按预期运行：
.gridContainer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
padding: 10px;
gap: 10px;
justify-items: center;
justify-content: center;
}
.child {
width: 100%;
height: 30px;
background: #0f0;
text-align: center;
}
可以使用选项 1 来强制执行所需的规范，方法是使用grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))然后在容器上设置计算值max-width并强制其居中，但感觉单独使用 CSS Grid 应该可以实现这一点？
使用 Flexbox 实现包裹要简单得多，并且flex在子项上使用意味着我们可以轻松设置具有最小和最大宽度的灵活图块。然而，一旦子元素换行到第二行，它显然会扩展到其最大宽度，并且与其他图块不一致：
.flexContainer …此代码片段包含一个响应式网格。当您更改屏幕宽度时，列数会自动变化。有时列数为偶数，有时为奇数。当列数为奇数时，单元格会像棋盘一样交替颜色，但当列数为偶数时，它们不会交替颜色。有什么方法可以实现偶数列和奇数列的棋盘效果吗？它需要 Javascript，还是可以单独使用 CSS 来完成？
body {
margin: 0;
}
.checkers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
padding: 1em;
gap: 1em;
}
.checkers>div {
background-color: red;
aspect-ratio: 1/1;
}
.checkers>div:nth-child(even) {
background-color: blue;
}<div class="checkers">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>