证明项目在 CSS 网格中不起作用
justify-items not working in 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 double-col double-row">1</div>
<div class="grid">2</div>
<div class="grid">3</div>
<div class="grid">4</div>
<div class="grid">5</div>
<div class="grid">6</div>
<div class="grid">7</div>
<div class="grid">8</div>
</div>
justify-items
属性 通过在列(而不是整个容器)中分配免费 space 来对齐网格项目。
然而,在这种情况下,没有空闲 space 因为每个项目都占据了列的整个宽度。
.gridwrapper div { width: 100% }
删除该规则后,justify-items
有效。
这里有更完整的解释:
.gridwrapper {
background: #e6e6e6;
display: grid;
grid-template-columns: repeat(8, 25px); /* adjustment; otherwise 1fr... */
grid-auto-rows: 100px; /* all free space */
grid-row-gap: 10px;
grid-column-gap: 10px;
justify-content: end; /* adjustment */
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 double-col double-row">1</div>
<div class="grid">2</div>
<div class="grid">3</div>
<div class="grid">4</div>
<div class="grid">5</div>
<div class="grid">6</div>
<div class="grid">7</div>
<div class="grid">8</div>
</div>
我有一个 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 double-col double-row">1</div>
<div class="grid">2</div>
<div class="grid">3</div>
<div class="grid">4</div>
<div class="grid">5</div>
<div class="grid">6</div>
<div class="grid">7</div>
<div class="grid">8</div>
</div>
justify-items
属性 通过在列(而不是整个容器)中分配免费 space 来对齐网格项目。
然而,在这种情况下,没有空闲 space 因为每个项目都占据了列的整个宽度。
.gridwrapper div { width: 100% }
删除该规则后,justify-items
有效。
这里有更完整的解释:
.gridwrapper {
background: #e6e6e6;
display: grid;
grid-template-columns: repeat(8, 25px); /* adjustment; otherwise 1fr... */
grid-auto-rows: 100px; /* all free space */
grid-row-gap: 10px;
grid-column-gap: 10px;
justify-content: end; /* adjustment */
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 double-col double-row">1</div>
<div class="grid">2</div>
<div class="grid">3</div>
<div class="grid">4</div>
<div class="grid">5</div>
<div class="grid">6</div>
<div class="grid">7</div>
<div class="grid">8</div>
</div>