标签: css-grid
对齐不同父容器的子元素
我正在尝试跨容器垂直对齐可变高度元素，即每个容器中的第一个元素彼此垂直对齐，每个容器中的第二个元素彼此垂直对齐，等等。
我正在使用 flexbox 但不确定这是否可能？或者是否可以使用 CSS Grid？
期望的结果
main {
display: flex;
flex-wrap: wrap;
}
.container {
background: grey;
margin: 0 10px 20px;
padding: 10px;
width: 200px;
}
.top {
background: red;
}
.middle {
background: blue;
}
.bottom {
background: green;
}<main>
<div class="container">
<div class="top">Some text here, Some text here, Some text here</div>
<div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
<div class="bottom">And …推荐指数
解决办法
查看次数
css网格中的自动行跨越
有没有办法获得自动行跨越（项目占用垂直网格单元的自动数量）？
在我的示例中，我希望单元格 8 自动跨越 2 个（或更多）单元格，而无需明确说span 2. 我一直在寻找如何做到这一点，但似乎不可能。
我想让每个单元格都是 100 像素的倍数，这样最小的单元格是 100 像素，如果内容溢出，它会变成 200 像素高，更多的内容是 300 像素，等等。
换句话说，我希望有一种 css 网格可以自动确定 XX 的方法：
.i { grid-row: span XX; }
.i { grid-row: span XX; }
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
grid-auto-flow: dense;
}
.grid div {
border-left: 1px solid #000;
border-top: 1px solid #000;
padding: 10px;
}
.grid div.i {
grid-row: span 2;
}推荐指数
解决办法
查看次数
将CSS Grid与变换相结合
有没有办法将CSS Grid与变换相结合,以便在网格布局中移动div？
例如,如果用户单击框B(它将扩展以占据当前由其自身保持的空间以及框C和F),我如何使用变换将C和F从新占用的空间中滑入当前未占用的空间中网格？
代码如下:
.grid-wrapper {
display: grid;
grid-template-columns: repeat(5, 18% 20px);
grid-template-rows: repeat(3, 30% 20px);
height: 95vh;
width: 95vw;
}<div class="grid-wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
</div>推荐指数
解决办法
查看次数
grid-column-gap导致溢出
我刚刚测试了CSS display: grid.它运行良好,但grid-column-gap: 10px;打破了父容器.我下面代码中的绿色区域小于网格区域.
box-sizing: border-box; 显然没有效果.
如何使网格区域和父容器具有相等的宽度？
/* ------------------------------- Resets --------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, …推荐指数
解决办法
查看次数
设置行高以适合CSS Grid中的内容高度
我有一个有两列和两行的网格.我必须在一列(右侧)和左侧的一个项目中放置两个网格项.然后我希望右列中的第一个元素的最大高度等于其内容高度.我怎么能做到这一点？
我现在面临的问题是右边的这两个项目有50%的高度,我找不到将第一个设置为最小可能高度的方法,另一个设置为其余高度(汽车).
只是为了澄清 - 每个项目的高度不固定.下面你可以看到它现在的样子.
还有一件事,由于响应式网页设计,我无法改变HTML DIV元素的顺序.
.grid{
display: grid;
grid-template-columns: auto 300px;
grid-column-gap: 20px;
grid-template-areas: "main_content top" "main_content bottom";
}
.left{
grid-area: main_content;
}
.top_right{
grid-area: top;
background: #ffa4a4;
}
.bottom_right{
grid-area: bottom;
background: #c7ffae;
}<div class="grid">
<div class="top_right">I'm top right</div>
<div class="left">Long left content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper, eros ut cursus semper, dolor felis gravida ligula, et venenatis neque felis quis justo. Duis aliquet ex vitae tincidunt sodales. …推荐指数
解决办法
查看次数
我可以在CSS网格中每行使用不同数量的列吗？
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px;
grid-auto-rows: 60px;
grid-gap: 15px;
}
.col {
background-color: tomato;
}<div class="grid">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>这将创建2行,第一行是100px高度,第二行是使用60px高度自动创建的.第二行中的2列具有1fr宽度.
这是否可以通过CSS Grid/Flexbox在第2行中水平居中2列？即每行有不同数量的列.
我试图在浏览器中为CSS Grid框架解决一个简单的用例.如果您使用Flexbox构建网格,这是非常有问题的.
但是我可以用CSS Grid实现吗？
这是我想要实现的CodePen演示.
推荐指数
解决办法
查看次数
带填充的CSS网格溢出容器
我试图创建一个页脚，其宽度为（正文的）100％。在页脚的左侧，我想要一个徽标。在页脚的右侧，我想要一些文本。所以我决定尝试使用CSS网格。
这几乎正是我要的：
.footer {
background-color: #2D1975;
width: 100%;
height: 350px;
display: grid;
grid-template-columns: 30% 70%;
}
.footerGridLogo {
background-color: red;
}
.footerGridQuestions {
background-color: green;
}<div class="footer">
<div class="footerGridLogo"></div>
<div class="footerGridQuestions"></div>
</div>但是，我想在网格的左侧添加一些填充，例如10％，这样徽标就不会离左侧边缘那么近了。因此，我尝试了10-25-65的拆分，而不是30-70的拆分。但是，网格最终溢出。这是为什么？
问题的演示：
.footer {
background-color: #2D1975;
width: 100%;
height: 350px;
display: grid;
padding-left: 10%;
grid-template-columns: 25% 65%;
}
.footerGridLogo {
background-color: red;
}
.footerGridQuestions {
background-color: green;
}<div class="footer">
<div class="footerGridLogo">
</div>
<div class="footerGridQuestions">
</div>
</div>我意识到仅添加另一个10％的网格项而不是填充即可解决我的问题，但我很好奇为什么填充不能以相同的方式工作。
推荐指数
解决办法
查看次数
如何使最后一行中的项目消耗CSS Grid中的剩余空间？
有没有办法强制网格的最后一行中的所有项目填充行,无论它们有多少？
我不知道网格中的项目数量,因此我无法直接定位它们.我试图使用grid-auto-flow: dense,但它并没有真正帮助.
这是我的问题可视化:
:
div {
margin:20px auto;
width: 400px;
background: #d8d8d8;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr);
}
span {
height: 50px;
background: blue;
}<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
推荐指数
解决办法
查看次数
如何在 CSS 中打破报纸风格的 3 列布局？
我有以下要求来设计打印布局以生成 pdf，我尝试了各种选项，包括 CSS flex 和 grid，但没有太大成功。
要求是：
- 以 3 页列式布局显示内容 - 类似于报纸风格。
- 如果一列包含太多信息，那么它会“流入”右侧的下一列。
- 一旦我们达到 3 列的限制，那么第 4 列应该移动到下一行而不是该列（如下一页）。此外，我们不知道总共有多少列或行。
我能够达到第一个要求。但是，我找不到根据 div 宽度（或页面宽度）打破 CSS 中第三列的方法。
我正在尝试以下代码：
.newspaper {
max-height: 500px;
column-count: 3;
}
.article {
break-inside: avoid;
page-break-after: always;
}
.chart {
background: #ccc;
height: 200px;
} <div class="newspaper">
<div class="article">
<h1>Article 1</h1>
<div class="chart">Chart 1</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad …推荐指数
解决办法
查看次数
css grid vs flexbox：为什么css grid会导致重绘而flexbox不会
我非常喜欢 css grid，因为它很简单。但是 flexbox 没有的 css grid 似乎存在性能问题。
我已经实现了一个两列全屏页面，两列都有一个带有输入框的表单和一个带有溢出-y:auto 的项目列表。一个使用 flexbox 实现左右面板的示例，以及使用 css grid 实现左右面板的一个示例。
这是 flexbox 版本：https ://web-platform-wtfgmj.stackblitz.io/
这是 css 网格版本：https : //web-platform-wtfgmj.stackblitz.io/index2.html
在 chrome 中打开开发者工具并启用绘画闪烁（必须启用工具/渲染）。在输入框之一中键入时，css 网格版本将重新绘制列表中的所有项目。flexbox 版本没有这个问题。
我想了解为什么 css grid 在输入框中键入时会重新绘制列表中的所有项目？它可以以某种方式避免吗？
更新：似乎是 stackblitz 的问题......包含在代码片段中
更新 2：因为它在评论中有点隐藏： 所以我用 chrome 提交了一份错误报告（bugs.chromium.org/p/chromium/issues/detail?id=1204446，根据 dgrogan 的建议），他们似乎证实了这一点是 chrome 当前网格实现的性能问题。显然他们正忙于一个新的实现 LayoutNGGrid 来解决这个问题
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s, …推荐指数
解决办法
查看次数