中央配置されたグリッドレイアウトのマスタリー

はじめに

この実験では、CSSを使ったグリッドの中央配置の概念を探ります。gridレイアウトを使って、親要素内の子要素を水平および垂直方向に中央配置する方法を学びます。この実験が終わるとき、justify-contentおよびalign-itemsプロパティを使って完全に中央配置されたレイアウトを作成する方法を十分に理解しているでしょう。

Skills Graph

グリッドの中央配置

VM内には既にindex.htmlとstyle.cssが用意されています。

親要素内の子要素を水平および垂直方向に中央配置するには、次の手順に従います。

1. display: gridを使ってグリッドレイアウトを作成します。
2. justify-content: centerを使って子要素を水平方向に中央配置します。
3. align-items: centerを使って子要素を垂直方向に中央配置します。

以下は、HTML構造の例です。

<div class="parent">
  <div class="child">Centered content.</div>
</div>

そして、対応するCSSです。

.parent {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100px;
}

右下隅の「Go Live」をクリックして、ポート8080でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたはグリッドの中央配置の実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を練習できます。