グリッドレイアウト

2025-11-19

グリッドレイアウト とは

グリッドレイアウト（Grid layout）とは、CSS3 で規定された、 アイテムを行と列に並べるための 2 次元のレイアウト方法である。1 次元のレイアウトで威力を発揮するフレキシブルボックスと合わせて、 広く使われている。

実例１

以下の例はCSS グリッドレイアウト(developer.mozilla.org) に基づく。 下図は、グリッドレイアウトによるグループを表している。

One
Two
Three
Four
Five
Six

One とかかれたグループの領域は、列が 1 列めの境界線から 3 列めの境界線まで、行が 1 行めの境界線から 2 行目の境界線までだ。 これを表す CSS は次の通りだ。

.one {
  grid-column: 1 / 3;
  grid-row: 1;
}

grid-row の書き方でわかるように、行が 1 行めの境界線から 2 行目の境界線までのときは、単に grid-row: 1; でよい。two から six までは次のようになっている。

実例２

ソフトウェア科学のための論理学より、 \( (\forall x_0 ((\lnot \mathrm{human}( x_0)) \lor \mathrm{mortal} (x_0))) \) の構文木を表示させてみる。

\( \forall \)
\( x_0 \)
\( \lor \)
\( \lnot \)
mortal
human
\( x_0 \)
\( x_0 \)

実例３

フィッチスタイルの推論図を作ってみる。

\( \exists x \exists y (\mathrm{P}(x) \land \mathrm{P}(y) \land x \neq y) \)
\( \forall x \forall y (\mathrm{P}(x) \land \mathrm{P}(y) \land x \neq y \to \exists!z(\mathrm{L}(z) \land \mathrm{E}(x, z) \land \mathrm{E}(y,z)) ) \)
\( \forall x (\mathrm{L}(x) \to \exists y (\mathrm{P}(y) \land \lnot \mathrm{E}(y, x))) \)
\( \vdots \)
\( \forall x (\mathrm{P}(x) \to \exists z \exists z' (\mathrm{L}(z) \land \mathrm{L}(z') \land \mathrm{E}(x,z) \land \mathrm{E}(x,z') \land z \neq z')) \)

実例４

私の Web ページのヘッダーにあるようなレイアウトを作ってみた。

タイトル

2025-11-19

数式表示

数式は MathJax4 を使った。

参考リンク