グリッド要素を右揃えにする方法
P粉296080076
P粉296080076 2023-08-13 11:27:01
0
1
602
<p>CSS グリッド レイアウトには固定数の列があり、これらの列に要素を配置します。配置する要素の数は列の数よりも少なくなります。 </p> <p>要素が追加された順序で列を右揃えにしたいと考えています。次のコードでは、4 つの要素が左に整列され、6 つの空の要素が右に配置されています。 <p><br /></p> <pre class="snippet-code-css lang-css prettyprint-override"><code>.hello { ボーダースタイル: ソリッド; 境界線の色: 青; } 。容器 { 表示: グリッド; グリッドギャップ: 5px; グリッドテンプレート列: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;">空 空 空 空 空 1 2 3 4 <p><code>[align,justify]-[content,items]</code> のさまざまな組み合わせを試しましたが、どれも右揃えの効果を達成できませんでした。 CSS Grid はこれを実現できるでしょうか? </p>
P粉296080076
P粉296080076

全員に返信(1)
P粉208469050

数が限られているため、手動で定義できます

リーリー リーリー

ただし、フレックスボックスを使用する方が良いでしょう:

リーリー リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート