Grid

Columns

Explicit Columns

Columns that are not uniform can define their column span value directly on the column element. Column properties can be placed directly on the element with no need for wrapper elements.

<div ods-layout="grid gap:sm" class="demo">
  <div ods-layout="col:4">4</div>
  <div ods-layout="col:8">8</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm" className="demo">
      <div ods-layout="col:4">4</div>
      <div ods-layout="col:8">8</div>
    </div>
  )
}

export default Example;

Auto Columns

Auto layout columns will fill the available space evenly accross all child elements without needing to define specific column values.

<div ods-layout="grid gap:sm cols:auto" class="demo">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm cols:auto" className="demo">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  )
}

export default Example;

Nested Columns

Grid Columns can be nested. Nested columns themselves can also be host grids containing additional columns.

<div ods-layout="grid gap:sm cols:6" class="demo">
  <div ods-layout="grid gap:sm cols:4" class="demo">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm cols:6" className="demo">
      <div ods-layout="grid gap:sm cols:4" className="demo">
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>

      <div>4</div>
    </div>
  )
}

export default Example;

Responsive

Implicit Columns

Columns can be set to container query breakpoints.

<div ods-layout="grid gap:sm cols:12 cols:6@sm cols:3@md" class="demo">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm cols:12 cols:6@sm cols:3@md" className="demo">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  )
}

export default Example;

Explicit Columns

<div ods-layout="grid gap:sm" class="demo">
  <div ods-layout="col:4@sm">4</div>
  <div ods-layout="col:8@sm">8</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm" className="demo">
      <div ods-layout="col:4@sm">4</div>
      <div ods-layout="col:8@sm">8</div>
    </div>
  )
}

export default Example;

Gap

Gaps allow control of white space between layout items. Gaps can be set via t-shirt sizes, xs, sm, md, lg, xl.

Extra Small

<div ods-layout="grid gap:xs cols:3" class="demo">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:xs cols:3" className="demo">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  )
}

export default Example;

Small

<div ods-layout="grid gap:sm cols:3" class="demo">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm cols:3" className="demo">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  )
}

export default Example;

Medium

<div ods-layout="grid gap:sm cols:3" class="demo">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm cols:3" className="demo">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  )
}

export default Example;

Large

<div ods-layout="grid gap:lg cols:3" class="demo">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:lg cols:3" className="demo">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  )
}

export default Example;

Extra Large

<div ods-layout="grid gap:xl cols:3" class="demo">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:xl cols:3" className="demo">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  )
}

export default Example;

Alignment

Control the item alignment within the layout container. Block alignment runs along the vertical axis and inline alignment run on the horizontal axis.

Center

<div ods-layout="grid cols:auto gap:sm center" class="demo">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid cols:auto gap:sm center" className="demo">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>

  )
}

export default Example;

Block Start

<div ods-layout="grid gap:sm block:start" class="demo h-[150px]">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm block:start" className="demo h-[150px]">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  )
}

export default Example;

Block Center

<div ods-layout="grid gap:sm block:center" class="demo h-[150px]">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm block:center" className="demo h-[150px]">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>

  )
}

export default Example;

Block End

<div ods-layout="grid gap:sm block:end" class="demo h-[150px]">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm block:end" className="demo h-[150px]">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  )
}

export default Example;

Inline Start

<div ods-layout="grid gap:sm cols:auto inline:start" class="demo">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm cols:auto inline:start" className="demo">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  )
}

export default Example;

Inline Center

<div ods-layout="grid gap:sm cols:auto inline:center" class="demo">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm cols:auto inline:center" className="demo">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  )
}

export default Example;

Inline End

<div ods-layout="grid gap:sm cols:auto inline:end" class="demo">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm cols:auto inline:end" className="demo">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  )
}

export default Example;

Stretch

Stretch alignments allow items to fill the space within the parent layout container. Inline stretch for columns must use auto placement as inline stretch negates column positioning.

Inline Stretch

<div ods-layout="grid gap:sm cols:auto inline:stretch" class="demo">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm cols:auto inline:stretch" className="demo">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  )
}

export default Example;

Block Stretch

<div ods-layout="grid gap:sm block:stretch" class="demo h-[150px]">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm block:stretch" className="demo h-[150px]">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  )
}

export default Example;

Stretch All

<div ods-layout="grid gap:sm cols:auto stretch" class="demo h-[150px]">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm cols:auto stretch" className="demo h-[150px]">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  )
}

export default Example;

Column Start and End

Column start and end positioning can be controlled across the 12 column grid.

Start

<div ods-layout="grid gap:sm" class="demo">
  <div ods-layout="col:start-2 ">1</div>
  <div ods-layout="col:start-1">2</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm" className="demo">
      <div ods-layout="col:start-2 ">1</div>
      <div ods-layout="col:start-1">2</div>
    </div>
  )
}

export default Example;

End

<div ods-layout="grid gap:sm" class="demo">
  <div ods-layout="col:start-3 col:8">1</div>
  <div ods-layout="col:start-1 col:end-5">2</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm" className="demo">
      <div ods-layout="col:start-3 col:8">1</div>
      <div ods-layout="col:start-1 col:end-5">2</div>
    </div>
  )
}

export default Example;

Start and End

<div ods-layout="grid gap:sm" class="demo">
  <div ods-layout="col:start-3 col:8">1</div>
  <div ods-layout="col:start-1 col:end-5">2</div>
  <div ods-layout="col:4 col:end-13">3</div>
  <div ods-layout="col:start-1 col:end-13">4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="grid gap:sm" className="demo">
      <div ods-layout="col:start-3 col:8">1</div>
      <div ods-layout="col:start-1 col:end-5">2</div>
      <div ods-layout="col:4 col:end-13">3</div>
      <div ods-layout="col:start-1 col:end-13">4</div>
    </div>
  )
}

export default Example;

Row Start and End

Row start and end positioning can be controlled across the 12 row grid.

<div ods-layout="grid cols:4 gap:sm" class="demo">
  <div ods-layout="row:4 row:start-6">1</div>
  <div ods-layout="row:6 row:start-4">2</div>
  <div ods-layout="row:12">3</div>
</div>

<div ods-layout="grid cols:4 gap:sm" class="demo">
  <div ods-layout="row:4 row:start-6">1</div>
  <div ods-layout="row:6 row:start-4">2</div>
  <div ods-layout="row:12">3</div>
</div>