右侧对齐网格元素的方法
P粉296080076
2023-08-13 11:27:01
<p>我在CSS Grid布局中有固定数量的列，并且有要放置在这些列中的元素。要放置的元素数量小于列的数量。</p>
<p>我希望这些列向右对齐，按照元素添加的顺序。在下面的代码中，有4个元素向左对齐，其右侧有6个空元素：</p>
<p><br /></p>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.hello {
border-style: solid;
border-color: blue;
}
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(10, 5rem);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container">
<div class="hello">1</div>
<div class="hello">2</div>
<div class="hello">3</div>
<div class="hello">4</div>
</div></code></pre>
<p><br /></p>
<p>我想要将上面的布局更改为：</p>
<pre class="brush:php;toolbar:false;">empty empty empty empty empty empty 1 2 3 4</pre>
<p>我尝试了各种组合的<code>[align,justify]-[content,items]</code>，但都没有达到向右对齐的效果。CSS Grid能实现这个吗？</p>
由于数量有限，您可以手动定义它们
.hello { border-style: solid; border-color: blue; } .container { display: grid; gap: 5px; grid-template-columns: repeat(10, 3rem); margin: 5px; } .container > :nth-last-child(1) {grid-column-end: -1} .container > :nth-last-child(2) {grid-column-end: -2} .container > :nth-last-child(3) {grid-column-end: -3} .container > :nth-last-child(4) {grid-column-end: -4} .container > :nth-last-child(5) {grid-column-end: -5} .container > :nth-last-child(6) {grid-column-end: -6} .container > :nth-last-child(7) {grid-column-end: -7} .container > :nth-last-child(8) {grid-column-end: -8} .container > :nth-last-child(9) {grid-column-end: -9}但最好使用flexbox：
.hello { border-style: solid; border-color: blue; width: 3rem; } .container { display: flex; gap: 5px; width: calc(10*3rem + 9*5px); margin: 5px; } .container > :first-child {margin-left:auto}