Class GridItem


public class GridItem extends StyledElement<GridItem>
A grid item wrapper for controlling placement and spanning within a CSS Grid.

GridItem wraps content to provide control over its position and size within a Grid container. It supports column/row spanning, explicit positioning, and self-alignment overrides.

Features:

  • Column and row spanning
  • Explicit grid position placement
  • Self-alignment within grid cell
  • Named grid area support

Usage:


 Grid grid = new Grid(4);

 // Header spanning all 4 columns
 GridItem header = new GridItem();
 header.spanColumns(4);
 header.addElement(new H1("Page Title"));
 grid.addElement(header);

 // Sidebar spanning 2 rows
 GridItem sidebar = new GridItem();
 sidebar.spanRows(2);
 sidebar.addElement(navigation);
 grid.addElement(sidebar);

 // Item at specific position
 GridItem item = new GridItem();
 item.setColumn(2).setRow(3);
 grid.addElement(item);

 // Wrap existing element
 GridItem wrapped = new GridItem(existingDiv);
 wrapped.spanColumns(2);
 grid.addElement(wrapped);
 
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:
  • Constructor Details

    • GridItem

      public GridItem()
      Constructs an empty grid item.
    • GridItem

      public GridItem(Element<?> content)
      Constructs a grid item containing the specified element.
      Parameters:
      content - the element to wrap
  • Method Details

    • spanColumns

      public GridItem spanColumns(int span)
      Sets the number of columns this item spans.
      Parameters:
      span - the number of columns to span
      Returns:
      this GridItem for method chaining
    • spanRows

      public GridItem spanRows(int span)
      Sets the number of rows this item spans.
      Parameters:
      span - the number of rows to span
      Returns:
      this GridItem for method chaining
    • span

      public GridItem span(int columnSpan, int rowSpan)
      Sets both column and row spanning.
      Parameters:
      columnSpan - the number of columns to span
      rowSpan - the number of rows to span
      Returns:
      this GridItem for method chaining
    • setColumn

      public GridItem setColumn(int column)
      Sets the starting column for this item (1-based).
      Parameters:
      column - the column number (1-based)
      Returns:
      this GridItem for method chaining
    • setRow

      public GridItem setRow(int row)
      Sets the starting row for this item (1-based).
      Parameters:
      row - the row number (1-based)
      Returns:
      this GridItem for method chaining
    • setPosition

      public GridItem setPosition(int column, int row)
      Sets both the starting column and row for this item.
      Overrides:
      setPosition in class StyledElement<GridItem>
      Parameters:
      column - the column number (1-based)
      row - the row number (1-based)
      Returns:
      this GridItem for method chaining
    • setColumnRange

      public GridItem setColumnRange(int start, int end)
      Sets the column start and end positions.
      Parameters:
      start - the starting column (1-based)
      end - the ending column (exclusive, 1-based)
      Returns:
      this GridItem for method chaining
    • setRowRange

      public GridItem setRowRange(int start, int end)
      Sets the row start and end positions.
      Parameters:
      start - the starting row (1-based)
      end - the ending row (exclusive, 1-based)
      Returns:
      this GridItem for method chaining
    • setArea

      public GridItem setArea(String areaName)
      Assigns this item to a named grid area.

      The grid container must define corresponding named areas using grid-template-areas.

      Parameters:
      areaName - the name of the grid area
      Returns:
      this GridItem for method chaining
    • setAlignSelf

      public GridItem setAlignSelf(AlignSelf align)
      Sets the vertical alignment of this item within its grid cell.
      Overrides:
      setAlignSelf in class StyledElement<GridItem>
      Parameters:
      align - the alignment value
      Returns:
      this GridItem for method chaining
    • setJustifySelf

      public GridItem setJustifySelf(String justify)
      Sets the horizontal alignment of this item within its grid cell.
      Parameters:
      justify - the justification value (e.g., "start", "center", "end", "stretch")
      Returns:
      this GridItem for method chaining
    • center

      public GridItem center()
      Centers this item both horizontally and vertically within its grid cell.
      Returns:
      this GridItem for method chaining