标签: css-grid
第 n 个子级具有不同宽度的 CSS 网格布局
我想要一个网格布局，其中前四个元素的宽度等于 300px，同时保持其他元素不同的宽度值（确切地说是 200px）：
基本上，我试图通过声明grid-template-columns两次来解决这个问题，如下代码所示：
grid-template-columns: repeat(auto-fit, 200px);
grid-template-columns:nth-child(-n+4){
grid-template-columns: repeat(4, 300px);
但这不起作用。
网格布局是执行此操作的正确方法吗？我可以使用 Flexbox 和网格布局获得相同的结果吗？
这是 CodePen 到目前为止我的进展https://codepen.io/williamjamir/pen/GQYqrK
.container {
width: 100%;
margin: auto;
background-color: #ddd;
display: grid;
justify-content: center;
grid-gap: 30px;
grid-template-columns: repeat(auto-fit, 100px);
}
@media screen and (min-width: 400px) {
.container {
grid-template-columns: repeat(auto-fit, 200px);
}
.container .container:nth-child(-n + 4) {
grid-template-columns: repeat(4, 300px);
}
}
.container .item {
padding: 10px;
color: white;
font-family: sans-serif;
font-size: 30px;
background-color: orangered;
}
.container .item--1 {
background-color: orangered; …推荐指数
解决办法
查看次数
CSS 网格：`grid-template-areas` — 使用句点的空白区域不起作用
我正在尝试将元素放置到一个简单的 9x9 网格中，但是当我尝试将元素放置在左下角或右下角时，它们并没有停留在那里，而是最终出现在应有位置上方的一个方框中。这里的 JSFiddle 显示了我正在尝试的内容，但不起作用。
\n\n根据规范，在定义时放置一个.空框grid-template-areas就足够了\xe2\x80\xa6，但我也尝试使用正常布局grid-area: 1/2/3/4，但这也不起作用\xe2\x80\xa6
这就是我所拥有的，CSS：
\n\ngrid-template-areas: \n"topBar topBar topBar"\n". main ."\n"aboutDiv . optionsDiv";\ngrid-template-areas: \n"topBar topBar topBar"\n". main ."\n"aboutDiv . optionsDiv";\n/* solarized theme colors, trimmed for brevity */\r\n:root {\r\n\t--base2: #eee8d5;\r\n\t--base3: #fdf6e3;\r\n\t--yellow: #b58900;\r\n}\r\nbody {\r\n\tmargin: 0;\r\n\tbackground-color: var(--base3); \r\n\theight: 100%;\r\n}\r\n.wrapper {\r\n\twidth: 100vw;\r\n\theight: 100vh;\r\n \tdisplay: grid; \r\n\tgrid-template-columns: 0.1fr 0.8fr 0.1fr;\r\n grid-template-rows: 0.1fr 0.8fr 0.1fr;\r\n grid-template-areas: \r\n "topBar topBar topBar"\r\n ". main ."\r\n "aboutDiv . …推荐指数
解决办法
查看次数
CSS 网格 minmax() 最大宽度为 100%
此代码使用 CSS 网格和minmax(30rem, 1fr).
grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
一切正常，但当视口 父容器小于 30rem 时，会出现水平滚动条。我需要类似的东西minmax(min(30rem, 100%), 1fr))。知道如何实现这一目标吗？
https://codepen.io/anon/pen/LmEyer
ul {
list-style-type: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
grid-auto-rows: 1fr;
grid-gap: 10px;
}
li {
background-color: #aaa;
padding: 0.5rem;
}<ul class="list">
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid …推荐指数
解决办法
查看次数
如何使输入元素尊重网格容器的尺寸？
我input在 CSS 网格容器内有一个元素。容器应该是 100 像素宽，input元素占据大部分空间，一个other-thing占据剩余的 24像素。我正在grid-template-columns为此使用。
如果我将父容器设置为 200 像素而不是 100 像素，这可以正常工作：
.container {
grid-template-columns: 1fr 24px;
grid-template-rows: 1fr;
display: grid;
justify-content: center;
align-items: center;
width: 200px; /* Try 100px */
background-color: red;
}
以及以下 HTML
<div class="container">
<input value="hello"/>
<div class="other-thing">
x
</div>
</div>
但是如果我将容器设置为 100px 宽，输入会突然拒绝缩小 - 所以它与红色容器重叠。
我知道
input元素有一个用户样式表，但我看不到任何与宽度或显示相关的内容，我应该覆盖。
如何input仅使用容器中的剩余空间，最好使用grid-template-columns？
推荐指数
解决办法
查看次数
如何告诉 Autoprefixer 在 Angular 8 项目中为 CSS 网格添加前缀
我必须在我们使用最新版本的 Angular 项目中支持 IE 11。我真的很喜欢使用 IE 11 能够使用的 CSS 网格功能。但我不知道如何让 Autoprefixer 正常工作。
我的问题与另一个问题中的问题完全相同，但这涉及另一个版本。
我在 Stackblitz 上创建了一个最小的测试用例。
我像这样配置了 browserslist 文件：
> 1%
IE 11
我添加了一个控制注释来启用 Autoprefixer 的网格功能：
/* autoprefixer grid: on */
（我在两个 CSS 文件、全局样式和组件样式中都这样做了）
我对 browserslist 的这种配置和 CSS 文件中的控件注释的期望是，Autoprefixer 添加display: -ms-grid;到 CSS 输出中。但事实并非如此。
推荐指数
解决办法
查看次数
使用 CSS Grid 每隔一行着色
我想使用 CSS Grid 为我正在构建的表格中的每一行着色。但是我无法让它工作，我只能让其他所有列都着色。这是我想做的事情的图片。有没有更好的方法来构建它？我只使用 CSS Grid 因为它是我想学习的新东西。
这是我当前的代码：
.wrapper {
border-style: solid;
border-color: rgb(230, 230, 230);
font-weight: bold;
text-align: center;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(18, 35px);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.wrapper>div:nth-child(odd) {
background: #ddd;<div class="container">
<div class="wrapper">
<div>Month</div>
<div>Overtime Hours</div>
<div>Compensation Hours</div>
<div>Vacation</div>
<div>Personal Hours</div>
<div>Sick Hours</div>
<div>Carry Over</div>
<div>0.00</div>
<div>-</div>
<div>35.00</div>
<div>-</div>
<div>-</div>
<div>Allotted</div>
<div>-</div>
<div>-</div>
<div>140.00</div>
<div>14.00</div>
<div>-</div>
<div>Starting Total</div>
<div>0.00</div>
<div>-</div>
<div>175.00</div>
<div>14.00</div>
<div>-</div>
<div>Jan</div>
<div>-</div>
<div>-</div>
<div>-</div>
<div>2.00</div>
<div>7.00</div>
<div>Feb</div> …推荐指数
解决办法
查看次数
CSS Grid如何将项目推到底部然后再推到左边
我有一个带有 5 个按钮的网格，每行只有 2 个按钮。如果有奇数个按钮，我希望第一行只有一个按钮。
我的CSS：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}<div class="container">
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
<button>E</button>
</div>布局：
A B
C D
E
所需布局：
A
B C
D E
推荐指数
解决办法
查看次数
css网格的垂直间距问题
注意 div.text前两个 div 总是顶部（第二个 div 也将是粘性 div），其他 div 将从底部动态添加js insertAdjacentHTML()
我在两个div.text垂直方向之间有一个额外的空间
有没有可能解决的方法css grid？
最后结果
*{
box-sizing: border-box;
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2,1fr) ;
grid-gap: 1px;
background-color: #f7ca18;
padding: 10px;
color:#000;
height:300px;
}
.grid-container > div.item {
display: grid;
grid-template-columns: 1fr ;
grid-template-rows: auto;
background-color: #f4d03f;
text-align: center;
font-size: 14px;
overflow-y:auto;
overflow-x:hidden;
}
.grid-container > div.item div.text {
align-self: end;
display:grid;
grid-template-columns: 1fr max-content ;
}
.grid-container …推荐指数
解决办法
查看次数
CSS 用许多相同的孩子完全填充容器
有没有办法用任意数量的正方形、相同大小的孩子（少至五个，多至 50 个）填充给定容器，以便孩子们：
- 填充容器，尽可能少地留出垂直和水平空间；和
- 不要溢出容器？
例如，想象一盒 17 个圆形头像，每个头像都被放大，直到任何进一步的尺寸增加都会导致它们包裹并流过容器底部。
我知道我可以使用 JS 来计算子项的最佳比例来填充容器，但我觉得要么flex或者grid内置了这个功能。
这与我得到的差不多：
.container {
border: 1px solid tomato;
display: flex;
flex-wrap: wrap;
gap: 1vw;
height: 100vh;
justify-content: center;
width: 100vw;
}
.container > div {
background-color: coral;
flex: 0 0 12%;
margin: .5em;
}
.container .div::before {
content: '';
display: block;
padding-top: 100%;
} <div class="container">
<!-- 32 children -->
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div>
</div>如果这是重复的，请道歉。在提问之前，我已经尽我最大的努力去寻求答案。
[编辑：添加细节]
这是所需的结果，显示了一个固定大小的盒子和大小直到容器完全装满的项目。如果盒子的大小与此不同，或者里面有不同数量的物品，这些物品会缩放，直到它们都适合里面而不会溢出。最后两个孤儿的对齐并不重要，但它们必须与其余项目的大小相同。
推荐指数
解决办法
查看次数
使用 CSS 网格创建导航栏
我正在创建一个用 CSS 网格制作的导航栏。
我决定用网格来制作它，这样我就可以在不修改html 的情况下重新排列部分（项目）（只需修改 CSS）。
然后我创建了包含 3 个区域的网格：徽标、菜单、切换器。
我添加了一点间隙，这样每个项目就不会粘在一起。
到目前为止一切顺利，直到我试图删除一个/某些部分，即使该部分消失了，差距仍然存在。
然后我尝试消除间隙并替换为每个部分的边距。但是边距不会在网格的开始/结束处崩溃。它的行为与常规块元素不同。
我知道使用 flexbox 而不是网格更实用，但我更喜欢网格，因为可以在不修改 html 的情况下重新排列该部分。可以将徽标移动到顶部或其他位置。flex 是不可能的事情。
谁能解决我的网格间隙问题？或者您可能有不同的方法来创建导航栏？
查看我的沙箱：
.navbar {
background: pink;
display: grid;
grid-template-rows: auto;
grid-template-columns: max-content auto max-content;
grid-template-areas: "logo menus toggler";
justify-items: stretch;
align-items: stretch;
column-gap: 20px;
}
.logo {
background: green;
grid-area: logo;
width: 60px;
}
.menus {
background: lightsalmon;
grid-area: menus;
display: flex;
flex-direction: row;
justify-content: start;
}
.menus * {
padding: …推荐指数
解决办法
查看次数
标签 统计
css-grid ×10
css ×9
html ×7
flexbox ×4
alignment ×1
angular ×1
autoprefixer ×1
forms ×1
frontend ×1
html-table ×1