Block

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="block gap:xs" class='demo'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

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

export default Example;

Small

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

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

export default Example;

Medium

<div ods-layout="block gap:md" class='demo'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

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

export default Example;

Large

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

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

export default Example;

Extra Large

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

const Example = () => {
  return (
    <div ods-layout="block gap:xl" 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="block gap:sm center" class='demo h-[300px]'>
  <div>1</div>
  <div>2</div>
</div>

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

export default Example;

Block Start

<div ods-layout="block gap:sm block:start" class='demo h-[300px]'>
  <div>1</div>
  <div>2</div>
</div>

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

export default Example;

Block Center

<div ods-layout="block gap:sm block:center" class='demo h-[300px]'>
  <div>1</div>
  <div>2</div>
</div>

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

export default Example;

Block End

<div ods-layout="block gap:sm block:end" class='demo h-[300px]'>
  <div>1</div>
  <div>2</div>
</div>

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

export default Example;

Inline Start

<div ods-layout="block gap:sm inline:start" class='demo'>
  <div>1</div>
  <div>2</div>
</div>

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

export default Example;

Inline Center

<div ods-layout="block gap:sm" class='demo'>
  <div>1</div>
  <div ods-layout="inline:center">2</div>
  <div>3</div>
</div>

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

export default Example;

Inline End

<div ods-layout="block gap:sm inline:end" class='demo'>
  <div>1</div>
  <div>2</div>
</div>

const Example = () => {
  return (
    <div ods-layout="block gap:sm inline:end" className='demo'>
      <div>1</div>
      <div>2</div>
    </div>
  )
}

export default Example;

Item Alignment

Similar to controling the alignment above, you can align individual items separately from the rest of the items within the layout group.

Center

<div ods-layout="block gap:sm" class='demo h-[300px]'>
  <div ods-layout="center">1</div>
</div>

const Example = () => {
  return (
    <div ods-layout="block gap:sm" className='demo h-[300px]'>
      <div ods-layout="center">1</div>
    </div>
  )
}

export default Example;

Block Start

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

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

export default Example;

Block Center

<div ods-layout="block gap:sm" class='demo h-[300px]'>
  <div ods-layout="block:center">1</div>
</div>

const Example = () => {
  return (
    <div ods-layout="block gap:sm" className='demo h-[300px]'>
      <div ods-layout="block:center">1</div>
    </div>
  )
}

export default Example;

Block End

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

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

export default Example;

Inline Start

<div ods-layout="block gap:sm inline:end" class="demo">
  <div>1</div>
  <div ods-layout="inline:start">2</div>
  <div>3</div>
</div>

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

export default Example;

Inline Center

<div ods-layout="block gap:sm" class='demo'>
  <div>1</div>
  <div ods-layout="inline:center">2</div>
  <div>3</div>
</div>

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

export default Example;

Inline End

<div ods-layout="block gap:sm" class='demo'>
  <div>1</div>
  <div ods-layout="inline:end">2</div>
  <div>3</div>
</div>

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

export default Example;

Stretch

Inline Stretch

Use align:stretch to allow items to fill the space horizontally within the parent layout container.

<div ods-layout="block gap:sm align:inline-stretch" class="demo">
  <div>1</div>
  <div>2</div>
</div>

const Example = () => {
  return (
    <div ods-layout="block gap:sm align:inline-stretch" className="demo">
      <div>1</div>
      <div>2</div>
    </div>
  )
}

export default Example;

Block Stretch

Use align:inline-stretch to allow items to fill the space vertically within the parent layout container.

<div ods-layout="block gap:sm align:block-stretch" class="demo">
  <div>1</div>
  <div>2</div>
</div>

const Example = () => {
  return (
    <div ods-layout="block gap:sm align:block-stretch" className="demo">
      <div>1</div>
      <div>2</div>
    </div>
  )
}

export default Example;