---
title: "Grid classes"
description: "The layout grid classes and the column placement utilities."
requested_language: hu
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/hu/reference/utilities/grid
version: unreleased (main)
docs_index: https://docs.systhema.app/hu/llms.txt
---
> This page isn't translated yet. Showing English.


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

| Class                | Styles                                                                                                                                                     |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `grid-default`       | `display: grid;`<br>`column-gap: var(--grid-default-gap);`<br>`grid-template-columns: repeat(var(--grid-default-count), minmax(0, 1fr));`                  |
| `grid-cols-default`  | `grid-template-columns: repeat(var(--grid-default-count), minmax(0, 1fr));`                                                                                |
| `gap-grid-default`   | `gap: var(--grid-default-gap);`                                                                                                                            |
| `gap-x-grid-default` | `column-gap: var(--grid-default-gap);`                                                                                                                     |
| `gap-y-grid-default` | `row-gap: var(--grid-default-gap);`                                                                                                                        |
| `col-mx-0`           | `& { grid-column-start: 1; grid-column: span 12 / span 12; }`<br>`@media (width >= 640px) { & { grid-column: span 24 / span 24; grid-column-start: 1; } }` |
| `col-mx-1`           | `& { grid-column-start: 1; grid-column: span 12 / span 12; }`<br>`@media (width >= 640px) { & { grid-column: span 22 / span 22; grid-column-start: 2; } }` |
| `col-mx-2`           | `& { grid-column-start: 1; grid-column: span 12 / span 12; }`<br>`@media (width >= 640px) { & { grid-column: span 20 / span 20; grid-column-start: 3; } }` |
| `col-mx-3`           | `& { grid-column-start: 1; grid-column: span 12 / span 12; }`<br>`@media (width >= 640px) { & { grid-column: span 18 / span 18; grid-column-start: 4; } }` |
| `col-mx-4`           | `& { grid-column-start: 1; grid-column: span 12 / span 12; }`<br>`@media (width >= 640px) { & { grid-column: span 16 / span 16; grid-column-start: 5; } }` |
| `col-mx-5`           | `& { grid-column-start: 1; grid-column: span 12 / span 12; }`<br>`@media (width >= 640px) { & { grid-column: span 14 / span 14; grid-column-start: 6; } }` |
| `col-mx-6`           | `& { grid-column-start: 1; grid-column: span 12 / span 12; }`<br>`@media (width >= 640px) { & { grid-column: span 12 / span 12; grid-column-start: 7; } }` |