Logo Windi CSS

Сетка

Grid

Используйте grid, чтобы создать контейнер сетки.

CSS
.grid {
  display: -ms-grid;
  display: grid;
}

Inline Grid

Используйте inline-grid для создания контейнера встроенной сетки.

CSS
.inline-grid {
  display: -ms-inline-grid;
  display: inline-grid;
}

Grid Template Columns

Утилиты для указания столбцов в сетке.

1
2
3
4
5
6
9
12
none
[1fr,2fr]
[100px,1fr,min-content]
CSS
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
Персонализация
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
.grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}
Персонализация
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
.col-auto {
  grid-column: auto;
}
Персонализация
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
.row-auto {
  grid-row: auto;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      gridRow: {
        'span-16': 'span 16 / span 16',
      },
    },
  },
}

Grid Column Start

Утилиты для запуска элемента на n-й линии сетки. Эти утилиты следует комбинировать с утилитами col-end или col-span, чтобы охватить определенное количество столбцов.

auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CSS
.col-start-auto {
  grid-column-start: auto;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      gridColumnStart: {
        first: '1',
      },
    },
  },
}

Grid Column End

Утилиты для завершения элемента на n-й линии сетки. Эти утилиты следует комбинировать с утилитами col-start или col-span, чтобы охватить определенное количество столбцов.

auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CSS
.col-end-auto {
  grid-column-end: auto;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      gridColumnEnd: {
        last: '20',
      },
    },
  },
}

Grid Row Start

Утилиты для запуска элемента на n-й линии сетки. Эти утилиты должны быть объединены с row-end или row-span, чтобы охватить определенное количество строк.

auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CSS
.row-start-auto {
  grid-row-start: auto;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      gridRowStart: {
        first: '1',
      },
    },
  },
}

Grid Row End

Утилиты для завершения элемента на n-й линии сетки. Эти утилиты следует совмещать с row-start или row-span, чтобы охватить определенное количество строк.

auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CSS
.row-end-auto {
  grid-row-end: auto;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      gridRowEnd: {
        last: '20',
      },
    },
  },
}

Grid Auto Flow

Утилиты для управления автоматическим размещением элементов в сетке.

row
col
row-dense
col-dense
CSS
.grid-flow-row {
  grid-auto-flow: row;
}

Grid Auto Columns

Утилиты для управления размером неявно созданных столбцов сетки.

auto
min
max
fr
CSS
.auto-cols-auto {
  grid-auto-columns: auto;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      gridAutoColumns: {
        '2fr': 'minmax(0, 2fr)',
      },
    },
  },
}

Grid Auto Rows

Утилиты для управления размером неявно созданных строк сетки.

auto
min
max
fr
CSS
.auto-rows-auto {
  grid-auto-rows: auto;
}
Персонализация
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
.gap-2 {
  grid-gap: 0.5rem;
  gap: 0.5rem;
}
Персонализация

Вы можете настроить глобальную шкалу интервалов в разделах theme.spacing или theme.extend.spacing вашего файла windi.config.js:

windi.config.js
export default {
  theme: {
    extend: {
      spacing: {
        lg: '18rem',
      },
    },
  },
}

Чтобы настроить масштаб зазора отдельно, используйте раздел зазора в конфигурации темы Tailwind.

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-x-2 {
  -webkit-column-gap: 0.5rem;
  -moz-column-gap: 0.5rem;
  grid-column-gap: 0.5rem;
  column-gap: 0.5rem;
}

Gap Y

Утилиты для управления желобами между рядами сетки.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS
.gap-y-2 {
  -webkit-row-gap: 0.5rem;
  -moz-row-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  row-gap: 0.5rem;
}