Flex grid classes

flex-grid-divide-<color> accepts every Tailwind color name (flex-grid-divide-red-500); the table lists the Systhema palette only.

Class	Styles
flex-grid	& { --tw-flex-grid-gap-x: 0px; --tw-flex-grid-gap-y: 0px; --tw-flex-grid-cols: 1; display: flex; flex-direction: row; flex-wrap: wrap; overflow: hidden; column-gap: calc(var(--tw-flex-grid-gap-x) - 1px); row-gap: calc(var(--tw-flex-grid-gap-y) - 1px); }.flex-grid { > * { width: round(down, calc((100% / var(--tw-flex-grid-cols)) - ((var(--tw-flex-grid-cols) - 1) * var(--tw-flex-grid-gap-x)) / var(--tw-flex-grid-cols)), 1px); } }
flex-grid-col-span-1	width: calc((100% / (var(--tw-flex-grid-cols) / 1)) - ((var(--tw-flex-grid-cols) / 1 - 1) * var(--tw-flex-grid-gap-x)) / (var(--tw-flex-grid-cols) / 1));
flex-grid-col-span-2	width: calc((100% / (var(--tw-flex-grid-cols) / 2)) - ((var(--tw-flex-grid-cols) / 2 - 1) * var(--tw-flex-grid-gap-x)) / (var(--tw-flex-grid-cols) / 2));
flex-grid-col-span-3	width: calc((100% / (var(--tw-flex-grid-cols) / 3)) - ((var(--tw-flex-grid-cols) / 3 - 1) * var(--tw-flex-grid-gap-x)) / (var(--tw-flex-grid-cols) / 3));
flex-grid-col-span-4	width: calc((100% / (var(--tw-flex-grid-cols) / 4)) - ((var(--tw-flex-grid-cols) / 4 - 1) * var(--tw-flex-grid-gap-x)) / (var(--tw-flex-grid-cols) / 4));
flex-grid-col-span-5	width: calc((100% / (var(--tw-flex-grid-cols) / 5)) - ((var(--tw-flex-grid-cols) / 5 - 1) * var(--tw-flex-grid-gap-x)) / (var(--tw-flex-grid-cols) / 5));
flex-grid-col-span-6	width: calc((100% / (var(--tw-flex-grid-cols) / 6)) - ((var(--tw-flex-grid-cols) / 6 - 1) * var(--tw-flex-grid-gap-x)) / (var(--tw-flex-grid-cols) / 6));
flex-grid-cols-1	--tw-flex-grid-cols: 1;
flex-grid-cols-2	--tw-flex-grid-cols: 2;
flex-grid-cols-3	--tw-flex-grid-cols: 3;
flex-grid-cols-4	--tw-flex-grid-cols: 4;
flex-grid-cols-5	--tw-flex-grid-cols: 5;
flex-grid-cols-6	--tw-flex-grid-cols: 6;
flex-grid-divide-black	& > ::after { background-color: #000; }
flex-grid-divide-transparent	& > ::after { background-color: transparent; }
flex-grid-divide-white	& > ::after { background-color: #fff; }
flex-grid-divide-x	& > * { position: relative; }.flex-grid-divide-x > * { &::after { content: var(--tw-content); position: absolute; top: 0; height: 100%; right: calc(-1 * (var(--tw-flex-grid-gap-x) / 2)); transform: translateX(50%); width: 1px; } }.flex-grid-divide-x > * { &:last-child::after { display: none; } }
flex-grid-divide-x-0	& > * { position: relative; }.flex-grid-divide-x-0 > * { &::after { content: var(--tw-content); position: absolute; top: 0; height: 100%; right: calc(-1 * (var(--tw-flex-grid-gap-x) / 2)); transform: translateX(50%); width: 0px; } }.flex-grid-divide-x-0 > * { &:last-child::after { display: none; } }
flex-grid-divide-x-2	& > * { position: relative; }.flex-grid-divide-x-2 > * { &::after { content: var(--tw-content); position: absolute; top: 0; height: 100%; right: calc(-1 * (var(--tw-flex-grid-gap-x) / 2)); transform: translateX(50%); width: 2px; } }.flex-grid-divide-x-2 > * { &:last-child::after { display: none; } }
flex-grid-divide-x-4	& > * { position: relative; }.flex-grid-divide-x-4 > * { &::after { content: var(--tw-content); position: absolute; top: 0; height: 100%; right: calc(-1 * (var(--tw-flex-grid-gap-x) / 2)); transform: translateX(50%); width: 4px; } }.flex-grid-divide-x-4 > * { &:last-child::after { display: none; } }
flex-grid-divide-x-8	& > * { position: relative; }.flex-grid-divide-x-8 > * { &::after { content: var(--tw-content); position: absolute; top: 0; height: 100%; right: calc(-1 * (var(--tw-flex-grid-gap-x) / 2)); transform: translateX(50%); width: 8px; } }.flex-grid-divide-x-8 > * { &:last-child::after { display: none; } }
flex-grid-divide-y	& > * { position: relative; }.flex-grid-divide-y > * { &::after { content: var(--tw-content); position: absolute; left: 0; width: 100%; bottom: calc(-1 * (var(--tw-flex-grid-gap-y) / 2)); transform: translateY(50%); height: 1px; } }.flex-grid-divide-y > * { &:last-child::after { display: none; } }
flex-grid-divide-y-0	& > * { position: relative; }.flex-grid-divide-y-0 > * { &::after { content: var(--tw-content); position: absolute; left: 0; width: 100%; bottom: calc(-1 * (var(--tw-flex-grid-gap-y) / 2)); transform: translateY(50%); height: 0px; } }.flex-grid-divide-y-0 > * { &:last-child::after { display: none; } }
flex-grid-divide-y-2	& > * { position: relative; }.flex-grid-divide-y-2 > * { &::after { content: var(--tw-content); position: absolute; left: 0; width: 100%; bottom: calc(-1 * (var(--tw-flex-grid-gap-y) / 2)); transform: translateY(50%); height: 2px; } }.flex-grid-divide-y-2 > * { &:last-child::after { display: none; } }
flex-grid-divide-y-4	& > * { position: relative; }.flex-grid-divide-y-4 > * { &::after { content: var(--tw-content); position: absolute; left: 0; width: 100%; bottom: calc(-1 * (var(--tw-flex-grid-gap-y) / 2)); transform: translateY(50%); height: 4px; } }.flex-grid-divide-y-4 > * { &:last-child::after { display: none; } }
flex-grid-divide-y-8	& > * { position: relative; }.flex-grid-divide-y-8 > * { &::after { content: var(--tw-content); position: absolute; left: 0; width: 100%; bottom: calc(-1 * (var(--tw-flex-grid-gap-y) / 2)); transform: translateY(50%); height: 8px; } }.flex-grid-divide-y-8 > * { &:last-child::after { display: none; } }