标签: css-grid
如何使div跨越网格中的多个行和列？
基于上一个问题,我正在尝试为我的网格布局添加更大的块.在最后一个问题中,我需要一个div跨度多行.现在的问题是我需要一个div来跨越多个行和列.
如果我有一个五行元素,我怎么能在它的中间放置更大的元素？(因为float它自然而然地放在一边).
这是一个示例代码段:
#wrapper{
width: 516px;
}
.block{
display: inline-block;
width: 90px;
height: 50px;
margin: 5px;
background-color: red;
}
.bigger{
height: 110px;
}
.larger{
height: 110px;
width: 190px;
}<div id="wrapper">
<div class="block"></div>
<div class="block bigger"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block larger"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>我不想display: grid用于包装元素,因为我可以使用 状态这是一个非常先进的技术.我希望有一个非网格,非表格解决方案.
以下是我希望从上面的代码段中获得的内容 
推荐指数
解决办法
查看次数
在CSS Grid Layout中为每列添加滚动
我希望在我的网格布局中的每个列上单独滚动.
目前,我正在开发一个仅限移动的Web应用程序.我想为纵向和横向使用不同的网格布局.
纵向方向只有1列,每个元素都在另一列之后.这里没问题.
在横向方向,我想使用2列.我的整个内容显示在左侧,导航移动到右侧.现在我希望两个部分都有一个单独的滚动.有没有办法实现这个？如果当前列的内容结束,则滚动应该停止.
CodePen上的代码:https://codepen.io/SuddenlyRust/pen/rmJOqV
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-gap: 15px 0;
}
header {
background-color: green;
grid-column: 1;
grid-row: 1
}
main {
background-color: blue;
grid-column: 1;
grid-row: 2;
}
nav {
background-color: pink;
grid-column: 1;
grid-row: 3;
}
footer {
background-color: teal;
grid-column: 1;
grid-row: 4;
}
@media only screen and (orientation: landscape) {
.grid-container {
grid-template-columns: 5fr 4fr;
}
nav {
grid-column: 2;
grid-row: 1 / span 3;
}
footer { …推荐指数
解决办法
查看次数
可以将物品包裹在具有动态高度的容器中吗？
我有一个弹性盒问题.谁能指出我正确的方向？甚至可能是因为它的工作方式,flex-box无法解决这种情况.
我想在4列中显示内容.
让内容以列式格式列出,并在空间不足时换行到下一列.
Run Code Online (Sandbox Code Playgroud)display: flex; flex-direction: column; flex-wrap: wrap; height:<##>px应该照顾好这个.
但这就是事情变得棘手的地方.如果我不想要一个固定的高度,但是根据内容的长度增长/缩小的高度怎么办？
容器的高度是动态的.与案例B类似,案例A中的行从4行增长到7行.内容设置为尽可能填充所有列.
.other-nearby-cities {
display: flex;
flex-direction: column;
height: 700px;
flex-wrap: wrap;
border: solid 1px;
}<ul class="other-nearby-cities">
<li><span class="capitalize">Altamonte Springs</span><span> (5)</span></li>
<li><span class="capitalize">Apopka</span><span> (11)</span></li>
<li><span class="capitalize">Arcadia</span><span> (11)</span></li>
<li><span class="capitalize">Auburndale</span><span> (5)</span></li>
<li><span class="capitalize">Belle Glade</span><span> (10)</span></li>
<li><span class="capitalize">Boca Raton</span><span> (33)</span></li>
<li><span class="capitalize">Bonita Springs</span><span> (10)</span></li>
<li><span class="capitalize">Boynton Beach</span><span> (21)</span></li>
<li><span class="capitalize">Bradenton</span><span> (46)</span></li>
<li><span class="capitalize">Brandon</span><span> (16)</span></li>
<li><span class="capitalize">Brooksville</span><span> (8)</span></li>
<li><span class="capitalize">Cape Coral</span><span> (17)</span></li>
<li><span class="capitalize">Clearwater</span><span> (90)</span></li>
<li><span class="capitalize">Clewiston</span><span> (9)</span></li>
<li><span class="capitalize">Cocoa</span><span> …推荐指数
解决办法
查看次数
justify-items在CSS Grid中不起作用
我有一个CSS网格,我正在尝试将justify-items属性设置为start.
这个(或与之相关的任何其他属性)都不起作用,在我的文本编辑器(atom)中,它显示为灰色,通常表示错误.
我看过规范,这个属性肯定是规范的一部分,甚至找到了它的视频教程.
当我使用它虽然它不起作用,我无法理解为什么.
当我将代码复制到codepen时,它仍然无法正常工作.
这里的代码:https://codepen.io/emilychews/pen/EvLPgJ
.gridwrapper {
background: #e6e6e6;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-auto-rows: 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
justify-items: start; /* THIS LINE ISN'T WORKING */
align-items: stretch;
}
.gridwrapper div:nth-child(1) {
grid-column: 1 / 4;
}
.gridwrapper div:nth-child(6) {
grid-column: 1 / 3;
}
.gridwrapper div {
padding: 1em;
background: red;
border: white;
width: 100%;
color: white;
box-sizing: border-box;
}
.gridwrapper div:nth-child(odd) {
background: blue;
}<div class="gridwrapper">
<div class="grid …推荐指数
解决办法
查看次数
为什么CSS Grid布局会在单元格之间增加额外的间隙？
无法弄清楚为什么CSS网格布局会为垂直单元格周围的内容添加不必要的额外空间,尽管边距和填充被清零:
.grid {
display: grid;
grid-template-columns: 13fr 11fr 4fr 20fr;
grid-auto-rows: 12fr;
grid-gap: 4px;
align-items: center;
}
.grid figure {
outline: 1px solid red;
margin: 0;
padding: 0;
}
.grid figure img {
margin: 0;
padding: 0;
width: 100%;
display: block;
}
.grid .gi13x12 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 13;
}
.grid .gi11x6.one {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 7;
}
.grid .gi11x6.two {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 7;
grid-row-end: 13;
}
.grid .gi4x4.one …推荐指数
解决办法
查看次数
CSS网格中的浮动元素
我正在编写我想要使用CSS网格的第一页display: grid.
它工作得非常好,但我遇到了一个小问题,我想要一个float经典的元素- 文本浮动图像,报价等.
我简单地给了一个元素float: left,令我惊讶的float是,它完全被忽略了.该元素仍然是一个完整的"网格行项目".
短代码示例:
main {
display: grid;
grid-template-columns: 5% 5% 1fr 5% 5%;
}
main > * {
grid-column: 3;
}
blockquote {
grid-column: 2 / -2;
}
blockquote.float-left {
grid-column: 3;
float: left;
}
更大的例子,我创建了一个Codepen.
不幸的是,我还没有发现任何相关信息,所以我的问题是:有没有人为此解决问题？我忽略了什么吗？或许那可能还不可能？
先感谢您!:)
Codepen - 链接:
推荐指数
解决办法
查看次数
如何设置CSS网格列的宽度和最大宽度？
是否可以限制CSS网格列的宽度？
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: minmax(17.5%, 250px) minmax(31.25%, 480px) auto;
grid-template-rows: 100vh;
grid-gap: 0;
}
.menu {
padding-top: 32px;
background: linear-gradient(135deg, #837DB5 0%, #364176 100%);
}
.list-view {
background-color: #F5F5FC;
}<div class="container">
<div class="menu"></div>
<div class="list-view"></div>
<div class="details"></div>
</div>在上面的示例中,它总是使用17.5%的宽度作为菜单,因为:
"如果max小于min,则忽略max,并将该函数视为min."
来源:https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
我想要的是一个宽度为17.5%,最大为250px的菜单.那可能吗？
推荐指数
解决办法
查看次数
CSS网格 - 当溢出时,如何让所有列/行均匀生长
我觉得我在这一点上缺少一些东西,因为我观察到的行为并不完全一致.
我正在使用JavaScript生成随机网格.我在网格上设置了许多列和行,然后分别设置单元格的起始值和结束值.我想要的是,当溢出时(即,单元格的内容高于我想要的最小值,50px),单元格会增长,同一行上的单元格也会增长.看到这个小提琴
我在这里使用
grid-template-rows: repeat(4, minmax(50px, auto));
但是,正如您所看到的,由于某种原因,只有第3行增长而不是第4行.这可以通过将该行设置为来修复
grid-template-rows: repeat(4, minmax(50px, 1fr));
但这会导致所有行在发生溢出时均匀增长,这不是我想要的.看到这个小提琴
另外,奇怪的是,当我溢出第6个单元而不是第4个单元时,它确实有效.看到这个小提琴.第2和第3行均匀生长,因为第6行占据了两者.这也是我在第一个例子中期望和想要的行为.
这是一个错误吗？在Chrome和Firefox上也是如此,所以我觉得我只是遗漏了一些东西.
推荐指数
解决办法
查看次数
CSS网格方块布局
我正在尝试创建由正方形组成的网格/布局.每行四个方格.正方形不能在屏幕大小调整上扭曲.宽度和高度必须始终相同(我不想要固定值).我必须使用CSS网格.谁能帮我 ？
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 5px;
}
.container div {
background-color: red;
}<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>推荐指数
解决办法
查看次数
使用自动放置包装CSS网格
我正在尝试构建一个包含卡片状物品的网格.每种类型的单元格(标题,图像,文本,按钮,......)每行应具有相同的高度,由最大单元格的内容决定,如下面的代码段所示.
现在我试图限制列的数量,并让卡片换行,就好像我flex-wrap: wrap;在基于flexbox的解决方案中使用的那样.列数应通过媒体查询确定.如果不使用尚未支持的子网格,这可能吗？
另外,使用子网格的解决方案如何？我想它会降级到当前浏览器中高度不等的单元格？
.grid {
display: grid;
grid-template-rows: repeat(4, auto);
grid-gap: 10px;
grid-auto-flow: column;
grid-auto-columns: auto;
}<div class="grid">
<h2 class="a">Header 1</h2>
<img class="b" src="https://placekitten.com/400/100" />
<p class="c">text
</p>
<button class="d">Button</button>
<h2 class="a">Header 2 is longer and may span multiple lines</h2>
<img class="b" src="https://placekitten.com/400/100" />
<p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est.
</p>
<button …推荐指数
解决办法
查看次数