Struct GridElem 

pub struct GridElem {
    pub columns: Settable<Self, 0u8>,
    pub rows: Settable<Self, 1u8>,
    pub column_gutter: Settable<Self, 3u8>,
    pub row_gutter: Settable<Self, 4u8>,
    pub inset: Settable<Self, 5u8>,
    pub align: Settable<Self, 6u8>,
    pub fill: Settable<Self, 7u8>,
    pub stroke: Settable<Self, 8u8>,
    pub children: Vec<GridChild>,
    pub grid: Option<Arc<CellGrid>>,
}

Arranges content in a grid.

The grid element allows you to arrange content in a grid. You can define the number of rows and columns, as well as the size of the gutters between them. There are multiple sizing modes for columns and rows that can be used to create complex layouts.

While the grid and table elements work very similarly, they are intended for different use cases and carry different semantics. The grid element is intended for presentational and layout purposes, while the [table] element is intended for, in broad terms, presenting multiple related data points. Set and show rules on one of these elements do not affect the other. 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 { #track-size }

A grid’s sizing is determined by the track sizes specified in the arguments. There are multiple sizing parameters: columns, rows and gutter. Because each of the sizing parameters accepts the same values, we will explain them just once, here. Each sizing argument accepts an array of individual track sizes. A track size is either:

• {auto}: The track will be sized to fit its contents. It will be at most as large as the remaining space. If there is more than one {auto} track width, and together they claim more than the available space, the {auto} tracks will fairly distribute the available space among themselves.

• A fixed or relative length (e.g. {10pt} or {20% - 1cm}): The track will be exactly of this size.

• A fractional length (e.g. {1fr}): Once all other tracks have been sized, the remaining space will be divided among the fractional tracks according to their fractions. For example, if there are two fractional tracks, each with a fraction of {1fr}, they will each take up half of the remaining space.

To specify a single track, the array can be omitted in favor of a single value. To specify multiple {auto} tracks, enter the number of tracks instead of an array. For example, columns: {3} is equivalent to columns: {(auto, auto, auto)}.

Examples

The example below demonstrates the different track sizing options. It also shows how you can use [grid.cell] to make an individual cell span two grid tracks.

// 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%),
  ),
)

You can also spread an array of strings or content into a grid to populate its cells.

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

