Inline

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

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

export default Example;

Small

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

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

export default Example;

Medium

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

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

export default Example;

Large

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

const Example = () => {
  return (
    <div ods-layout="inline 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="inline gap:xl" class='demo'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

const Example = () => {
  return (
    <div ods-layout="inline 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="inline gap:sm center" class='demo'>
  <div>1</div>
  <div>2</div>
</div>

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

export default Example;

Block Start

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

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

export default Example;

Block Center

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

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

export default Example;

Block End

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

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

export default Example;

Inline Start

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

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

export default Example;

Inline Center

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

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

export default Example;

Inline End

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

const Example = () => {
  return (
    <div ods-layout="inline 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="inline gap:sm" class='demo'>
  <div ods-layout="center">1</div>
</div>

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

export default Example;

Block Start

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

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

export default Example;

Block Center

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

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

export default Example;

Block End

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

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

export default Example;

Inline Start

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

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

export default Example;

Inline Center

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

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

export default Example;

Inline End

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

const Example = () => {
  return (
    <div ods-layout="inline gap:sm" className="demo">
      <div ods-layout="inline:end">1</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="inline gap:sm stretch" class="demo h-[150px]">
  <div>1</div>
  <div>2</div>
</div>

const Example = () => {
  return (
    <div ods-layout="inline gap:sm stretch" className="demo h-[150px]">
      <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="inline gap:sm block:stretch" class="demo h-[250px]">
  <div>1</div>
  <div>2</div>
</div>

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

export default Example;

Wrap

By default inline layouts allow items to wrap within the parent layout container.

<div ods-layout="inline gap:sm" class="demo w-[175px]">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

const Example = () => {
  return (
    <div ods-layout="inline gap:sm" className="demo w-[175px]">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  )
}

export default Example;

No Wrap

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

<div ods-layout="inline gap:sm wrap:none" class="demo w-[150px]">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

const Example = () => {
  return (
    <div ods-layout="inline gap:sm wrap:none" className="demo w-[150px]">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  )
}

export default Example;