グリッドレイアウトでアイテムを注文および整列する方法

このチュートリアルでは、CSSグリッドレイアウト内のアイテムの配置とアラインメントの制御を示しています。注文アイテムの両方とそれらを個別にもグループとしても調整します。

以前は、要素の配置やグリッドオート配置アルゴリズムなど、グリッドレイアウトの基本を取り上げました。

最適なデモンストレーションについては、Firefox（バージョン52以降）またはChrome（バージョン57以降）の最新バージョンを使用します。どちらもネイティブグリッドレイアウトサポートを提供しています。

重要な概念：

プロパティは、グリッド内のアイテムシーケンスを決定し、デフォルトのDOM注文をオーバーライドします。これは、多数または動的に追加されたアイテムで特に役立ちます。

row-axis alignmentは
• （個別のアイテム）とorder（すべてのアイテム）を使用します。
単一のアイテムを調整します。
• グリッド内のすべてのアイテムを調整します justify-selfcolumn-axisアラインメントは、justify-items（個々のアイテム）とjustify-self（すべてのアイテム）を使用します。どちらもjustify-items、
、
• 、およびalign-self値を受け入れます align-items全体的なグリッドアライメントは、グリッドコンテナに適用されるstart（行軸）とend（列軸）によって制御されます。 これらはcenter、stretch、
、
• 、justify-content、align-content、およびstart。end。 center stretchspace-aroundspace-between：space-evenly
でアイテムの注文を制御します

プロパティは、アイテム配置シーケンスを指定します。 デフォルトでは、アイテムはDOM注文に従います。 ただし、では、特に多くの動的または動的にアドバイスされたアイテムで有益なカスタマイズされた配置を可能にします。 order低い値が最初に表示されます。等しい

値を持つアイテムは、domの順序を維持します

order例：order

html：order order

css（実例スニペット）：

覚えておいてください：

<div class="container">
  <div class="item a">A</div>
  <div class="item b">B</div>
  <div class="item c">C</div>
  <div class="item d">D</div>
  <div class="item e">E</div>
  <div class="item f">F</div>
  <div class="item g">G</div>
  <div class="item h">H</div>
  <div class="item i">I</div>
  <div class="item j">J</div>
</div>

でアイテムの順序を変更すると、アクセシビリティに影響する可能性があります。 スクリーンリーダーとキーボードナビゲーションは、視覚的な変更を反映していない場合があります。

row-axis alignment（

.c { grid-row-start: 1; grid-row-end: 2; }
.e { grid-row-start: 1; grid-row-end: 3; }
.b, .j { order: 2; }
.a, .i { order: 3; }

、

）：

order

justify-self個々のアイテムを調整しますが、justify-itemsは行軸に沿ってすべてのアイテムを調整します。どちらもstart、end、center、およびstretch。

を使用します

column-axis alignment（align-self、align-items）：

align-self個々のアイテムを調整し、align-items、start、end。 centerstretch全体的なグリッドアライメント（

、

）：justify-content align-content

（行軸）と

（列軸）は、容器内のグリッド全体をアライメントします。

、justify-content、align-content、およびstartに加えて、彼らはまたend、center、およびstretch。 space-aroundspace-between結論：space-evenly

CSSグリッドのマスタリングアイテムの順序付けとアラインメントは、正確なレイアウト制御を提供します。 アイテムを並べ替えるときは、アクセシビリティの考慮事項を覚えておいてください （簡単に削除されたFAQSセクション。提供されたFAQは、書き直されたチュートリアル内ですでに十分にカバーされています。

以上がグリッドレイアウトでアイテムを注文および整列する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。