---
title: "Flex grid classes"
description: "The `flex-grid` system: a wrapping flex row with column counts, spans, gaps and dividers."
requested_language: hu
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/hu/next/reference/utilities/flex-grid
version: unreleased (main)
docs_index: https://docs.systhema.app/hu/next/llms.txt
---
> This page isn't translated yet. Showing English.


<!-- generated by pnpm docs:generate; do not edit -->

`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); }`<br>`.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; }`<br>`.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; } }`<br>`.flex-grid-divide-x  > * { &:last-child::after { display: none; } }`                                                                                                                               |
| `flex-grid-divide-x-0`         | `&  > * { position: relative; }`<br>`.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; } }`<br>`.flex-grid-divide-x-0  > * { &:last-child::after { display: none; } }`                                                                                                                           |
| `flex-grid-divide-x-2`         | `&  > * { position: relative; }`<br>`.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; } }`<br>`.flex-grid-divide-x-2  > * { &:last-child::after { display: none; } }`                                                                                                                           |
| `flex-grid-divide-x-4`         | `&  > * { position: relative; }`<br>`.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; } }`<br>`.flex-grid-divide-x-4  > * { &:last-child::after { display: none; } }`                                                                                                                           |
| `flex-grid-divide-x-8`         | `&  > * { position: relative; }`<br>`.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; } }`<br>`.flex-grid-divide-x-8  > * { &:last-child::after { display: none; } }`                                                                                                                           |
| `flex-grid-divide-y`           | `&  > * { position: relative; }`<br>`.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; } }`<br>`.flex-grid-divide-y  > * { &:last-child::after { display: none; } }`                                                                                                                             |
| `flex-grid-divide-y-0`         | `&  > * { position: relative; }`<br>`.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; } }`<br>`.flex-grid-divide-y-0  > * { &:last-child::after { display: none; } }`                                                                                                                         |
| `flex-grid-divide-y-2`         | `&  > * { position: relative; }`<br>`.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; } }`<br>`.flex-grid-divide-y-2  > * { &:last-child::after { display: none; } }`                                                                                                                         |
| `flex-grid-divide-y-4`         | `&  > * { position: relative; }`<br>`.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; } }`<br>`.flex-grid-divide-y-4  > * { &:last-child::after { display: none; } }`                                                                                                                         |
| `flex-grid-divide-y-8`         | `&  > * { position: relative; }`<br>`.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; } }`<br>`.flex-grid-divide-y-8  > * { &:last-child::after { display: none; } }`                                                                                                                         |