最大高度在CSS网格元素中不起作用的问题
编辑：正如@Onkar-ruikar下面解释的那样，我对我的问题有相当大的误解。我仍然不知道如何以一种对我真正有效的方式处理循环依赖的后果，但我必须在这里完全重写我的问题，所以我将这两个问题作为单独的问题处理，将这个标记为已解决并询问后续问题：Dealing with cyclic dependencies of percentage sized boxes css (specifically h
..
css-grid相关内容
使用CSS网格的等宽侧栏列
可以让左列和右列具有相同的宽度，而中间的列占用剩余空间吗？我不想像grid-template-columns: 20% 60% 20%那样设置百分比，因为这些列的内容并不总是确定的。 Flexbox和Tables似乎没有解决此问题的方法，所以我再次尝试使用网格分数，但没有成功。 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> .grid {
..
在Flexbox中时，CSS网格不会增长
我对css网格的理解是，它将增长以填充其父对象，但是当父对象的大小由FlexBox控制时，这似乎不能正常工作。 在this example中，我预计淡蓝色网格项会增长到覆盖红色区域。如果网格是独立的，这将正确工作，但一旦将其放置到Flex元素中(即使使用flex-grow: 1)，它就完全不会增长； 这里发生了什么，有什么方法可以将样式调整为我预期的行为吗？ 编码： 布局
..
栅格-列-间隙导致溢出
我刚刚测试了CSSdisplay: grid。它工作得很好，但grid-column-gap: 10px;破坏了父容器。下面代码中的绿色区域比网格区域小。 box-sizing: border-box;显然没有效果。 如何使网格区域和父容器的宽度相等？ 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> /* -----------------
..
如何在奇数行和偶数行之间交替使用子数？
我搜索了一下，但使用css Flexbox时，当我想要显示奇数行的3项和偶数行的2项时，出现了问题。 我的想法是这样的： 我尝试使用某种nth-child选择器，但这不是完整的解决方案。 推荐答案 重复模式需要从第n个子元素(5N)开始，加上负值可以使其在前五个元素之前开始，这样您就可以将其调整为连续前三个元素。 可能的示例： 弹性 数据-lang=“js”数
..
创建CSS网格布局
我需要使用下图中的CSS网格创建一个布局，分辨率高于900px：- 对于900px以下的分辨率，我需要布局如下 到目前为止，我已经尝试过了：- .container { display: grid; grid-template-columns: 250px auto 250px; grid-column-gap: 1rem; } 上面的代码创建了图像1，但
..
非矩形CSS网格元素
假设我想在一个css网格布局中使用自动密集打包。有没有办法引入非矩形区域配置？例如，覆盖一行中的两列而下一行中仅一列的L型区域。我已尝试显式命名网格单元格，但不起作用。 推荐答案 不支持非矩形网格项目。来自spec： 每个网格项都与网格区域相关联，网格区域是网格项占据的一组相邻网格单元的矩形集合。 And： 注意：此模块的未来版本可能允许使用非矩形或断开连接的区域。
..
如何工作的css网格-自动排版？
我面对的问题是，我不了解隐式网格是如何工作的。我阅读了文档、MDN和其他一些资源。但还有一个问题尚未解决。 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> .grid { display: grid; grid-template: repeat(2, 100px) / repeat(6, 1fr); grid-gap: 1rem;
..
如何在3栏布局中使用固定宽度居中的栏？
我想要将红色框放到条带的中间，并且只需要10厘米宽。左边和右边的内容应该是作为附加的图像。表示左侧容器应与左侧内容对齐，右侧内容应与右侧对齐。 我的HTML：
Left Contents with align left...
..
CSS网格与动态定义列表自动放置
免责声明：根据spec，可以将dt + dd对包装成div，这将允许我使用float和clear、Flexbox甚至是CSS网格来简单地解决我的问题。 也有像this这样的替代方法，它将每组2个dt + dd对包装到单独的ul标记中。这也是可行的，尽管它在语义上不是100%准确。 现在我真正想做的就是使用css网格找到问题的解决方案，而不是求助于上述任何一种技术。 我的HTML中有以
..
在父div内对角线排列2个div
我正在尝试将两个div安排在父div中，这样看起来父div就像是被对角分成了两部分。下图将显示所需内容 这是我尝试过的代码。 App.js import React, { Component } from "react"; import "./App.css"; class InnerMainDiv extends Component { constructor() {
..
如何定位css网格中的最后一列？
使用grid-areas时，元素可能会更改顺序。这将导致视觉:last-child改变。是否有针对网格中最后一列的css选择器？类似于:last-grid-column。 我正在努力解决的问题。我喜欢用边界线把柱子分开。但是，我不希望最后一栏有边框，因为这在视觉上没有意义。现在，如果我以:last-child为目标，它将一直起作用，直到我将grid-template-areas的顺序更改为类
..
如何在灵活的布局中拥有固定元素(如浮动：Right)？
我有一个带有元素的灵活布局。我希望其中一个始终位于右上角。 当我把它放出容器(下面是蓝色的)时，它适用于基本的情况，但在我的最后一个例子中，我希望5个盒子在固定的盒子下面。我怎样才能做到这一点呢？也许可以用网格？我从来没有用过它们。 另一种方法是说该元素的空间应该由flex元素保留/不使用。这样，我可以用position: absolute;将固定的元素放在那里 推荐答案 css网格可
..
如何使CSS网格中的图像在缺少空间时并排放置并跳到另一行
我正在尝试使用CSS网格以图片中所示的方式放置图像，但找不到正确的解决方案。 现在我只是简单地将网格流动更改为列，但网格元素在遇到容器的末尾时不会跳到另一行-它们会调整容器的大小并保持在相同的第一行。 我尝试使用grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))-它解决了跳转到另一行的问题，但它为所有元素提供了固定的宽
..
在2栏布局中采用2栏，但在没有@media的CSS网格中的1栏布局中不采用
所需的宽屏布局： 窄屏幕的所需布局： 初始css： .Layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 24px 40px; } 如果我为第三个元素设置grid-column-start: span 2，布局将被简单地破坏(它
..
为什么分页符可以与css显示网格一起使用？
我正在使用css网格布局制作一个HTML文档，然后我想要打印它。 问题是，当我打印文档时，一些元素会溢出到下一个元素。所以我将page-break-inside添加到我的网格元素中，但它不会改变任何东西。一个页面中的元素仍然会溢出到另一个页面。page-break-inside在没有display:grid时运行良好，但使用display:grid时不起作用。这里有两个示例with grid
..
CSS3网格布局：特定元素后的新行-可能吗？
我有一个按日期排序的项目列表。 有些物品是未来的(绿色物品)，因此更有趣的是，有些是过去的(棕色物品)。我希望第二组项目从新的一行开始。 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> .grid{ width: 120px; display:grid; grid-template-columns: repeat(3,1fr);
..
使用弹性基础的css网格？
我当前正在做的 grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); 但我希望当视窗小于400px时，容器应调整大小以适应视窗... 或者我如何将基于Flex的属性实现到网格...其中，最小值应为0px，但容器应从400px开始，然后增长到1FR 推荐答案 您可以将您所拥有的与min()和100vw组合在一
..
为什么在网格模板区域中没有网格区域名称会创建额外的轨迹？
我已经创建了一个简单的CSS网格，我决定不指定grid-template、grid-template-columns、grid-template-rows属性。 相反，我从grid-template-areas开始，并通过grid-area属性将区域名称分配给网格项目。 之后，我对从grid-template-areas中删除网格项会发生什么感兴趣。结果有点奇怪。 删除的网格项放
..
如何在使用css网格时居中显示内容，并使背景覆盖整栏？
当我添加此代码时： place-items: center; 我的元素居中，但只有文本应用了背景色。 当我删除此代码时： place-items: center; 背景色覆盖整列，但文本不再居中。 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> main { display: grid; grid-template-c
..