英文:
CSS Grid: How to align columns to the right?
问题
我正在学习CSS grid的过程中。现在我在努力对齐网格的内容。
.grid-container {
background-color: grey;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
justify-content: end;
}
.grid-item {
background-color: green;
grid-column: span 7 / span 7;
}
容器部分：
grid-template-columns: repeat(12, minmax(0, 1fr))：据我理解，这会创建12个相等的列，根据可用的空间分配。justify-content: end：这不应该使网格项对齐到容器的末尾（右侧）吗？
子项部分：
grid-column: span 7 / span 7：将元素大小设置为占据12个分数（列）中的七分之一。
为什么网格项没有对齐到容器的末尾呢？
英文:
I am in the process of learning CSS grid. Now I am struggling to align the grid's content.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.grid-container {
background-color: grey;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
justify-content: end;
}
.grid-item {
background-color: green;
grid-column: span 7 / span 7;
}
<!-- language: lang-html -->
<div class="grid-container">
<div class="grid-item">My item</div>
</div>
<!-- end snippet -->
Let's go through the rules.
On the container:
grid-template-columns: repeat(12, minmax(0, 1fr)): As far as I understood, this creates 12 equal columns based on the space available.justify-content: end: Shouldn't this align the grid items so they are flush against the end (right side) of the grid container?
On the child:
grid-column: span 7 / span 7: Sizes the element to take up seven fractions of space from the twelve fractions (columns) available.
Why is the grid item not aligned against the end of the container?
答案1
得分: 2
你所寻找的是 grid-column: span 7 / -1。它会跨越 7 个列，并从最后一列开始：
.grid-container {
background-color: grey;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
/* justify-content: end; 不会起作用 */
}
.grid-item {
background-color: green;
grid-column: span 7 / -1;
}
此外，请注意 justify-content 不像在 Flexbox 中那样对齐网格项。它对齐网格轨道，而 justify-items 则对齐轨道内的网格项。
英文:
What you are looking for is grid-column: span 7 / -1. span 7 columns but start from the last one:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.grid-container {
background-color: grey;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
/* justify-content: end; will do nothing */
}
.grid-item {
background-color: green;
grid-column: span 7 / -1;
}
<!-- language: lang-html -->
<div class="grid-container">
<div class="grid-item">My item</div>
</div>
<!-- end snippet -->
Also not that justify-content doesn't align grid items like it does in Flexbox. it align the grid tracks and justify-items align grid items inside the tracks.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论