Styling the grid { #styling }

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

The grid’s appearance can be customized through different parameters. These are the most important ones:

• align to change how cells are aligned
• inset to optionally add internal padding to cells
• fill to give cells a background
• stroke to optionally enable grid lines with a certain stroke

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

If you need to override the above options for individual cells, you can use the [grid.cell] element. Likewise, you can override individual grid lines with the [grid.hline] and [grid.vline] elements.

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.

Stroke styling precedence

As explained above, there are three ways to set the stroke of a grid cell: through {grid.cell}’s stroke field, by using {grid.hline} and {grid.vline}, or by setting the {grid}’s stroke field. When multiple of these settings are present and conflict, the hline and vline settings take the highest precedence, followed by the cell settings, and finally the grid settings.

Furthermore, strokes of a repeated grid header or footer will take precedence over regular cell strokes.

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.

Fields

columns: Settable<Self, 0u8>

rows: Settable<Self, 1u8>

column_gutter: Settable<Self, 3u8>

row_gutter: Settable<Self, 4u8>

inset: Settable<Self, 5u8>

align: Settable<Self, 6u8>

fill: Settable<Self, 7u8>

stroke: Settable<Self, 8u8>

children: Vec<GridChild>

grid: Option<Arc<CellGrid>>

Implementations

impl GridElem

pub fn new(children: Vec<GridChild>) -> Self

Create a new instance of the element.

pub fn with_columns(self, columns: TrackSizings) -> Self

Builder-style setter for the columns field.

pub fn with_rows(self, rows: TrackSizings) -> Self

Builder-style setter for the rows field.

pub fn with_column_gutter(self, column_gutter: TrackSizings) -> Self

Builder-style setter for the column-gutter field.

pub fn with_row_gutter(self, row_gutter: TrackSizings) -> Self

Builder-style setter for the row-gutter field.

pub fn with_inset(self, inset: Celled<Sides<Option<Rel<Length>>>>) -> Self

Builder-style setter for the inset field.

pub fn with_align(self, align: Celled<Smart<Alignment>>) -> Self

Builder-style setter for the align field.

pub fn with_fill(self, fill: Celled<Option<Paint>>) -> Self

Builder-style setter for the fill field.

pub fn with_stroke( self, stroke: Celled<Sides<Option<Option<Arc<Stroke>>>>>, ) -> Self

Builder-style setter for the stroke field.

pub fn with_grid(self, grid: Arc<CellGrid>) -> Self

Builder-style setter for the grid field.

impl GridElem

pub const columns: Field<Self, 0u8>

pub const rows: Field<Self, 1u8>

pub const column_gutter: Field<Self, 3u8>

pub const row_gutter: Field<Self, 4u8>

pub const inset: Field<Self, 5u8>

pub const align: Field<Self, 6u8>

pub const fill: Field<Self, 7u8>

pub const stroke: Field<Self, 8u8>

pub const children: Field<Self, 9u8>

pub const grid: Field<Self, 10u8>

Trait Implementations

impl Clone for GridElem

fn clone(&self) -> GridElem

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Construct for GridElem

fn construct(engine: &mut Engine<'_>, args: &mut Args) -> SourceResult<Content>

Construct an element from the arguments.

impl Debug for GridElem

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl ExternalField<2> for GridElem

const FIELD: ExternalFieldData<Self, 2u8>

type Type = TrackSizings

impl Hash for GridElem

fn hash<__H: Hasher>(&self, state: &mut __H)

Feeds this value into the given Hasher.

fn hash_slice<H>(data: &[Self], state: &mut H)

where H: Hasher, Self: Sized,

Feeds a slice of this type into the given Hasher.

impl NativeElement for GridElem

const ELEM: Element

The associated element.

fn pack(self) -> Content

Pack the element into type-erased content.

impl NativeScope for GridElem

fn constructor() -> Option<&'static NativeFuncData>

The constructor function for the type, if any.

fn scope() -> Scope

Get the associated scope for the type.

impl RequiredField<9> for GridElem

const FIELD: RequiredFieldData<Self, 9u8>

type Type = Vec<GridChild>

impl Set for GridElem

fn set(engine: &mut Engine<'_>, args: &mut Args) -> SourceResult<Styles>

Parse relevant arguments into style properties for this element.

impl SettableField<0> for GridElem

const FIELD: SettableFieldData<Self, 0u8>

type Type = TrackSizings

impl SettableField<1> for GridElem

const FIELD: SettableFieldData<Self, 1u8>

type Type = TrackSizings

impl SettableField<3> for GridElem

const FIELD: SettableFieldData<Self, 3u8>

type Type = TrackSizings

impl SettableField<4> for GridElem

const FIELD: SettableFieldData<Self, 4u8>

type Type = TrackSizings

impl SettableField<5> for GridElem

const FIELD: SettableFieldData<Self, 5u8>

type Type = Celled<Sides<Option<Rel>>>

impl SettableField<6> for GridElem

const FIELD: SettableFieldData<Self, 6u8>

type Type = Celled<Smart<Alignment>>

impl SettableField<7> for GridElem

const FIELD: SettableFieldData<Self, 7u8>

type Type = Celled<Option<Paint>>

impl SettableField<8> for GridElem

const FIELD: SettableFieldData<Self, 8u8>

type Type = Celled<Sides<Option<Option<Arc<Stroke>>>>>

impl SynthesizedField<10> for GridElem

const FIELD: SynthesizedFieldData<Self, 10u8>

type Type = Arc<CellGrid>

impl RefableProperty<0> for GridElem

impl RefableProperty<1> for GridElem

impl RefableProperty<3> for GridElem

impl RefableProperty<4> for GridElem

impl RefableProperty<6> for GridElem

impl RefableProperty<7> for GridElem