Package com.oorian.html.layout

Class Grid

java.lang.Object
com.oorian.html.Element<Grid>
com.oorian.html.VisualElement<Grid>
com.oorian.html.StyledElement<Grid>
com.oorian.html.layout.Grid
public class Grid extends StyledElement<Grid>
A CSS Grid layout container for two-dimensional layouts.

Grid provides a simplified API for CSS Grid Layout, enabling powerful two-dimensional layouts with rows and columns. It supports common patterns like equal-width columns, auto-fit/auto-fill responsive grids, and custom template definitions.

Features:

  • Simple column count configuration
  • Auto-fit responsive columns
  • Custom column and row templates
  • Gap control for both axes
  • Alignment and justification

Usage:


 // Simple 3-column grid
 Grid grid = new Grid(3);
 grid.setGap(16);
 grid.addElement(card1);
 grid.addElement(card2);
 grid.addElement(card3);

 // Responsive grid - auto-fit columns, minimum 250px
 Grid responsive = new Grid();
 responsive.autoFit(250).setGap(24);

 // Custom template
 Grid custom = new Grid();
 custom.setColumns("200px 1fr 200px");
 custom.setRows("auto 1fr auto");

 // Grid with GridItem for spanning
 Grid layout = new Grid(4);
 layout.addElement(new GridItem(header).spanColumns(4));
 layout.addElement(new GridItem(sidebar).spanRows(2));
 layout.addElement(content);
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:

  • Constructor Details

    • Grid

      public Grid()
      Constructs an empty grid container.

      The grid has no columns defined by default. Use setColumns(int), setColumns(String), or autoFit(int) to define the column structure.

    • Grid

      public Grid(int columns)
      Constructs a grid with the specified number of equal-width columns.
      Parameters:
      columns - the number of columns

    • Grid

      public Grid(int columns, int gap)
      Constructs a grid with the specified number of columns and gap.
      Parameters:
      columns - the number of columns
      gap - the gap between grid items in pixels

  • Method Details

    • setColumns

      public Grid setColumns(int columns)
      Sets the number of equal-width columns using repeat(n, 1fr).
      Parameters:
      columns - the number of columns
      Returns:
      this Grid for method chaining

    • setColumns

      public Grid setColumns(String template)
      Sets the grid columns using a custom template string.

      Common patterns:

      • "1fr 1fr 1fr" - Three equal columns
      • "200px 1fr" - Fixed sidebar with flexible main
      • "repeat(4, 1fr)" - Four equal columns
      • "minmax(200px, 1fr) 2fr" - Minimum width column
      Overrides:
      setColumns in class StyledElement<Grid>
      Parameters:
      template - the CSS grid-template-columns value
      Returns:
      this Grid for method chaining

    • setColumns

      public Grid setColumns(ResponsiveValue<Integer> columns)
      Sets responsive column counts that vary by breakpoint.

      Uses mobile-first approach where smaller breakpoint values cascade up until overridden by a larger breakpoint value.

      Example:

      
 // 1 column on mobile, 2 on tablets, 4 on desktop
 grid.setColumns(ResponsiveValue.of(1).md(2).lg(4));

 // 2 columns on mobile, 3 on large screens
 grid.setColumns(ResponsiveValue.of(2).lg(3));

      This generates appropriate CSS media queries to change the column count at each specified breakpoint.

      Parameters:
      columns - the responsive column counts
      Returns:
      this Grid for method chaining

    • setRows

      public Grid setRows(int rows)
      Sets the number of rows using repeat(n, 1fr).
      Parameters:
      rows - the number of rows
      Returns:
      this Grid for method chaining

    • setRows

      public Grid setRows(String template)
      Sets the grid rows using a custom template string.

      Common patterns:

      • "auto 1fr auto" - Header, flexible content, footer
      • "100px 1fr" - Fixed header with flexible body
      • "repeat(3, minmax(100px, auto))" - Three auto-height rows
      Parameters:
      template - the CSS grid-template-rows value
      Returns:
      this Grid for method chaining

    • autoFit

      public Grid autoFit(int minWidthPx)
      Creates a responsive grid with auto-fitting columns of minimum width.

      Uses repeat(auto-fit, minmax(minWidth, 1fr)) to automatically create as many columns as will fit, with each column at least the minimum width.

      Parameters:
      minWidthPx - the minimum column width in pixels
      Returns:
      this Grid for method chaining

    • autoFit

      public Grid autoFit(String minWidth)
      Creates a responsive grid with auto-fitting columns of minimum width.
      Parameters:
      minWidth - the minimum column width (e.g., "250px", "20rem")
      Returns:
      this Grid for method chaining

    • autoFill

      public Grid autoFill(int minWidthPx)
      Creates a responsive grid with auto-fill columns of minimum width.

      Similar to autoFit(int) but creates empty columns if space allows, rather than stretching existing columns.

      Parameters:
      minWidthPx - the minimum column width in pixels
      Returns:
      this Grid for method chaining

    • autoFill

      public Grid autoFill(String minWidth)
      Creates a responsive grid with auto-fill columns of minimum width.
      Parameters:
      minWidth - the minimum column width (e.g., "250px", "20rem")
      Returns:
      this Grid for method chaining

    • setGap

      public Grid setGap(int gap)
      Sets the gap between grid items (both row and column).
      Overrides:
      setGap in class StyledElement<Grid>
      Parameters:
      gap - the gap in pixels
      Returns:
      this Grid for method chaining

    • setGap

      public Grid setGap(String gap)
      Sets the gap between grid items (both row and column).
      Overrides:
      setGap in class StyledElement<Grid>
      Parameters:
      gap - the gap value (e.g., "1rem", "16px")
      Returns:
      this Grid for method chaining

    • setGap

      public Grid setGap(int rowGap, int columnGap)
      Sets separate row and column gaps.
      Overrides:
      setGap in class StyledElement<Grid>
      Parameters:
      rowGap - the row gap in pixels
      columnGap - the column gap in pixels
      Returns:
      this Grid for method chaining

    • setGap

      public Grid setGap(ResponsiveValue<Integer> gap)
      Sets responsive gap sizes that vary by breakpoint.

      Uses mobile-first approach where smaller breakpoint values cascade up until overridden by a larger breakpoint value.

      Example:

      
 // 8px gap on mobile, 16px on tablets, 24px on desktop
 grid.setGap(ResponsiveValue.of(8).md(16).lg(24));
      Parameters:
      gap - the responsive gap values in pixels
      Returns:
      this Grid for method chaining

    • setJustifyItems

      public Grid setJustifyItems(JustifyContent justify)
      Sets the horizontal alignment of items within their grid cells.
      Parameters:
      justify - the justification value
      Returns:
      this Grid for method chaining

    • setAlignItems

      public Grid setAlignItems(AlignItems align)
      Sets the vertical alignment of items within their grid cells.
      Overrides:
      setAlignItems in class StyledElement<Grid>
      Parameters:
      align - the alignment value
      Returns:
      this Grid for method chaining

    • centerItems

      public Grid centerItems()
      Centers all items both horizontally and vertically within their cells.
      Returns:
      this Grid for method chaining