Simple Grid System (v1.3.0)

RWD for desktop, tablet, mobile screen sizing
12 column, 16 column, 10 column grid system
Automatic line breaks
Custom column width or auto changes with the content
Flexible, auto fit sizing to fill the remaining space
Offset columns or use margin-auto utilities
Align, distribution, put together
Column breaks, directly break to a new line
Varied responsive design, and Nesting grid
Order of columns
Remove gaps (gutters) of grid, and custom gap width

RWD for desktop, tablet, mobile screen sizing 響應式網頁設計: 桌面、平板、手機 3 種螢幕上自動縮放 🔝

col

col (33.3%)

col (50%)

col (100%)

col (33.3%)

col (50%)

col (100%)

col (33.3%)

col (50%)

col (100%)

col (25%)

col (33.3%)

col (50%)

col (25%)

col (33.3%)

col (50%)

col (25%)

col (33.3%)

col (50%)

col (25%)

col (33.3%)

col (50%)

col (16.6%)

col (25%)

col (50%)

col (16.6%)

col (25%)

col (50%)

col (16.6%)

col (25%)

col (50%)

col (16.6%)

col (25%)

col (50%)

col (16.6%)

col (25%)

col (50%)

col (16.6%)

col (25%)

col (50%)

Source Code

  
    <div class="grid">
      <div class="col"></div>
    </div>

    <div class="grid desktop-3 tablet-2 mobile-1">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>

    <div class="grid desktop-4 tablet-3 mobile-2">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>

    <div class="grid desktop-6 tablet-4 mobile-2">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>

12 column, 16 column, 10 column grid system 擁有 12、16、10 欄位的網格系統 🔝

col-4 50% 100% (grid-12)

col-4 33.3% 50% (grid-16)

col-2 25% 33.3% (grid-10)

Source Code

  
    <div class="grid-12 tablet-2 mobile-1">
      <div class="col-4"></div>
      <div class="col-4"></div>
      <div class="col-4"></div>
    </div>

    <div class="grid-16 tablet-3 mobile-2">
      <div class="col-4"></div>
      <div class="col-4"></div>
      <div class="col-4"></div>
      <div class="col-4"></div>
    </div>

    <div class="grid-10 tablet-4 mobile-3">
      <div class="col-2"></div>
      <div class="col-2"></div>
      <div class="col-2"></div>
      <div class="col-2"></div>
      <div class="col-2"></div>
    </div>

Automatic line breaks 自動換行 🔝

col

col-2

col-4

col-6

col-4

col-6

col-2

Source Code

  
    <div class="grid-12">
      <div class="col"></div>
      <div class="col-2"></div>
      <div class="col-4"></div>
      <div class="col-6"></div>
      <div class="col-4"></div>
      <div class="col-6"></div>
      <div class="col-2"></div>
    </div>

Custom column width or auto changes with the content 自訂欄位的寬度或自動隨著內容而改變 🔝

col-auto

col-auto 150px

col-auto 300px

Source Code

  
    <div class="grid">
      <div class="col-auto"></div>
      <div class="col-auto">
        <p style="width: 150px"></p>
      </div>
      <div class="col-auto">
        <p style="width: 300px"></p>
      </div>
    </div>

Flexible, auto fit sizing to fill the remaining space 彈性伸縮，自動調整大小進而填滿剩餘空間 🔝

col-auto

col flexible

col-auto

col flexible

col-auto

100%

col-auto flexible-tablet

100%

col-auto flexible-tablet

100%

col-3 flexible-tablet

100%

col-6 flexible-tablet

100%

Source Code

  
    <div class="grid">
      <div class="col-auto"></div>
      <div class="col flexible"></div>
    </div>

    <div class="grid">
      <div class="col-auto"></div>
      <div class="col flexible"></div>
      <div class="col flexible"></div>
      <div class="col-auto"></div>
    </div>

    <div class="grid mobile-1">
      <div class="col-auto"></div>
      <div class="col-auto flexible-tablet"></div>
      <div class="col-auto flexible-tablet"></div>
    </div>

    <div class="grid-12 mobile-1">
      <div class="col-3 flexible-tablet"></div>
      <div class="col-6 flexible-tablet"></div>
    </div>

Offset columns or use margin-auto utilities 推移欄位或使用 margin-auto 通用類別 🔝

col-4 offset-1

50%

col-4 offset-2

50%

col-auto

col-auto ml-auto

col-auto

col-auto mx-auto flexible-mobile

Source Code

  
    <div class="grid-12 mobile-2">
      <div class="col-4 offset-1"></div>
      <div class="col-4 offset-2"></div>
    </div>

    <div class="grid">
      <div class="col-auto"></div>
      <div class="col-auto ml-auto"></div>
    </div>

    <div class="grid">
      <div class="col-auto"></div>
      <div class="col-auto mx-auto flexible-mobile"></div>
    </div>

Align, distribution, put together 對齊、分配、集中 🔝

col-3

33.3%

col-3

33.3%

col-3

33.3%

col-3 (align-center)

33.3%

col-3 (align-center)

33.3%

col-3 (align-center)

33.3%

col-3 (align-right)

33.3%

col-3 (align-right)

33.3%

col-3 (align-right)

33.3%

col-3 (align-space-around)

33.3%

col-3 (align-space-around)

33.3%

col-3 (align-space-around)

33.3%

col-3 (align-space-between)

33.3%

col-3 (align-space-between)

33.3%

col-3 (align-space-between)

33.3%

