Docs
Next

Flex grid classes

The `flex-grid` system: a wrapping flex row with column counts, spans, gaps and dividers.

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

ClassStyles
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-1width: 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-2width: 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-3width: 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-4width: 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-5width: 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-6width: 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; } }