CSS Grid Layout是一种允许创建网格的W3C技术。它不需要使用浮动，表格，绝对定位甚至flexbox（另一种CSS3技术）来构建各种网格，从简单到复杂。一般情况下，请勿将此标记用于CSS网格系统。
在下面的测试页面中，我在 中配置了一个网格，其高度与浏览器窗口大小相关。在它的一列中，有一个侧面，本身有一个 1 列、4 行的网格，其中两个......
我让这个表格按照我想要的方式工作，使用网格模板区域，在较小的屏幕上折叠列，但我想知道是否有比我目前拥有的更好的CSS方法？ 感觉...
我正在尝试在移动导航菜单上实现类似计算器的图标布局。 图标应像在手机主屏幕上一样显示，所有列表项均根据需要显示 3 列和行数。 不...
CSS Grid 垂直展开一个元素而不影响 Row 中的其他元素
我一直在使用 CSS 网格来设计不同数量的卡片的样式。每张卡片都有一个手风琴，可以切换以显示更多信息。切换后，它将展开该卡，然后展开...
我想在表格中显示数据，但标签不允许我做我想做的事情。下一个最好的事情是使用网格，但是我无法以适合我的方式设置列的样式。 我的目标是...
我正在尝试得到这个结果： 但我的代码正在这样做： 。容器 { 显示：网格； 网格模板列：1fr 1fr； 网格模板行：自动自动； } 。图像 { 网格行星...
TL;DR：我已经使用开发工具实现了所需的样式，但没有立即将其转移到代码中，现在我无法弄清楚为什么它不起作用。 我正在努力实现以下目标...
我正在使用 CSS 网格，它动态地将单元格横跨整个单元格，如果没有剩余空间，则断行到新行。到目前为止一切顺利（见下文）： .grid-container { 显示：网格； 网格模板-c...
我是网格新手。我尝试将元素放入网格上的其他位置。 我的期望：动态更改元素的“网格区域：名称”会将其放入网格上的另一个位置。 但它并不...
如何使用 flex 或 css-grid 将三个 div 设置为两列？
[作者：抱歉，有人编辑了我的内容并删除了我已经尝试过的内容。我正在寻找 flex 或 css-grid 答案。请不要改变我的文字——改进我的格式就可以了
我尝试设置样式的标记可以在下面以及下面的 CodePen 演示中找到。标记不能更改；只有CSS。我也不想从外部网格继承任何网格样式。
.外网格{ 显示：网格； 网格模板列：重复（3，1fr）； 列间距：24px； 行距：24px； } 。容器 { 内边距：24px； 边框：1px 纯黑； } 。标题 { 字体粗细：b...
如何并排列出所有链接，每个链接最多有两个文本行，如果不可能，则逐行列出它们？
我使用Fresh、TailwindCSS和daisyUI组件来构建一个小高度的页脚，并进行了一些修改： 从“https://deno.land/x/[email protected]/tsx/sphere...
我正在尝试创建一个类似的布局，但是当我尝试创建它时，如果我为网格元素指定高度，则无法正确获得布局。 根据我的理解，网格元素默认拉伸......
网格内具有最小高度的最大高度图像应尊重网格的大小而不是扩展它
我有一个 3 列、2 行的布局，使用最小高度为 90vh 的网格。 左列和右列包含一个图像，该图像应该向中心列对齐，并且它是su...
我尝试创建一个网格系统，其中包含可配置项目来设置位置和大小。 问题是，高度/宽度设置对网格项目没有影响。它们的大小均与 1x1 相同，并且
我尝试创建一个 CSS 网格，该网格将具有特定的列（逐行），我可以在其中添加任意数量的 DIV，这些 DIV 将以特定的顺序添加： [1] [2] [3] [4] [5] [6] [7] [8] [9][10] ETC 但是
如何将一个弹性项目与容器顶部对齐，而其他项目则遵循 justify-content: center？ [重复]
我有一个包含两个项目的网格，第一个项目是一个弹性容器。 html: 锚定到顶部？ 它... 我有一个包含两个项目的网格，第一个项目是一个弹性容器。 html: <div class = "grid"> <div class="flex"> <h1>Anchor To Top?</h1> <div>item</div> <div>item</div> <div>item</div> <div>item</div> <div>item</div> </div> <div class = "other-grid-item"> Other grid item </div> </div> CSS： .grid{ display: grid; grid-template-columns: 1fr 2fr; height: 100vh; } .flex{ display: flex; flex-direction: column; justify-content: center; background-color: blue; } 您可以在此处查看示例：https://jsfiddle.net/tc9kdhb1/3/。有没有办法让 h1 保持位于 flex 容器的顶部，而其他弹性项目位于剩余空间的中心？ 我尝试在 position: absoltute 上使用 h1，但随后该元素不再正确适合容器。预先感谢您的帮助。 如果你方便的话，你可以将其他div包裹在一个父div中并给它flex: 1。 .grid { display: grid; grid-template-columns: 1fr 2fr; height: 100vh; } .flex { display: flex; flex-direction: column; background-color: blue; } .other-grid-item { background-color: yellow; } .content { display: flex; flex-direction: column; justify-content: center; flex: 1; } <div class="grid"> <div class="flex"> <h1>Anchor To Top?</h1> <div class="content"> <div>item</div> <div>item</div> <div>item</div> <div>item</div> <div>item</div> </div> </div> <div class="other-grid-item"> Other grid item </div> </div> 您已经通过代码实现了这一目标；您只是忘记对齐文本。 .grid { display: grid; grid-template-columns: 1fr 2fr; height: 100vh; } .flex { display: flex; flex-direction: column; justify-content: center; background-color: blue; } .item { text-align: center; } <div class="grid"> <div class="flex"> <h1>Anchor To Top?</h1> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> </div> <div class="other-grid-item"> Other grid item </div> </div>
浏览器根据需要呈现以下 HTML 和 CSS，但我的问题仍然是：除了 HTML 中的 ID 之外，网格区域名称不必是唯一的，这是否正确？ 正文 > div { 显示：网格；
我有一个网格容器.grid-container 具有指定的属性 .grid-container { 显示：网格； 高度：500px； //例如 对齐内容：开始； } 容器内麻木...