FluiD
Grid

Run a fluid grid build wizard with:

$: npx fluid-grid

Add following polyfill to enable @container queries in browsers which don't support it (There is zero zupport right now)
Beware that the polyfill has some limitations; you can only use px as units for cell definition. See more here

const supportsContainerQueries = 'container' in document.documentElement.style;

if (!supportsContainerQueries) {
	import('https://cdn.skypack.dev/container-query-polyfill');
}
			

Wizard inputs explained

• $minimal-column-width: Columns are added to a grid as long as single column won't shrink under its minimal width.

  Eg.: grid of width 450px will be filled with 4 columns.

• $base-grid-gap: Width in pixels. By default there are no gaps in the grid, but if you decide to use gaps, the f-grid-gap-1 class will represent the Base Grid Gap. f-grid-gap-2 will represent double the Base Grid Gap etc.
• $max-colspan Defines across how many columns can the widest cell span.

  You should not need collspan bigger than 10 (10 * Minimal Column Width). By default it would be 600px. If you need bigger are you should rather use gird with fractions (f-grid-N).

• $max-rowspan Defines across how many rows can the highest cell span.
• Use solid-N Allow this option if you plan to use grids with unknown amount of content. If there is not enough content, cells won't stretch to fill the grid, in case f-grid-solid-N class is used
• $widest-grid-element In order to generate right amount of f-grid-solid-N classes, widest grid element width in pixles is needed.