Logo Windi CSS

Grid

Grid

使用 grid 创建一个网格容器。

CSS
Inline Grid 
使用 inline-grid 创建一个行内网格容器。
CSS
Grid Template Columns 
用于控制一个网格布局中网格列维度的工具类。
1
2
3
4
5
6
9
12
none
[1fr,2fr]
[100px,1fr,min-content]
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      gridTemplateColumns: {
        nt: 'repeat(16, minmax(0, 1fr))',
        footer: '200px minmax(900px, 1fr) 100px',
      },
    },
  },
}

Grid Template Rows 
用于控制一个网格布局中网格行维度的工具类。
1
2
3
4
5
6
9
12
none
[1fr,2fr]
[100px,1fr,min-content]
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      gridTemplateRows: {
        layout: '200px minmax(900px, 1fr) 100px',
      },
    },
  },
}

Grid Column Span 
用于控制一个网格布局中元素行宽的工具类。
auto
span-full
span-1
span-2
span-3
span-4
span-5
span-6
span-7
span-8
span-9
span-10
span-11
span-12
span-13
span-14
span-15
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      gridColumn: {
        'span-16': 'span 16 / span 16',
      },
    },
  },
}

Grid Row Span 
用于控制一个网格布局中元素列高的工具类。
auto
span-full
span-1
span-2
span-3
span-4
span-5
span-6
span-7
span-8
span-9
span-10
span-11
span-12
span-13
span-14
span-15
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      gridRow: {
        'span-16': 'span 16 / span 16',
      },
    },
  },
}

Grid Column Start 
用于控制网格元素开始跨列的工具类。该工具类通过 col-end 或者 col-span 来指定跨列的数量。
auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      gridColumnStart: {
        first: '1',
      },
    },
  },
}

Grid Column End 
用于控制网格元素结束跨列的工具类。该工具类通过 col-start 或者 col-span 来指定跨列的数量。
auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      gridColumnEnd: {
        last: '20',
      },
    },
  },
}

Grid Row Start 
用于控制网格元素开始跨行的工具类。该工具类通过 row-end 或者 row-span 来指定跨行的数量。
auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      gridRowStart: {
        first: '1',
      },
    },
  },
}

Grid Row End 
用于控制网格元素结束跨行的工具类。该工具类通过 row-start 或者 row-span 来指定跨行的数量。
auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      gridRowEnd: {
        last: '20',
      },
    },
  },
}

Grid Auto Flow 
用于控制网格元素自动布局的工具类。
row
col
row-dense
col-dense
CSS
Grid Auto Columns 
用于控制网格隐式创建列宽的工具类。
auto
min
max
fr
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      gridAutoColumns: {
        '2fr': 'minmax(0, 2fr)',
      },
    },
  },
}

Grid Auto Rows 
用于控制网格隐式创建行高的工具类。
auto
min
max
fr
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      gridAutoRows: {
        '2fr': 'minmax(0, 2fr)',
      },
    },
  },
}

Gap 
用于控制网格行列间隔的工具类。
0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS
 Customizing 
你可以使用 theme.spacing 或者 theme.extend.spacing 来自定义全局间隔比例，配置项如下：
windi.config.js
export default {
  theme: {
    extend: {
      spacing: {
        lg: '18rem',
      },
    },
  },
}

在 Tailwind 主题配置中使用 gap 来自定义间隔，配置如下。
windi.config.js
export default {
  theme: {
    extend: {
      gap: {
        sm: '2.75rem',
      },
    },
  },
}

Gap X 
用于控制网格列间隔的工具类。
0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS
Gap Y 
用于控制网格行间隔的工具类。
0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS