Css网格没有响应
我正在制作一个具有3列3行的grid一切正常，但它不是responsive我尝试使用media queries，但它看起来像this。 有什么解决方案吗？
1
2
3
..
css-grid相关内容
Css网格行垂直溢出其容器
我希望在页面上有一个网格布局，其中网格延伸到整个视区，并且行具有最小高度。最简单的示例是包含单个单元格的网格(请参阅下面的代码片段)。 我遇到的问题是，当视区的高度小于定义的最小行高时，该行垂直溢出其容器。在下面的示例中添加了红色和绿色边框，可见行的高度不会低于定义的500像素，但网格容器的大小仍然调整为现在小于500像素的视区。 如果我从grid类中删除heightcss属性，容器不
..
Flexbox和网格系统有什么不同？
Flexbox和网格系统有什么不同？我应该在什么情况下使用每个系统？ 推荐答案 网格和Flexbox 的差异 Flexbox最适合一维布局(如行或列) 最适合2D布局(行和列)的CSS网格 Flexbox一维例如： CSS网格2D例如： 网格可以做Flexbox不能做的事情，Flexbox可以做网格不能做的事情。 它们可以协同工作：网格项可以是Flexbox容器。弹性项可
..
Css巨大的网格问题
我正在使用css网格作为时间轴。网格产生了大约1300个div，这对性能非常不利。 我需要让这些单元格中的每一个都可以单击，并在悬停时显示不同的颜色。如果不呈现全部1300个div，我找不到任何方法来设置“空”节点的样式或与它们交互。 我能做些什么？ Pomax AsMike‘推荐答案’Kamerman 建议，最好的方法是检测鼠标点击并动态添加项目。您可以通过为item_w
..
支持IE11的CSS网格布局
我们正在尝试为IE-11开发使用CSS网格的UI布局，这里的问题是我们已经为所有浏览器开发了布局，但还没有在IE11上进行测试，现在我们处于应用程序的最后阶段，并试图使其适用于IE11，但它看起来当前的CSS不适用于IE11，所以决定通过浏览器检测为IE11编写单独的CSS。 这是我的样机(尝试在不更改HTML的情况下进行开发->如果我们更改了HTML，会影响其他浏览器) 我的问题是，如果您
..
Bootstrap 4改变下面列之间的间距，而不是从一边到另一边
我尝试实现的是一个2 div，它占用6列位，它们之间有1px的空格。 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”>
..
Css网格不能在下一行显示数据
我刚刚开始使用网格，在Reaction上制作表格组件。传递头部标题和数据作为道具。我将repeat(auto-fit, minmax(10px, 1fr));设置为适合同一行中的所有标题。现在，当我呈现数据时，它不会转到下一行，所有这些都在一行中。如何解决这个问题？您可以在这里勾选https://codesandbox.io/s/goofy-easley-w5rrg const TableW
..
在瘦小的视区上，HTML标记停止为全宽
我的标记在瘦小的视区上停止占据全宽(即使应用的绿色背景色似乎覆盖了全宽)。这会导致我的1行1列的css网格在水平方向上不居中。在此屏幕截图中，我将鼠标悬停在标记上，而视区很薄： 一旦设备变宽，就会占据整个宽度，内容水平居中。 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> html, body { back
..
2列css中不同列表中元素的高度相同
请帮帮我。我在这里和其他地方搜索与我的案例相同的例子，但没有找到我需要的东西。 我有2列不同的动态列表。 在一栏中，5列列出了元素(标题)，5列出了其他元素(每个元素的描述)。它们可能或多或少是5件以上的物品。但列中的数量列表项总是相同的。 我需要一列中每个元素的高度与另一列中的高度相对应。 你能告诉我怎么做吗，或者显示手册的链接来解决我的问题？ 感谢您的帮助！ 数据-lang=“js”数据-隐
..
为什么css网格区结束坐标偏移？
在此Jsbin example中，网格区域从第1行第1列开始，在第3行第2列结束。 但是，在css中，网格区域的编码如下： grid-area: 1 / 1 / 4 / 3; 虽然起始坐标(例如“1 / 1”)不是偏移量，但第二个坐标是(例如，不是“3 / 2”，而是“4 / 3”)。 第二个坐标偏移而第一个坐标不偏移有什么原因吗？ 以下也是上述JsBin： 中的标记
..
如何在CSS3网格中将一个单元格覆盖到其他两个单元格上
我需要能够将CSS3网格中心单元格中的图像覆盖到其他两个单元格上：一个在网格的右上角，另一个在网格的左下角。如下所示： 所以我想尝试使用网格以某种方式将具有角边界的单元格放在包含图像的中央单元格的下方。我做了一个3x3的网格，放置了相应的边框，到目前为止得到了这个： 这是html和css代码： 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”>
..
将div放置在另一个带有属性显示的div下方：栅格
我尝试使用diplay：grid将一个div放在另一个div之下时遇到了问题。该div被放置在另一个div的上面，而不是下面。 &qot；APP-BM-Payment-Card-Item&qot；是一个自定义角度组件。 HTML文件 //div wrapper
/
..
在css中相同的列宽，其中容器的宽度仅与子项的组合宽度相同。
我基本上认为问题是this one，除了每个答案似乎都认为OP希望容器.row元素增长到有效的width: 100%(他们从未声明他们需要，但也没有纠正任何答案的假设)。This question也似乎与我的相似(如果不是相同的话)，但没有被接受的答案，向上投票的答案对我不起作用。 我正在尝试在行中实现同级元素，其中每个同级元素的宽度是最宽同级元素的宽度(自动适应其内容)，但至关重要的是，父
..
Css内联网格：最宽元素的宽度设置同级元素的宽度
我尝试使用display:inline-grid;的逻辑将兄弟div的最小宽度设置为最宽元素。根据Width of widest element sets width of all siblings in the row如果只是使用内联网格，那么最宽的元素应该是所有元素的宽度。这里有一个例子。 看起来他们只是在拉长项目？我想要的行为是绿卡的宽度与最长的卡(人均卡)相同。如果我使用justif
..
使用CSS网格获得堆叠的div以贴近底部
在下面的布局中，当我将鼠标悬停在上时，我试图使内容在整个框中保持底部对齐，以便单词和副标题保持在它们所在的位置，而显示的
仅位于其顶部。我正在尽我所能地处理CSS网格--但我不知所措。 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> .programbox { display: grid; grid-template-areas: 'it
..
如何在网格显示中为每行添加支撑线
我正在创建一个元素，它显示一组任意的图标，就像字符串上的珠子一样。到目前为止，我已经用网格显示了图标的排列，如下所示(出于演示目的，将图标替换为正方形)： 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> body { width: 90%; max-width: 300px; margin: 2em auto; font: .9em/1
..
在栅格布局内插入全宽块
我正在创建Google Images不久前拥有的页面布局。在所选图像下有一个大的带有完整部分的图像网格。我很好奇是否可以使用cssdisaply: grid属性来标记此页面。 一开始我做了一个有三个柱子的容器。一切都很好： 数据-lang=“js”数据-隐藏=“假”数据-控制台=“假”数据-巴贝尔=“假”> .container { display: grid; grid
..
能不能用`grid-模板-areas`去掉网格中空行的高度？
我有一个包含八张(或更少)卡的网格。我希望卡片被自动放置在网格中，而不是知道它们的宽度和高度。也就是说，宽度和高度应该在网格样式中指定。当我展示所有8张卡片时，它工作得很好。示例： grid-template-areas: 'card-1 card-1 card-2' 'card-3 card-4 card-5' 'card-3 card-6 card-5'
..
Css网格列可以考虑跨多列的项的最小宽度吗？
采用以下网格： .grid { display: grid; grid-template-columns: [one] minmax(auto, 1fr) [two] minmax(auto, 1fr); } .item { grid-column: one; min-width: 3rem; }
..
在css网格中，最大内容和最小内容在一个大的网格区域之外是如何计算的？
根据MDN单据(https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)： 最小内容 是表示占据网格轨道的网格项的最大最小内容贡献的关键字。 因此，在此示例中： 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> .grid { display: gri
..