标签: css-grid
CSS Grid 中间有一个额外的包装器
我想使用 CSS Grid 的 grid-template-areas。
但问题是我使用的 CMS 添加了许多额外的包装器。有没有办法忽略额外的包装器？因为它弄乱了漂亮的网格区域......
我正在尝试覆盖 css 网格的自动放置机制。因此，任何位于中间且未分配特定网格区域的 div 将出现在网格的末尾，并且不会与网格本身混淆。
我在这里创建了一个问题示例 - https://codepen.io/shaal/pen/qPvQWW
您可以看到，由于额外的包装器，“侧边栏”元素没有分配到我想要的区域。
HTML
.container {
display: grid;
grid-gap: 5px;
grid-template-areas: "header header header" "sidebar content content" "sidebar content content" "footer footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
height: 180px;
}
.footer {
grid-area: footer;
}<h1>CSS GRID</h1>
<div class="container">
<div class="item header">Header</div>
<div class="cms-annoying-wrapper">
<div class="item sidebar">Sidebar</div>
<div class="item content">Content</div>
</div>
<div class="item footer">Footer</div>
</div>8
推荐指数
推荐指数
2
解决办法
解决办法
4388
查看次数
查看次数
如何创建具有 3 列和无限数量项目的 CSS 网格？
我试图创建一个 CSS 网格，它有 3 列，我可以在其中添加任意数量的具有相同高度的“内容 DIV”，这些 DIV 将按顺序添加，如下所示：
[1][2][3]
[4][5][6]
[7][8]
任何帮助，将不胜感激。
8
推荐指数
推荐指数
2
解决办法
解决办法
5万
查看次数
查看次数
网格布局内的边框
我有一个代表井字棋游戏的 CSS 网格。我只想在网格内放置一个边框。今天，我是这样进行的：
:root {
--border: 2px dashed #393939;
--symbol-color: #FF7F5B;
}
.grid {
height: 100%;
display: grid;
grid-template-columns: repeat(3, calc(100%/3));
grid-template-rows: repeat(3, calc(100%/3));
}
.child {
display: flex;
align-items: center;
align-content: center;
color: var(--symbol-color);
font-size: 2.5rem;
}
.child:nth-child(1),
.child:nth-child(2),
.child:nth-child(3) {
border-bottom: var(--border);
}
.child:nth-child(7),
.child:nth-child(8),
.child:nth-child(9) {
border-top: var(--border);
}
.child:nth-child(1),
.child:nth-child(4),
.child:nth-child(7) {
border-right: var(--border);
}
.child:nth-child(3),
.child:nth-child(6),
.child:nth-child(9) {
border-left: var(--border);
}<div class="grid">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div> …8
推荐指数
推荐指数
3
解决办法
解决办法
1万
查看次数
查看次数
如何使元素填充剩余的视口高度？
我想使用 CSS 网格。像这样的事情我想……
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto auto [whatever's left of the vh] auto auto;
position: relative;
}
8
推荐指数
推荐指数
1
解决办法
解决办法
5181
查看次数
查看次数
Flexbox 中的 CSS 网格仅在 Chrome 上无法按预期工作
我正在尝试创建一个包含标题和 2x2 CSS 网格的 flexbox。
- flexbox (
.container) 填充整个视口。 - 标题的高度是可变的。它可能会在页面打开时动态更改。
- 网格中的四个单元格必须占据视口的剩余部分，并且它们的宽度和高度必须相等。
这是我现在所拥有的：
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
* { box-sizing: border-box; }
.container {
height: 100%;
display: flex;
flex-direction: column;
border: 2px solid red;
}
.header {
background: lime;
}
.grid {
flex: auto; /* fills the remaining part of the viewport below header */
background: cyan;
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
grid-gap: 2px;
}
.cell {
padding: 10px;
background: linear-gradient(to …8
推荐指数
推荐指数
1
解决办法
解决办法
4474
查看次数
查看次数
CSS 网格从右到左放置项目
我正在开发一个具有成员列表的网络应用程序。会员数量将动态来自服务器。我想在四列的网格中显示每个成员的信息。是否可以使用 Css Grid 从右到左动态放置每个项目？
8
推荐指数
推荐指数
1
解决办法
解决办法
9623
查看次数
查看次数
将 css 网格 (diplay:grid) 的行与顶部对齐？
我有一个 css 网格（display:grid）和具有固定高度的行。
我可以将行对齐到网格顶部而不是垂直分布吗？
.grid {
height: 180px;
display: grid;
grid-template-columns: 1fr;
border: solid 1px red;
align-content: top;
align-items: top;
}
.row {
grid-column: 1 / -1;
height: 20px;
background: silver;
border: dashed 1px blue;
}<div class="grid">
<div class="row">row 1</div>
<div class="row">row 2</div>
<div class="row">row 3</div>
</div>我想实现这个目标：
8
推荐指数
推荐指数
1
解决办法
解决办法
7983
查看次数
查看次数
阻止 CSS 网格列溢出
我尝试用 max-height、max-width 来阻止列溢出，但它似乎不起作用。
我用 CSS 网格制作了三列。一种用于导航部分，一种用于左列，一种用于右列。左栏部分不断溢出导航部分和右栏部分，如屏幕截图所示。
我想要实现的目标：
会发生什么：
@import url("https://fonts.googleapis.com/css2?family=Asap:wght@400;700&display=swap");
* {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: #4a6163;
font-family: "Asap";
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.main_grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 0.25fr (1fr)[2];
grid-template-columns: 0.25fr repeat(2, 1fr);
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
max-height: 100%;
max-width: 100%;
}
.nav_section {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-area: 1 / 1 / 1 / 2;
border: 3px yellow solid;
}
.left_column {
-ms-grid-row: 1; …8
推荐指数
推荐指数
1
解决办法
解决办法
247
查看次数
查看次数
如何使网格中的列像 Flexbox 一样“空间均匀”？
我有这个网格 CSS
.grid {
display: grid;
grid-column-gap: 50px;
grid-template-columns: repeat(3, 1fr);
}
它位于宽度为 500px 的 div 中
但我注意到网格中的第一个项目“拥抱”了 div 的左边缘，但最右边的项目没有接触 div 的边缘。
在 Flexbox 中，我可以通过（接近足够）实现这一点：
.flex {
display: flex;
justify-content: space-between;
}
如何使用网格响应式地执行此操作？
我知道我可以更改网格列间隙，但这看起来很不稳定
8
推荐指数
推荐指数
1
解决办法
解决办法
6745
查看次数
查看次数
如何在不换行元素的情况下连续显示x项在左侧，y项在中间，z项在右侧
我想做一些类似于justify-content:space-aroundor的事情justify-content:space-between，但使用：
- x 个项目并排在左侧，
- y 个项目并排在中间，
- z 项目并排在右侧。
通过换行元素会很简单，但我不能，因为这些项目（.left、.middle、.right）将是影响下面元素样式的复选框（并且没有良好支持的父选择器）。
我找到了这个答案来模拟first-of-class右侧，但没有找到类似于 emulate 的东西last-of-class。
/* emulate first-of-class */
.container>.right {
margin-left: auto;
}
.container>.right~.right {
margin-left: unset;
}
这是我当前尝试的一个片段：
/* emulate first-of-class */
.container>.right {
margin-left: auto;
}
.container>.right~.right {
margin-left: unset;
}
.container {
display: flex;
flex-wrap: wrap;
}
input {
display: none;
}
label {
padding: 0 10px;
background-color: orange;
}
.container>.right {
margin-left: auto; …8
推荐指数
推荐指数
1
解决办法
解决办法
331
查看次数
查看次数