Сетка #

Grid #

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

Inline Grid #

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

Grid Template Columns #

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

export default {
  theme: {
    extend: {
      gridTemplateColumns: {
        nt: 'repeat(16, minmax(0, 1fr))',
        footer: '200px minmax(900px, 1fr) 100px',
      },
    },
  },
}

Grid Template Rows #

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

export default {
  theme: {
    extend: {
      gridTemplateRows: {
        layout: '200px minmax(900px, 1fr) 100px',
      },
    },
  },
}

Grid Column Span #

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

export default {
  theme: {
    extend: {
      gridColumn: {
        'span-16': 'span 16 / span 16',
      },
    },
  },
}

Grid Row Span #

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

export default {
  theme: {
    extend: {
      gridRow: {
        'span-16': 'span 16 / span 16',
      },
    },
  },
}

Grid Column Start #

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

export default {
  theme: {
    extend: {
      gridColumnStart: {
        first: '1',
      },
    },
  },
}

Grid Column End #

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

export default {
  theme: {
    extend: {
      gridColumnEnd: {
        last: '20',
      },
    },
  },
}

Grid Row Start #

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

export default {
  theme: {
    extend: {
      gridRowStart: {
        first: '1',
      },
    },
  },
}

Grid Row End #

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

export default {
  theme: {
    extend: {
      gridRowEnd: {
        last: '20',
      },
    },
  },
}

Grid Auto Flow #

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

Grid Auto Columns #

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

export default {
  theme: {
    extend: {
      gridAutoColumns: {
        '2fr': 'minmax(0, 2fr)',
      },
    },
  },
}

Grid Auto Rows #

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

export default {
  theme: {
    extend: {
      gridAutoRows: {
        '2fr': 'minmax(0, 2fr)',
      },
    },
  },
}

Gap #

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

export default {
  theme: {
    extend: {
      spacing: {
        lg: '18rem',
      },
    },
  },
}

export default {
  theme: {
    extend: {
      gap: {
        sm: '2.75rem',
      },
    },
  },
}

Gap X #

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

Gap Y #

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