右側對齊網格元素的方法
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>
由於數量有限,您可以手動定義它們
但最好使用flexbox: