相关疑难解决方法(0)
如何将CSS Grid中最后一行的元素居中？
我正在使用CSS网格来布局这样的项目......
#container {
display: grid;
grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}
.item {
background: teal;
color: white;
padding: 20px;
margin: 10px;
}<div id="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>如何让最后一行居中而不是左对齐？我不能保证项目的数量,所以想要使布局看起来适合任意数量的项目.
这是我应该使用flexbox吗？或者CSS网格是否合适？
推荐指数
解决办法
查看次数
如何使用CSS Grid布局粘贴页脚？
我在CSS Grid布局中找到了一个粘性页脚的CodePen解决方案,但它对我来说有两个问题:
- 这是有点丑
min-height: 100%和height: 100% - 它只适用于身体中的两个元素(div和footer)
我需要一些适用于这种HTML结构的东西:
<body>
<nav>Some navigation buttons</nav>
<main>The content</main>
<footer>Copyrights and stuff</footer>
</body>
我真的不想收拾<nav>和<main>成<div>,我就喜欢这样做纯CSS.
// Not required!
// This is just to demo functionality.
$("#add").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris …推荐指数
解决办法
查看次数
没有媒体查询的CSS网格最大列
是否可以定义一个最大列数的网格，但是当屏幕宽度改变时允许元素包装到新行上？
我有隐式类，允许行包装到新行上，但是没有最大列数。
这是使用弹性盒的一种方法的代码笔
CSS：
.flex-container {
display: flex;
flex-wrap: wrap;
}
另一种方法是使用网格
.grid {
display: grid;
counter-reset: grid-items;
position: relative;
}
.grid--auto-fit {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
我想要一个相当通用的解决方案，没有Java脚本或媒体查询，我想实现的目标是否可能？
推荐指数
解决办法
查看次数
如何获取不同长度的网格项目？
使用repeat()和auto-fit/ auto-fill函数,当列或行具有已定义的长度模式时,很容易获取网格项.
在下面的示例中,所有列的最小宽度为100px,最大宽度为1fr.
#grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 1em;
}
#grid > div {
background-color: #ccddaa;
padding: 10px;
}<div id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>但是当轨道没有长度模式(即长度随机变化)时,网格物品如何包裹？
在下面的示例中,第一列的宽度为60%.第二列是最小/最大250px/1fr.如何让第二列包装在较小的屏幕上？
#grid {
display: grid;
grid-template-columns: 60% minmax(250px, 1fr);
grid-gap: 1em;
}
#grid > div {
background-color: #ccddaa;
padding: 10px;
}<div id="grid">
<div></div>
<div></div>
</div>我知道flexbox和媒体查询提供了解决方案,但我想知道Grid Layout是否可以做到这一点.我搜索了规格,但没有找到任何东西.也许我错过了这个部分.谢谢你的帮助.
推荐指数
解决办法
查看次数
我可以在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 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网格自动填充仅2列
我正在使用CSS Grid并在此处找到的codepen中进行了以下布局:https://codepen.io/alexg2195/pen/xLEeMd
我的问题是,在使用时,repeat(auto-fill, minmax(400px, 1fr));我最终得到的布局不仅仅是两列.
有没有办法强制两列,但仍然有相同的最小自动填充调整大小行为？
body {
margin: 40px;
}
.layout {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 100px;
grid-template-areas: "main btn" "main .";
}
.btn {
grid-area: btn;
background-color: #444;
color: #ddd;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.boxes {
grid-area: main;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}<div class="layout">
<div class="boxes">
<div class="box a">A</div>
<div class="box …推荐指数
解决办法
查看次数
如何跨越到隐式网格中的最后一列？
我希望一个项目从第一列开始并在最后一列结束，无论有多少列。
它应该像这样工作：
item {
grid-column-start: 1;
grid-column-end: -1;
}
将第 n 条网格线添加到网格项的位置。如果给出负整数，则相反，从显式网格的结束边缘开始计数。
所以这只适用于显式网格？为什么它不能在隐式网格上工作？
推荐指数
解决办法
查看次数
像 css 中的弹性项目一样收缩网格项目
是否可以像 css 中的弹性项目一样缩小网格项目？
网格项目
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.child {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
padding: 5px;
border: 3px solid #a07;
}<div class="container">
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
</div>弹性项目
.container {
display: flex;
margin-left: -10px;
flex-flow: row wrap;
}
.child {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
padding: …推荐指数
解决办法
查看次数
How to make a grid container shrink to fit the content?
I'm trying to make a game with a grid. I have x divs with x divs inside them, to create the grid.
The problem is that I want the container div for all of this to only be as big as it needs to be (say, 5x5 squares at 25px each = 125px x 125px container div). The height is fine, but the width stretches to the end. Each box is to be 25px.
I've tried grid-template-rows: repeat(auto-fill, 25px) which …
推荐指数
解决办法
查看次数