右側對齊網格元素的方法
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}