标签: css-grid
使网格容器填充列不是行
我希望我的网格像这样垂直填充:
1 4 7
2 5 8
3 6 9
... arbitrary number of additional rows.
相反,它会像这样水平填充:
1 2 3
4 5 6
7 8 9
我想指定网格中的列数,而不是行数.
这就是我的div使用内联CSS样式的样子:
<div style="display:grid; grid-template-columns:1fr 1fr 1fr;">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>重要的是我的网格宽3列,但我希望项目按列填充,而不是按行填充.CSS Grid中有可能吗？我已经阅读了这篇https://css-tricks.com/snippets/css/complete-guide-grid/,但没有看到有关订单的任何信息.
CSS Flexbox有flex-direction没有像CSS Grid那样的属性？
推荐指数
解决办法
查看次数
如何在CSS网格布局中定位特定的列或行？
是否可以使用CSS选择特定的网格列或行？
例如,假设我有一个3行×2列CSS网格布局:grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;.如何从第2列中选择所有元素？例如:( grid:nth-child(column:2)只是我的想法,不是有效的代码).
我已经nth-child在div元素上尝试了选择器,但这不允许我在Grid Layout引擎自动放置项目时指定行或列.
body {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.item {
background: #999;
}<div class="item">
<p>Customer Name</p>
<p>Element 1 | Element 2</p>
</div>
<div class="item">
<p>Right Justify</p>
<p>Element 1 | Element 2</p>
</div>
<div class="item">
<p>Customer Name</p>
<p>Element 1 | Element 2</p>
</div>
<div class="item">
<p>Customer Name</p>
<p>Element 1 | Element 2</p>
</div>
<div class="item">
<p>Customer …推荐指数
解决办法
查看次数
我可以使用动态数量的单元格/行的CSS网格吗？
我想做的是制作一个动态数量的单元格的CSS网格.为简单起见,我们假设每行总有四个单元格.我可以指定具有这种动态行数的网格吗？
为了更容易,这是Flexbox实现:
const COLORS = [
'#FE9',
'#9AF',
'#F9A',
"#AFA",
"#FA7"
];
function addItem(container, template) {
let color = COLORS[_.random(COLORS.length - 1)];
let num = _.random(10000);
container.append(Mustache.render(template, { color, num }));
}
$(() => {
const tmpl = $('#item_template').html()
const container = $('#app');
for(let i=0; i<5; i++) { addItem(container, tmpl); }
$('#add_el').click(() => {
addItem(container, tmpl);
})
container.on('click', '.del_el', (e) => {
$(e.target).closest('.item').remove();
});
});.container {
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: flex-start; …推荐指数
解决办法
查看次数
使网格项跨越到最后一行/列
当我不知道行数时,是否可以使网格项从第一行跨越到最后一行？
可以说我有以下html与未知数量的框.
如何.box从第一个网格线到最后一个网格线进行第三次跨度？
.container {
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
}
.box {
background-color: blue;
padding: 20px;
border: 1px solid red;
}
.box:nth-child(3) {
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
}<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>推荐指数
解决办法
查看次数
即使在包裹后,也可以弯曲相同宽度的物品
有可能像这样制作一个纯CSS解决方案:
- 物品有一些
min-width. - 它们应该动态增长以填充所有容器宽度,然后换行到新行
- 列表中的所有项目应具有相同的宽度.
这就是它现在的样子:
这就是我希望它看起来像(我已经手动管理那些底部项目的宽度只是为了显示预期的结果):
.container {
display: flex;
flex-wrap: wrap;
}
.item {
background: yellow;
min-width: 100px;
height: 20px;
text-align: center;
border: 1px solid red;
flex-grow: 1;
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>这是一个小提琴演示.
推荐指数
解决办法
查看次数
如何在CSS网格布局中指定行高？
我有一个CSS网格布局,我想让一些(中间3)行拉伸到它们的最大尺寸.我可能正在寻找类似于flex-grow: 1Flexbox 的属性,但我似乎无法找到解决方案.
注意:这仅适用于Electron应用程序,因此浏览器兼容性并不是真正的问题.
我有以下CSS网格布局:
.grid {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
grid-gap: 10px;
height: calc(100vh - 10px);
}
.grid .box {
background-color: grey;
}
.grid .box:first-child,
.grid .box:last-child {
grid-column-start: 1;
grid-column-end: -1;
}
/* These rows should 'grow' to the max height available. */
.grid .box:nth-child(n+5):nth-child(-n+7) {
grid-column-start: 1;
grid-column-end: -1;
}<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div …推荐指数
解决办法
查看次数
CSS网格:是否可以将颜色应用于网格间隙？
有没有办法在CSS网格布局模块中设置不仅仅是网格间隙宽度的样式？我在文档中找不到任何关于它的内容,但是人们倾向于认为有可能因为网格间隙在许多设计中都有颜色.如果不可能,有解决方法吗？
推荐指数
解决办法
查看次数
Flexbox /网格布局中的上一个边距/填充折叠
我有一个项目列表,我试图安排到一个可滚动的水平布局与flexbox.
容器中的每个项目都有左右边距,但最后一个项目的右边距正在折叠.
有没有办法阻止这种情况发生,或者是一个好的解决方法？
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
height: 300px;
overflow: auto;
width: 600px;
background: orange;
}
ul li {
background: blue;
color: #fff;
padding: 90px;
margin: 0 30px;
white-space: nowrap;
flex-basis: auto;
}<div class="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>推荐指数
解决办法
查看次数
为什么 Chrome 开发工具抱怨我不应该在带有 display: block 的元素上使用 grid-column-end ？
我正在处理一些 css-grid 格式的内容。我有如下规则，应用于网格内的元素：
<some selector here> {
grid-column-end: span 4;
}
当我这样做时，我在 Chrome 开发工具 (Chrome 108) 中看到的内容如下：
将鼠标悬停在“circle-i”上会显示以下消息：“ display: block属性阻止grid-column-end产生效果。尝试将display设置为block之外的其他内容。”
我不明白这条消息，也找不到任何可以解释它的文档。我看不出还有什么其他显示类型适合这种情况。这是一个问题，还是一个 Chrome 错误？
推荐指数
解决办法
查看次数
居中和底部对齐弹性项目
我有一个Flex容器(蓝色方块),具有以下属性:
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
因此,它的孩子(浅蓝色方块)如下所示排列自己.但是,我想在正常流程中添加另一个子项(绿色方块)并将其相对于其父项定位.要定位它,你看到下面,我非常喜欢写东西bottom: 20px;和margin: auto;.
我试着玩弄z-index无济于事.我该怎么做呢？我应该求助于创建另一个父元素吗？
推荐指数
解决办法
查看次数