Fluid grid

tailwind-fluid-grid.config.js

const plugin = require('tailwindcss/plugin');

const columns = 12;
const columnUtilityOptions = {
  ...{ full: 'full', hd: 'hd', content: 'content' },
  ...Object.fromEntries([...Array(columns).keys()].map((k) => [`${k + 1}`, `${k + 1}`])),
};

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      spacing: {
        'fluid-grid-col-gap': 'var(--col-gap)',
        'fluid-grid-content-padding': 'var(--content-x-padding)',
      },
    },
  },
  plugins: [
    plugin(function ({ addComponents, addUtilities, matchUtilities, theme }) {
      addComponents({
        '.fluid-grid': {
          '--hd-width': '1920px',
          '--content-max-width': '1364px',
          '--content-x-padding': theme('spacing.6'),
          '--col-gap': theme('spacing.4'),

          '--col-area': `calc((var(--content-area) - ${columns - 1} * var(--col-gap)) / ${columns})`,
          '--content-area': 'min(100% - 2 * var(--content-x-padding), var(--content-max-width))',
          '--hd-area': 'min(100%, var(--hd-width))',
          '--hd-fraction': 'calc((var(--hd-area) - var(--content-area)) / 2)',
          '--full-fraction': 'minmax(0, 1fr)',

          '@media screen(md)': {
            '--col-gap': theme('spacing.8'),
          },

          display: 'grid',
          gridTemplateColumns:
            `[full-start] var(--full-fraction) ` +
            `[hd-start] var(--hd-fraction) ` +
            `[content-start] ` +
            `repeat(${columns - 1}, [col-start] var(--col-area) [col-end] var(--col-gap)) ` +
            `repeat(1, [col-start] var(--col-area) [col-end]) ` +
            `[content-end] ` +
            `var(--hd-fraction) [hd-end] ` +
            `var(--full-fraction) [full-end]`,
        },
      });

      matchUtilities(
        {
          'fluid-col-span': (value) =>
            isNaN(value)
              ? { gridColumn: `${value}-start / ${value}-end` }
              : { gridColumn: `span col-start ${value} / span col-end ${value}` },
        },
        { values: columnUtilityOptions },
      );

      matchUtilities(
        {
          'fluid-col-gap': (value) => ({ '--col-gap': `${value}` }),
        },
        { values: theme('spacing') },
      );

      matchUtilities(
        {
          'fluid-col-start': (value) => (isNaN(value) ? { gridColumnStart: `${value}-start` } : { gridColumnStart: `col-start ${value}` }),
        },
        { values: columnUtilityOptions },
      );

      matchUtilities(
        {
          'fluid-col-end': (value) => (isNaN(value) ? { gridColumnEnd: `${value}-end` } : { gridColumnEnd: `col-end ${value}` }),
        },
        { values: columnUtilityOptions },
      );

      addUtilities({
        '.fluid-col-span-md, .fluid-col-span-lg, .fluid-col-span-xl': {
          gridColumn: 'content',
        },
        '@media screen(md)': {
          '.fluid-col-span-md': {
            gridColumn: 'col-start 3 / span col-end 8',
          },
          '.fluid-col-span-lg': {
            gridColumn: 'col-start 2 / span col-end 10',
          },
          '.fluid-col-span-xl': {
            gridColumn: 'col-start 1 / span col-end 12',
          },
        },
        '@media screen(lg)': {
          '.fluid-col-span-md': {
            gridColumn: 'col-start 4 / span col-end 6',
          },
          '.fluid-col-span-lg': {
            gridColumn: 'col-start 3 / span col-end 8',
          },
          '.fluid-col-span-xl': {
            gridColumn: 'col-start 2 / span col-end 10',
          },
        },
      });
    }),
  ],
};