如何實現常見後台 Layout ? | 點燈坊

上下有 header 與 footer，左側有 nav，右側有 content 是實務上後台常見 Layout，可用 Grid 簡單實現。

Version

Tailwind CSS 2.1.1

Grid

使用 Grid 實現後台常見 layout。

<template lang="pug">
section.grid.grid-cols-12.grid-rows-12.h-screen
  header.col-span-12.row-span-2 header
  nav.col-span-2.row-span-9 navigation
  main.col-span-10.row-span-9 content
  footer.col-span-12 footer
</template>

第 2 行

section.grid.grid-cols-12.grid-rows-12.h-screen

設定 section style：

• grid：設定子層使用 Grid
• grid-cols-12：設定子層分成 12 個 column
• grid-rows-12：設定子層分成 12 個 row
• h-screen：設定高度

第 3 行

header.col-span-12.row-span-2 header

設定 header style：

• col-span-12：設定 header 跨 12 個 column
• row-span-2：設定 header 跨 2 個 row

第 4 行

nav.col-span-2.row-span-9 navigation

設定 nav style：

• col-span-2：設定 nav 跨 2 個 column
• row-span-2：設定 nav 跨 2 個 row

第 5 行

main.col-span-10.row-span-9 content

設定 main style：

• col-span-10：設定 main 跨 10 個 column
• row-span-9：設定 main 跨 9 個 row

第 6 行

footer.col-span-12 footer

設定 footer style：

• col-span-12：設定 footer 跨 12 個 column

Tailwind Config

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      gridTemplateRows: {
        '12': 'repeat(12, minmax(0, 1fr))',
      },
      gridRow: {
        'span-9': 'span 9 / span 9',
      }
    },
  },
  variants: {
    extend: {}
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

第 7 行

gridTemplateRows: {
  '12': 'repeat(12, minmax(0, 1fr))',
},

Tailwind 只有支援到 grid-rows-6，需自行設定才有 grid-rows-12 可用。

10 行

gridRow: {
  'span-9': 'span 9 / span 9',
}

Tailwind 只有支援到 row-span-6，需自行設定才有 row-span-9 可用。

Conclusion

• Tailwind 的 Grid 沒有辦法直接設定 column 的寬度與 row 的高度，只能使用 grid-cols-n 分成 n 個 column 或 grid-rows-n 分成 n 個 row，再搭配 col-span-n 與 row-span-n 設定橫跨數
• Tailwind 只支援到 grid-rows-6 與 row-span-6，其他必須自行再 tailwind.config.js 設定