grid

要素関数

要素関数

要素関数はsetルールやshowルールでカスタマイズできます。

グリッド状にコンテンツを配置。

グリッド要素を用いるとコンテンツをグリッド状に配置できます。 行と列の数に加えて、それらの間隔を定義できます。 複雑なレイアウトが作成できるような、列と行の大きさに関する設定方法が複数あります。

グリッド要素とテーブル要素はとてもよく似た挙動をする一方で、これらは異なる用途が想定されており、セマンティクスが異なります。 グリッド要素はプレゼンテーションおよびレイアウトに使われることが想定されている一方で、table要素は、複数の関連するデータ項目を表すことが大まかに想定されています。 これらの要素に対するsetルールとshowルールは、互いに影響しません。 Refer to the Accessibility Section to learn how grids and tables are presented to users of Assistive Technology (AT) like screen readers.

Sizing the tracks

グリッドの大きさは引数に指定されたトラックサイズによって決定されます。 There are multiple sizing parameters: columns, rows and gutter. 大きさを設定する各パラメーターは同じ値を受け入れるため、ここでまとめて説明します。 各sizing引数は個々のトラックサイズの配列を受け入れます。 トラックサイズは以下のいずれかです。

• auto: トラックはコンテンツに合わせた大きさとなり、残りのスペース全体まで大きくなります。 autoトラック幅が複数指定され、利用可能なスペースより大きなスペースが要求された場合、利用可能なスペースがautoトラックに等分配されます。

• 固定あるいは相対長さ（10ptや20% - 1cmなど）: トラックは厳密にその大きさになります。

• 比率長さ（例えば1fr）: 他のトラック全ての大きさが確定し次第、残りのスペースは比率指定のトラックに指定された比率に応じて分配されます。 例えば、1frで比率指定されたトラックが2つある場合、それぞれ残りのスペースの半分になります。

単一のトラックを指定する場合は、配列を省略して単一の値を指定できます。 複数のautoのトラックを指定する場合は、配列の代わりにトラックの数を入力して下さい。 例えば、columns: 3はcolumns: (auto, auto, auto)と同じ意味になります。

例

以下の例は異なるトラックサイズオプションの実演です。 また、1つのセルをグリッドの2つのトラックにまたがせるためにgrid.cellをどう使うのかも示しています。

// We use `rect` to emphasize the
// area of cells.
#set rect(
  inset: 8pt,
  fill: rgb("e4e5ea"),
  width: 100%,
)

#grid(
  columns: (60pt, 1fr, 2fr),
  rows: (auto, 60pt),
  gutter: 3pt,
  rect[Fixed width, auto height],
  rect[1/3 of the remains],
  rect[2/3 of the remains],
  rect(height: 100%)[Fixed height],
  grid.cell(
    colspan: 2,
    image("tiger.jpg", width: 100%),
  ),
)

また、文字列やコンテンツの配列をグリッドに展開して、セルを埋めることもできます。

#grid(
  columns: 5,
  gutter: 5pt,
  ..range(25).map(str)
)

グリッドのスタイル設定

The grid and table elements work similarly. For a hands-on explanation, refer to the Table Guide; for a quick overview, continue reading.

グリッドの外観はさまざまなパラメーターでカスタマイズできます。 以下のものが最も重要です。

• alignはセルの配置方法を変更します。
• insetはセル内に任意のパディングを追加します。
• fillはセルに背景を設定します。
• strokeは特定のストロークでグリッドの線をオプションで有効化します。

To meet different needs, there are various ways to set them.

もし個々のセルに対して上記のオプションを上書きする必要がある場合は、grid.cell要素が使用できます。 同様に、個々のグリッドの線もgrid.hlineやgrid.vline要素を用いて上書きできます。

To configure an overall style for a grid, you may instead specify the option in any of the following fashions:

• As a single value that applies to all cells.
• As an array of values corresponding to each column. The array will be cycled if there are more columns than the array has items.
• As a function in the form of (x, y) => value. It receives the cell's column and row indices (both starting from zero) and should return the value to apply to that cell.

#grid(
  columns: 5,

  // By a single value
  align: center,
  // By a single but more complicated value
  inset: (x: 2pt, y: 3pt),
  // By an array of values (cycling)
  fill: (rgb("#239dad50"), none),
  // By a function that returns a value
  stroke: (x, y) => if calc.rem(x + y, 3) == 0 { 0.5pt },

  ..range(5 * 3).map(n => numbering("A", n + 1))
)

On top of that, you may apply styling rules to grid and grid.cell. Especially, the x and y fields of grid.cell can be used in a where selector, making it possible to style cells at specific columns or rows, or individual positions.

ストロークのスタイル設定の優先順位

上記で説明したように、グリッドセルのストローク指定方法は3種類あります。 grid.cellのstrokeフィールドを用いる方法、grid.hlineとgrid.vlineを用いる方法、gridのstrokeフィールドを用いる方法です。 これらの設定が複数存在し、競合する場合、hlineとvlineの設定が最優先となり、続いて優先されるのがcellの設定で、最後にgridの設定が適用されます。

さらに、グリッドの繰り返されたヘッダーおよびフッターのストロークは、通常のセルのストロークよりも優先されます。

Accessibility

Grids do not carry any special semantics. Assistive Technology (AT) does not offer the ability to navigate two-dimensionally by cell in grids. If you want to present tabular data, use the table element instead.

AT will read the grid cells in their semantic order. Usually, this is the order in which you passed them to the grid. However, if you manually positioned them using grid.cell's x and y arguments, cells will be read row by row, from left to right (in left-to-right documents). A cell will be read when its position is first reached.