标签: css-grid
显示网页在双显示器上包含多个div（每个div在单个显示器上）
我有一个网页，其中包含多个使用css-grid（divA和divB）的div 。我也有2个监视器（物理屏幕）。
我想显示divA在第一台显示器和divB第二台显示器上。
我正在寻找以下问题的答案：
- 如何
divA在第一台显示器和divB第二台显示器上定位（响应）？ - 请问有没有可用的模拟器来在单个监视器上操纵双屏幕来测试这种情况？
任何帮助或建议，不胜感激。
谢谢，阿什温
推荐指数
解决办法
查看次数
是否存在以某些网格位置为目标元素的选择器？
我有一个带有一堆自动流动网格项的CSS网格.有时网格项是一个1 x 1轨道,有时它们是2 x 2轨道,所以我不知道源顺序中哪些项目将位于网格中的某些位置.这意味着样式:nth-child()将不可靠.
我想为某些网格列中的项添加样式(主要是最后一列).是否有一个CSS选择器可以让我设置这些项目的样式？
例如,在这个演示中,我如何设置框3,5和9的样式(此处为codepen)？
.grid-container {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 1em;
grid-row-gap: 1em;
}
.grid-item {
background-color: #aea;
text-align:center;
font-size:3em;
min-height:3em;
line-height: 3em;
}
.grid-item.double {
grid-column-start: span 2;
grid-row-start: span 2;
}<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item double">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
</div>
</body>编辑:代码将以CMS结尾,并可能在将来更改.
推荐指数
解决办法
查看次数
使用CSS网格时如何在CSS中垂直对齐对象？
我最近遇到过这个问题.让我们假设我有一个简单的<h1>标签,我想垂直居中,所以即使我重新调整窗口大小,它仍将保留在我的一个网格框行的中间,忽略它的水平位置.
我知道,当谈到网格容器时,vertical-align没有任何效果.那么解决方案是什么？
这个问题已被标记为重复,但是,另一个问题是关于水平居中文本,而在这里,我问的是垂直居中.
推荐指数
解决办法
查看次数
使用 CSS 网格让多个不同宽度的列换行？
我正在为我的新响应式布局测试 CSS 网格，但我遇到了换行问题。
我有一个导航栏，它的标题应该推到左边，4 个按钮应该推到右边。现在的问题是使用：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
正如预期的那样，制作 5 个均匀间隔且响应迅速的网格单元。问题是我希望纽扣单元比标题小得多。所以我想要8fr 1fr 1fr 1fr而不是1fr 1fr 1fr 1fr 1fr。如何在保持使用重复自动调整的包装/响应属性的同时做到这一点？
说明问题的 Codepen 示例：https ://codepen.io/johnpyp/pen/ZJxdYK
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grid>* {
align-text: center;
background-color: lightgreen;
height: 200px;
}推荐指数
解决办法
查看次数
在弹性项目之间显示div
我正在创建一个填充了<div>元素的页面.包含这个div的容器有display: flex;.因此项目自动包装到几行.现在我想点击一个项目,这样就会打开另一个项目,其中<div>包含有关所选项目的信息.但是这个信息div应该位于包含所选div和容器全宽的行下面.
我不知道如何做这项工作.我做了一个简单的JsFiddle开头:https://jsfiddle.net/44j4jnq4/3/
我正在获得click事件和dynamiccaly添加带有Angular的dinfo div.我的问题主要是关于如何设置样式,以便它不会弄乱弹性项目并且具有容器的宽度.
我也有这个图像可视化我想要的东西.
希望你能帮助我.
推荐指数
解决办法
查看次数
创建一个按列流动的 CSS 网格，具有基于内容的动态列和行
我有一个动态数量的元素（所有相同的维度）。我想将它们放置在网格中，以便它们按列排序，列数基于可用容器宽度，行数基于元素数。
例如，假设有 9 个元素：
1 4 7
2 5 8
3 6 9
但是如果容器宽度扩大：
1 3 5 7 9
2 4 6 8
或收缩：
1 6
2 7
3 8
4 9
5
当项目按行而不是按列定位时，这可以正常工作。此外，如果我明确设置行数，它工作正常，但如果我对行和列使用自动填充，它只会在一行中显示所有内容。
这是我希望呈现为 3x3 网格的一个简单示例：https : //codepen.io/anon/pen/ZxPQNd
1 4 7
2 5 8
3 6 9
1 3 5 7 9
2 4 6 8
推荐指数
解决办法
查看次数
在网格上设置 css grid 子元素的大小，而不指定它应该进入的列或行
是否可以在它们应该跨越的行/列数量中设置 div 的高度和宽度，而没有具体指定它们应该进入哪些列或行？
例如，如果我有两个类，比如说.long和.wide，并且我希望.long该类为 3 行高和 1 列宽，并且.wide该类为 3 列宽但只有 1 行高。
我的特定用例涉及 Angular 5，我正在动态加载对象，并希望其中的一些比其他的大。我知道我可以使用 flexboxes 并设置高度来做到这一点，但是很想知道我是否可以用网格实现相同的（更整洁），但我一直在发现每个类都指定了grid-column: x/y; grid-row: a/b等等。
推荐指数
解决办法
查看次数
如何折叠CSS网格中未使用的行？
所以我在移动设备上有一个简单的三个段落堆栈,我希望在较大视口的网格中设置样式,而不更改源顺序.
第一部分可能包含从几行到没有内容的任何内容.
在这种情况下,如何使第一行折叠,以便第二行填充空格？IE顶部为空时,最后一部分应显示在顶部
.grid {
display: grid;
grid-template-rows: min-content auto;
grid-template-columns: 60% 40%;
grid-template-areas:
"main first"
"main last";
}
.first { grid-area: first; }
.main { grid-area: main; }
.last { grid-area: last; }<div class="grid">
<b class="first">Grant me revenge!</b>
<b class="main">Arnold ipsum. Just bodies. I need your clothes, your boots, and your motorcycle. Grant me revenge! And if you do not listen, then to HELL with you. Make it quick because my horse is getting tired. Come on don't …推荐指数
解决办法
查看次数
对齐不同块的子元素
我有一份商品清单。我需要在二维列表中显示它们。每个商品都有子元素：照片、标题、描述、价格和购买按钮，必须以这种方式调整大小和位置：商品行中的所有标题、描述、价格和照片必须位于相同的 y 坐标位置，并且具有height 是一行中对应高度元素的最大值。
我试过这个：“网格模板行：1fr 1fr 1fr 1fr 30px;” 使一行中的所有子元素都位于相同的 y 位置，但我需要它们的高度以适应内容并且不高于一行中的最大元素。PS 您可以使用 flex 或任何您想要的方式提供代码。
代码
.Grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat( auto-fill, 280px);
}
.loon-card {
grid-template-rows: 1fr 1fr 1fr 1fr 30px;
display: grid;
grid-gap: 10px;
border: 1px solid #ddd;
padding: 10px;
}
.long-description {
border-top: 1px solid #ddd;
}<div class="Grid">
<div class="loon-card">
<img src="">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. …推荐指数
解决办法
查看次数
CSS Grid 响应式布局保持完整的行
我有一个用于我正在构建的仪表板的网格布局。我正在努力实现以下目标：
- 保持网格元素的纵横比
- 确保每个网格行都已填充/完成。这就是我的问题孩子。我在这里看到了多个教程和答案，其中随着宽度的减小，行中可能包含新行中的剩余元素。这会在孤立网格元素/不完整行右侧的网格中创建大量空白空间。我希望网格移动以将列减少到下一个最低的可整除数，从而得到完整的行。如果网格以不可整除的数字（素数）开头，则它只能转到单个列进行折叠，比如说 3 个网格项目折叠为 1，因为它是最高除数，因此保持完整的行。另一个示例，6 个项目会折叠为 3 列 2 列，然后是 2 列 3 列，然后是 1 列 6。
我很好奇是否有纯 CSS 方法来确保行保持完整，或者这是否需要 javascript。任何一个答案都足够了，但我更喜欢纯 css 解决方案。
到目前为止我的代码：
.grid-4-2-1 {
display: grid;
grid-template-areas: "grid-child-1 grid-child-2 grid-child-3 grid-child-4";
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-gap: 20px;
margin: 20px;
}
.grid-child {
position: relative;
align-items: center;
justify-content: space-between;
padding-top: 100%;
background-color: #fff;
position: relative;
}
.grid-child .grid-content {
position: absolute;
right: 0px;
top: 0px;
height: 100%;
width: 100%;
}
@media only screen and (min-device-width: 768px) and (max-device-width: …推荐指数
解决办法
查看次数
标签 统计
css ×10
css-grid ×10
html ×5
css3 ×4
javascript ×2
angular ×1
flexbox ×1
grid-layout ×1
monitor ×1