CSS Grid Layout是一种允许创建网格的W3C技术。它不需要使用浮动，表格，绝对定位甚至flexbox（另一种CSS3技术）来构建各种网格，从简单到复杂。一般情况下，请勿将此标记用于CSS网格系统。
请看图片。调整后的图像 2 我试图使每个部分大小相同（像“h1”框一样的正方形）但似乎每个框中的文本内容都影响了这个并且...
我有一个 100% 宽度和高度的根容器。根容器是 overflow-x:scroll。 在根容器内是另一个容器，它有 n 个固定宽度的元素。内容...
是否可以使用 CSS 选择特定的网格列或行？ 例如，假设我有一个 3 行 2 列的 CSS 网格布局：grid-template-rows: 1fr 1fr 1fr;网格模板列：1fr 1fr；。怎么...
我想在 CSS 中创建一个网格，默认情况下有 2 列，但如果宽度不够，请将所有元素合并为 1 列。我怎样才能做到这一点？ 目前我的 2 列的宽度是
我希望使用 CSS Grid 来反转两个并排 div 的明显顺序，其中一个 div 任意增长（我不想使用浮动）。 我在这里创建了一个 plunkr：http://plnk...
我希望能够颠倒列的顺序（两个小的在左边，大的在右边）。我尝试了几种解决方案，但没有找到一种可行的方法。 这是代码： ....
我有一个 css 网格，我希望最后一行占据所有可用的垂直空间 我代码段的 .main-content 区域中的 .r3 应该占据剩余空间。我怎样才能做到这一点？ 在
我只能使用以下属性显示、网格模板列、网格模板行和网格列属性来创建具有 3 列和 3 行的网格。 三号街区不走......
我有这个 CSS 网格，我想以棋盘图案交替网格颜色。这是 HTML/CSS： 我有这个 CSS 网格，我想以棋盘图案交替网格颜色。这是 HTML/CSS： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Snake</title> <style> body { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; margin: 0; background-color: #578a34 } #game-board { background-color: #aad751; width: 100vmin; height: 100vmin; display: grid; grid-template-rows: repeat(21, 1fr); grid-template-columns: repeat(21, 1fr); } .dark-tile { background-color: #a2d149; } .light-tile { background-color: #aad751; } .snake { background-color: #4e7cf6; } .food { background-color: #e7471d; } </style> <script src="game.js" defer type="module"></script> </head> <body> <div id="game-board"> <div style="grid-row-start: 11; grid-column-start: 11;" class="snake"></div> <div style="grid-row-start: 7; grid-column-start: 14;" class="food"></div> </div> </body> </html> 更新：我设法做了一些棋盘图案： 然而，它在食物和蛇所在的地方变得一团糟。我怀疑这是由于.appendChild(tile)。这是绘制棋盘的代码： export function draw(gameBoard) { for (let j = 0; j < GRID_SIZE+1; j++){ for (let i = 0; i < GRID_SIZE+1; i++){ if (Math.abs(i % 2) == 1){ const tile = document.createElement('div') tile.classList.add('dark-tile') gameBoard.appendChild(tile) } else { const tile = document.createElement('div') tile.classList.add('light-tile') gameBoard.appendChild(tile) } } } } 任何帮助将不胜感激！
我需要使用这个特定的网格模板显示产品列表（shopify，但问题是关于 CSS） 我需要在较大的单元格旁边显示“流动”的产品
https://www.w3.org/TR/css-display-3/#propdef-display 内部显示类型，它定义（如果它是一个非替换元素）它生成的格式化上下文的类型，规定如何 它的起源...
https://www.w3.org/TR/css-display-3/#propdef-display 内部显示类型，它定义（如果它是一个非替换元素）它生成的格式化上下文的类型，规定如何 它的起源...
什么是外显型？ - Flow Layout 中有 flex 容器和 grid 容器吗？
https://www.w3.org/TR/css-display-3/#outer-display-type 内部显示类型，它定义（如果它是一个非替换元素）它生成的格式化上下文的类型，规定如何 它的
https://www.w3.org/TR/css-display-3/#outer-display-type 内部显示类型，它定义（如果它是一个非替换元素）它生成的格式化上下文的类型，规定如何 它的
为什么 grid-auto-flow:dense 在 CSS 中不起作用
我创建了一个图片库。但是当我想密度所有的盒子时，它不起作用。 为什么 ？ 我的风格 ： 。容器 { 显示：网格； grid-template-columns: repeat(auto-fit, minmax(150p...
考虑这两个例子： https://jsfiddle.net/obechtel/n8o056ja/2/ https://jsfiddle.net/obechtel/049ng6qc/1/ 在第一个示例中，列宽声明为 50% 50%，在第二个示例中...
我有一个响应式网格，其中每个项目都有自己的详细信息部分，默认情况下是隐藏的。单击该项目会将一个类添加到详细信息部分以显示它。 HTML/CSS 看起来大概 l...
如何指定网格布局 div 中的列的最大宽度应等于网格 div 的父级的 100%
这个问题是对以下内容的跟进： 如何指定网格布局 div 中的列的宽度应等于网格 div 父级的 100% 要求已修改，使得
我正在开发一个导航栏，它有两个元素。左侧是徽标，右侧是操作列表（此元素具有动态数量的元素）。 当它们可以排成一排时，我想要...