v2.1.0

Columns

  • Basic

    If you don't specify a size, the interior elements automatically divide the width.
    <div class="columns text-center">
      <div class="column box">
        <p>First</p>
      </div>
      <div class="column box">
        <p>Second</p>
      </div>
      <div class="column box">
        <p>Third</p>
      </div>
      <div class="column box">
        <p>Fourth</p>
      </div>
    </div>
    
    <style>
      .box {
        background: rgba(198, 215, 255, 0.897);
        border: thin solid rgb(190, 190, 190);
      }
    </style>
    

    First

    Second

    Third

    Fourth

  • Size

    Users can divide up to 12 columns of space for one row.

    Options for assigning sizes for each column are size-1, size-2, ... Used with size-12.
    <div class="layout">
      <div class="columns text-center">
        <div class="column size-1 box">
          <p>size1</p>
        </div>
        <div class="column size-2 box">
          <p>size2</p>
        </div>
        <div class="column size-3 box">
          <p>size3</p>
        </div>
        <div class="column size-4 box">
          <p>size4</p>
        </div>
      </div>
    
      <div class="columns text-center">
        <div class="column size-5 box">
          <p>size5</p>
        </div>
        <div class="column size-6 box">
          <p>size6</p>
        </div>
      </div>
    
      <div class="columns text-center">
        <div class="column size-7 box">
          <p>size7</p>
        </div>
      </div>
    
      <div class="columns text-center">
        <div class="column size-8 box">
          <p>size8</p>
        </div>
      </div>
    
      <div class="columns text-center">
        <div class="column size-9 box">
          <p>size9</p>
        </div>
      </div>
    
      <div class="columns text-center">
        <div class="column size-10 box">
          <p>size10</p>
        </div>
      </div>
    
      <div class="columns text-center">
        <div class="column size-11 box">
          <p>size11</p>
        </div>
      </div>
    
      <div class="columns text-center">
        <div class="column size-12 box">
          <p>size12</p>
        </div>
      </div>
    </div>
    
    <style>
      .layout {
        background: rgba(225, 234, 255, 0.897);
      }
      .box {
        background: rgba(198, 215, 255, 0.897);
        border: thin solid rgb(190, 190, 190);
      }
    </style>
    

    size1

    size2

    size3

    size4

    size5

    size6

    size7

    size8

    size9

    size10

    size11

    size12

  • Order

    Users can specify order options based on the left side of the display order for each column, regardless of the order in which the code is written.

    Order options are used as order-1, order-2, ...order-12.
    <div class="columns text-center">
      <div class="column size-1 order-12 box">
        <p>ord12</p>
      </div>
      <div class="column size-1 order-11 box">
        <p>ord11</p>
      </div>
      <div class="column size-1 order-10 box">
        <p>ord10</p>
      </div>
      <div class="column size-1 order-9 box">
        <p>ord9</p>
      </div>
      <div class="column size-1 order-8 box">
        <p>ord8</p>
      </div>
      <div class="column size-1 order-7 box">
        <p>ord7</p>
      </div>
      <div class="column size-1 order-1 box">
        <p>ord1</p>
      </div>
      <div class="column size-1 order-2 box">
        <p>ord2</p>
      </div>
      <div class="column size-1 order-3 box">
        <p>ord3</p>
      </div>
      <div class="column size-1 order-4 box">
        <p>ord4</p>
      </div>
      <div class="column size-1 order-5 box">
        <p>ord5</p>
      </div>
      <div class="column size-1 order-6 box">
        <p>ord6</p>
      </div>
    </div>
    
    <style>
      .box {
        background: rgba(198, 215, 255, 0.897);
        border: thin solid rgb(190, 190, 190);
      }
    </style>
    

    ord12

    ord11

    ord10

    ord9

    ord8

    ord7

    ord1

    ord2

    ord3

    ord4

    ord5

    ord6

  • Interval

    You can use interval-1, interval-2, interval-3 classes to adjust the spacing of elements in each column of columns.
    <div class="columns text-center interval-1">
      <div class="column size-4 box2">
        <div class="outset-neomo p-1 m-1">interval1</div>
      </div>
      <div class="column size-4 box2">
        <div class="outset-neomo p-1 m-1">interval1</div>
      </div>
      <div class="column size-4 box2">
        <div class="outset-neomo p-1 m-1">interval1</div>
      </div>
    </div>
    
    <div class="columns text-center interval-2">
      <div class="column size-4 box2">
        <div class="outset-neomo p-1 m-1">interval2</div>
      </div>
      <div class="column size-4 box2">
        <div class="outset-neomo p-1 m-1">interval2</div>
      </div>
      <div class="column size-4 box2">
        <div class="outset-neomo p-1 m-1">interval2</div>
      </div>
    </div>
    
    <div class="columns text-center interval-3">
      <div class="column size-4 box2">
        <div class="outset-neomo p-1 m-1">interval3</div>
      </div>
      <div class="column size-4 box2">
        <div class="outset-neomo p-1 m-1">interval3</div>
      </div>
      <div class="column size-4 box2">
        <div class="outset-neomo p-1 m-1">interval3</div>
      </div>
    </div>
    
    <style>
      .box2 {
        border: thin solid rgb(190, 190, 190);
      }
    </style>
    
    interval1
    interval1
    interval1
    interval2
    interval2
    interval2
    interval3
    interval3
    interval3
  • Justify

    The just-left, just-center, and just-right options allow you to adjust the left/right alignment in one row.
    <div class="layout text-center">
      <div class="columns just-left">
        <div class="column size-3 box">
          <p>Left1</p>
        </div>
        <div class="column size-3 box">
          <p>Left2</p>
        </div>
        <div class="column size-3 box">
          <p>Left3</p>
        </div>
      </div>
    
      <div class="columns just-center">
        <div class="column size-3 box">
          <p>Center1</p>
        </div>
        <div class="column size-3 box">
          <p>Center2</p>
        </div>
        <div class="column size-3 box">
          <p>Center3</p>
        </div>
      </div>
    
      <div class="columns just-right">
        <div class="column size-3 box">
          <p>Right1</p>
        </div>
        <div class="column size-3 box">
          <p>Right2</p>
        </div>
        <div class="column size-3 box">
          <p>Right3</p>
        </div>
      </div>
    </div>
    
    <style>
      .layout {
        background: rgba(225, 234, 255, 0.897);
      }
      .box {
        background: rgba(198, 215, 255, 0.897);
        border: thin solid rgb(190, 190, 190);
      }
    </style>
    

    Left1

    Left2

    Left3

    Center1

    Center2

    Center3

    Right1

    Right2

    Right3

  • Alignment

    Use the align-top, align-mid, and align-bottom options to adjust the top/middle/bottom alignment in one row.
    <div class="layout text-center">
      <div
        class="columns align-top"
        style="border: gray 1px solid; min-height: 10rem"
      >
        <div class="column size-4 box">
          <p>Top1</p>
        </div>
        <div class="column size-4 box">
          <p>Top2</p>
        </div>
        <div class="column size-4 box">
          <p>Top3</p>
        </div>
      </div>
    
      <div
        class="columns align-mid"
        style="border: gray 1px solid; min-height: 10rem"
      >
        <div class="column size-4 box">
          <p>Mid1</p>
        </div>
        <div class="column size-4 box">
          <p>Mid2</p>
        </div>
        <div class="column size-4 box">
          <p>Mid3</p>
        </div>
      </div>
    
      <div
        class="columns align-bottom"
        style="border: gray 1px solid; min-height: 10rem"
      >
        <div class="column size-4 box">
          <p>Bottom1</p>
        </div>
        <div class="column size-4 box">
          <p>Bottom2</p>
        </div>
        <div class="column size-4 box">
          <p>Bottom3</p>
        </div>
      </div>
    </div>
    
    <style>
      .layout {
        background: rgba(225, 234, 255, 0.897);
      }
      .box {
        background: rgba(198, 215, 255, 0.897);
        border: thin solid rgb(190, 190, 190);
      }
    </style>
    

    Top1

    Top2

    Top3

    Mid1

    Mid2

    Mid3

    Bottom1

    Bottom2

    Bottom3

  • Responsive

    By default, all rows appear reactive around 992 based on the width of the window.

    The static option allows the user to disable this responsiveness.
    <div class="columns text-center">
      <div class="column size-4">
        <p class="outset-neomo m-1 p-2">responsive</p>
      </div>
      <div class="column size-4">
        <p class="outset-neomo m-1 p-2">responsive</p>
      </div>
      <div class="column size-4">
        <p class="outset-neomo m-1 p-2">responsive</p>
      </div>
    </div>
    
    <div class="columns text-center static">
      <div class="column size-4 order-12">
        <p class="outset-neomo m-1 p-2">non responsive</p>
      </div>
      <div class="column size-4 order-11">
        <p class="outset-neomo m-1 p-2">non responsive</p>
      </div>
      <div class="column size-4 order-10">
        <p class="outset-neomo m-1 p-2">non responsive</p>
      </div>
    </div>
    

    responsive

    responsive

    responsive

    non responsive

    non responsive

    non responsive