col-4 (align-top)

col-4
(align-top)

col-4 (align-top)

col-4 (align-middle)

col-4
(align-middle)

col-4 (align-middle)

col-4 (align-bottom)

col-4
(align-bottom)

col-4 (align-bottom)

Source Code

  
    <div class="grid-12 mobile-3">
      <div class="col-3"></div>
      <div class="col-3"></div>
      <div class="col-3"></div>
    </div>
    <div class="grid-12 align-center mobile-3">
      <div class="col-3"></div>
      <div class="col-3"></div>
      <div class="col-3"></div>
    </div>
    <div class="grid-12 align-right mobile-3">
      <div class="col-3"></div>
      <div class="col-3"></div>
      <div class="col-3"></div>
    </div>
    <div class="grid-12 align-space-around mobile-3">
      <div class="col-3"></div>
      <div class="col-3"></div>
      <div class="col-3"></div>
    </div>
    <div class="grid-12 align-space-between mobile-3">
      <div class="col-3"></div>
      <div class="col-3"></div>
      <div class="col-3"></div>
    </div>
    <div class="grid-12 align-top">
      <div class="col-4"></div>
      <div class="col-4"></div>
      <div class="col-4"></div>
    </div>
    <div class="grid-12 align-middle">
      <div class="col-4"></div>
      <div class="col-4"></div>
      <div class="col-4"></div>
    </div>
    <div class="grid-12 align-bottom">
      <div class="col-4"></div>
      <div class="col-4"></div>
      <div class="col-4"></div>
    </div>

Column breaks, directly break to a new line 中斷欄位，直接跳到新的一行 🔝

col-6 (align-center)

50% (align-center)

100%

col-5 (align-center)

50% (align-center)

100%

col-5 (align-center)

50% (align-center)

100%

col-5 (align-center)

50% (align-center)

100%

col-5 (align-center)

50% (align-center)

100%

Source Code

  
    <div class="grid-12 align-center mobile-1 tablet-2">
      <div class="col-6"></div>
      <div class="w-100"></div>
      <div class="col-5"></div>
      <div class="col-5"></div>
      <div class="w-100"></div>
      <div class="col-5"></div>
      <div class="col-5"></div>
    </div>

Varied responsive design, and Nesting grid 多變化的響應式設計、巢狀疊層的網格 🔝

col

33.3%

50%

col

33.3%

50%

col hidden-mobile

33.3% hidden-mobile

col hidden-tablet-mobile

col-3 flexible hidden-mobile

col-6 flexible

col-3 hidden-tablet-mobile

col-9 flexible -> 50%

col-9 flexible -> 100%

col-9 flexible -> 50%

col-9 flexible -> 100%

col-9 flexible -> 50%

col-9 flexible -> 100%

col-9 flexible -> 50%

col-9 flexible -> 100%

col-3 show-only-desktop

col-auto 150px

col-9 flexible -> col-3 -> col flexible

col-9 flexible -> 100% -> col flexible

col-9 flexible -> col-9

col-9 flexible -> 100%

col-3 show-only-desktop

Source Code

  
    <div class="grid desktop-4 tablet-3 mobile-2">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col hidden-mobile"></div>
      <div class="col hidden-tablet-mobile"></div>
    </div>

    <div class="grid-12">
      <div class="col-3 flexible hidden-mobile"></div>
      <div class="col-6 flexible"></div>
      <div class="col-3 hidden-tablet-mobile"></div>
    </div>

    <div class="grid-12">
      <div class="col-9 flexible">
        <div class="grid mobile-1 tablet-2 desktop-2">
          <div class="col"></div>
          <div class="col"></div>
          <div class="col"></div>
          <div class="col"></div>
        </div>
      </div>
      <div class="col-3 show-only-desktop"></div>
    </div>

    <div class="grid-12">
      <div class="col-9 flexible">
        <div class="grid-12 mobile-1">
          <div class="col-3">
            <div class="grid align-center">
              <div class="col-auto"><p style="width: 150px"></p></div>
              <div class="w-100 hidden-mobile"></div>
              <div class="col flexible"></div>
            </div>
          </div>
          <div class="col-9"></div>
        </div>
      </div>
      <div class="col-3 show-only-desktop"></div>
    </div>

Order of columns 欄位的排序 🔝

No.1, order-last-mobile

No.2

No.3, order-first-desktop

Source Code

  
    <div class="grid-12">
      <div class="col-4 order-last-mobile"> No.1 </div>
      <div class="col-4"> No.2 </div>
      <div class="col-4 order-first-desktop"> No.3 </div>
    </div>

Remove gaps (gutters) of grid, and custom gap width 消除網格中的間距，可用來客製化間距 🔝

col-3 flexible (no-gaps)

col-6 flexible (no-gaps)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac neque consequat, hendrerit dui et, malesuada justo. Nullam dignissim scelerisque nunc.

Source Code

  
    <div class="grid-12 no-gaps">
      <div class="col-3 flexible"></div>
      <div class="col-3 flexible"></div>
      <div class="w-100 show-only-mobile"></div>
      <div class="col-6 flexible"></div>
    </div>

    <div class="grid no-gaps mobile-1">
      <div class="col-auto" style="text-align: center">
        <img src="https://picsum.photos/200/200/?random">
      </div>
      <div class="col flexible">
        <p style="padding: 30px">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac neque consequat, hendrerit dui et, malesuada justo. Nullam dignissim scelerisque nunc.
        </p>
      </div>
    </div>