问题标签 [css-grid]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - 使弹性项目包装在列方向容器中
因此，要使用行布局将元素包装在 flex div 中，我所要做的就是：
这适用于我的行，但我想让它也适用于我的列。
我尝试只是更改flex-direction为column，但它似乎不起作用。有谁知道如何获得这个功能？
html - 在 CSS 网格布局中为每一列添加滚动
我想在我的网格布局中的每一列上单独滚动。
目前，我正在开发一个仅限移动设备的 Web 应用程序。我想为纵向和横向使用不同的网格布局。
纵向只有 1 列，每个元素一个接一个。这里没问题。
在横向我想使用 2 列。我的全部内容显示在左侧，我的导航移动到右侧。现在我希望这两个部分都有一个单独的卷轴。有没有办法实现这个？如果当前列的内容结束，滚动应该停止。
CodePen 上的代码：https ://codepen.io/SuddenlyRust/pen/rmJOqV
非常感谢您的宝贵时间！
css - 弹性项目可以包装在具有动态高度的容器中吗？
我有一个弹性盒子问题。谁能指出我正确的方向？甚至可能 flex-box 无法解决这种情况，因为它的工作方式。
我想跨 4 列显示内容。
让内容以柱状格式列出，并在空间不足时换行到下一列。
应该注意这一点。
但这就是事情变得棘手的地方。如果我不想要一个固定的高度，而是一个根据内容的长度增长/缩小的高度怎么办？
让容器的高度是动态的。与案例 B 一样，行数从案例 A 中的 4 行增加到 7 行。内容被设置为尽可能填充所有列。
css - 使用 flexbox（或其他 CSS）创建 Masonry 网格
我想在 CSS 中实现网格效果，元素的宽度都相同，但高度不同。我希望下面的元素始终位于底部元素的 50px 处，无论接下来是什么。
我试过用花车，但那个错误。所以我尝试使用 Flex，但它仍然没有达到我想要的效果。
我想要什么：
我有的：
css - 在 CSS 网格布局中使用 CSS 过渡
我正在尝试让我的粘性标题具有过渡效果，因此它可以缓和而不仅仅是快速移动。
我究竟做错了什么？
这是我的工作版本：
http://codepen.io/juanmata/pen/RVMbmr
基本上，下面的代码将类 tiny 添加到我的包装类中，这很好。
这是CSS部分：
所以标题确实缩小了，但没有动画，我错过了什么还是过渡根本不适用于网格？
这是 css-grid 文档的链接。
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
css - 带有 CSS 网格的砌体布局
我正在尝试使用 css 网格布局创建砌体布局。网格中的所有项目都有可变高度。而且我不知道会是什么项目。所以我不能grid-row为每个项目定义。是否可以在列中上一个结束后立即开始每个新项目？
我正在尝试的代码：
html - 使弹性项目重叠
我想展示一系列未知数量的扑克牌。为此，如果太多，它们将不得不重叠。我无法说服弹性盒在不缩小卡片的情况下重叠卡片。下面的例子缩小了卡片。我试过了flex-shrink: 0，但max-width没有得到尊重。
css - 计算 fr 单位的实际长度
我在这里问是因为我数学很烂。
假设网格大小为 1920 像素，并且我没有使用显式大小。
即是多少fr。1200 像素？以及我如何计算它？
规范说：
该算法找到一个 fr 单元在不超过目标大小的情况下可以达到的最大大小。它必须用一组网格轨道和一些空间来填充。
- 让剩余空间为要填充的空间减去非灵活网格轨道的基本尺寸。
- 设flex factor sum为柔性轨道的 flex factor 之和。如果此值小于 1，请将其设置为 1。
- 假设fr 大小为剩余空间除以弹性因子总和。
- 如果假设的 fr 大小和灵活轨道的 flex 因子的乘积小于轨道的基本大小，则重新启动此算法，将所有此类轨道视为不灵活的。
- 返回假设的 fr 大小。
他们的意思是“假设的 fr 大小”将用于单位 (1fr) ？大概吧
所以我想这是一种获得多少像素是 n fr 值的方法。
但是，如果我想做相反的事情，这将是计算有多少 fr 是 1200px 的正确方法/正确公式？
更新：
这是我正在做的一个活生生的例子。对minmax(min, max)我帮助很大。我已经解决了一些溢出错误。并想出了如何在网格模板轨道中使用 rem 单位，但仍然可以从缩小中受益：D
https://codepen.io/jeflopo/pen/OmZBEJ
html - CSS Grid 中的列居中
我正在尝试使用本机 CSS Grid 属性创建一个简单的 CSS 网格。它可以按我的意愿工作，除了我想创建一个可以在网格中居中列的实用程序类。
有没有办法创建__centered实用程序类，以便我可以将它应用到中心列？我知道我可以在列之前添加空列 div，但我想要一个更清洁的解决方案。