Kliknij komórki. Zbuduj siatkę CSS Grid.
Click cells. Build a CSS Grid layout.
Ustaw liczbę kolumn, wierszy i odstępy, a potem zaznacz komórki myszką, żeby zdefiniować
zasięg elementu (grid-column/grid-row) — bez liczenia numerów linii ręcznie.
Set the number of columns, rows, and gaps, then click cells to define an item's span
(grid-column/grid-row) — no manual line-number counting.
Kliknij komórki poniżej, żeby zaznaczyć obszar — narzędzie samo policzy grid-column i grid-row dla zaznaczonego elementu.
Click the cells below to select an area — the tool calculates grid-column and grid-row for the selected item automatically.
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;
}
Ustaw siatkę
Set up the grid
Wybierz liczbę kolumn, wierszy i odstęp między nimi — podgląd aktualizuje się od razu.
Choose the number of columns, rows, and the gap between them — the preview updates instantly.
Zaznacz zasięg elementu
Select an item's span
Kliknij komórki, które ma zajmować jeden element — np. duży kafelek na 2×2. Zaznaczenie musi tworzyć prostokąt.
Click the cells one element should occupy — e.g. a large 2×2 tile. The selection must form a rectangle.
Skopiuj CSS
Copy the CSS
Kliknij „Kopiuj” i wklej gotowy kod kontenera oraz elementu do swojego arkusza stylów.
Click "Copy" and paste the ready container and item code into your stylesheet.
- Układy kart z jednym wyróżnionym, większym kafelkiem (bento grid).
- Strony docelowe z nietypowym podziałem sekcji.
- Panele dashboardów, gdzie widżety mają różne rozmiary.
- Card layouts with one larger, highlighted tile (bento grid).
- Landing pages with an unconventional section split.
- Dashboard panels where widgets come in different sizes.
Czym jest ten generator? To wizualne narzędzie do budowania
układów CSS Grid — zamiast liczyć numery linii siatki w głowie, klikasz komórki, a generator
sam wylicza wartości grid-column i grid-row.
What is this tool? A visual way to build CSS Grid layouts —
instead of counting grid line numbers in your head, you click cells and the generator works
out grid-column and grid-row for you.
Czym różni się CSS Grid od Flexboxa?
How is CSS Grid different from Flexbox?
Flexbox układa elementy w jednym wymiarze naraz (rząd albo kolumna). Grid kontroluje wiersze i kolumny jednocześnie, dzięki czemu elementy mogą zajmować dokładnie zdefiniowany obszar prostokątny na siatce.
Flexbox arranges items along one dimension at a time (a row or a column). Grid controls rows and columns simultaneously, so items can occupy an exactly defined rectangular area of the layout.
Dlaczego zaznaczenie musi być prostokątem?
Why must the selection form a rectangle?
CSS Grid opisuje zasięg elementu jako zakres linii początkowej i końcowej w obu osiach — to z natury opisuje prostokąt. Nieregularny kształt wymagałby kilku osobnych elementów.
CSS Grid describes an item's span as a start and end line range on both axes — which inherently describes a rectangle. An irregular shape would require several separate items.
Co oznacza repeat(4, 1fr)?
What does repeat(4, 1fr) mean?
To skrót zamiast pisania 1fr 1fr 1fr 1fr — tworzy cztery kolumny
o równej szerokości, gdzie 1fr oznacza jedną "część" dostępnej przestrzeni.
It's shorthand for writing 1fr 1fr 1fr 1fr — it creates four
equal-width columns, where 1fr means one "fraction" of the available space.
Czy generator obsługuje kolumny o różnej szerokości?
Does the generator support unequal column widths?
Ten generator tworzy kolumny i wiersze o równej szerokości (1fr
każda) — to najczęstszy punkt startowy. Skopiowany kod możesz ręcznie dostosować, podmieniając
wybrane wartości 1fr na piksele lub procenty.
This generator creates equal-width columns and rows (1fr each) —
the most common starting point. You can manually adjust the copied code, swapping specific
1fr values for pixels or percentages.
Czy narzędzie wysyła moje dane gdziekolwiek?
Does the tool upload my data anywhere?
Nie. Generator działa w całości w Twojej przeglądarce.
No. The generator runs entirely in your browser.
Czym jest CSS Grid Generator?
CSS Grid to najpotężniejszy sposób układania treści w CSS — kontroluje jednocześnie wiersze
i kolumny, co pozwala budować układy niemożliwe do wygodnego osiągnięcia samym Flexboxem.
Problem w tym, że opisanie zasięgu elementu wymaga podania numerów linii siatki
(grid-column: 2 / 4), a policzenie tych numerów w głowie dla większej siatki
jest żmudne i podatne na błędy.
Jak działa zaznaczanie komórek
Zamiast liczyć linie ręcznie, klikasz komórki bezpośrednio na podglądzie. Generator
zapamiętuje najmniejszy i największy zaznaczony wiersz oraz kolumnę, a następnie wylicza
z tego wartości grid-column i grid-row w standardowej notacji
CSS (numer linii początkowej / numer linii końcowej).
Kiedy sięgnąć po Grid, a kiedy po Flexbox
- Grid — układy dwuwymiarowe: strony z sekcjami o różnych rozmiarach, bento grid, dashboardy.
- Flexbox — układy jednowymiarowe: pasek nawigacji, rząd przycisków, wyśrodkowanie pojedynczego elementu.
- W praktyce oba mechanizmy często współpracują — Grid na poziomie strony, Flexbox wewnątrz pojedynczych kart.
Praktyczne wskazówki
Zacznij od prostej siatki (3-4 kolumny) i dodawaj złożoność stopniowo. Jeśli układ ma się
różnie zachowywać na różnych szerokościach ekranu, będziesz potrzebować osobnych reguł
grid-template-columns w media queries — ten generator daje punkt startowy dla
jednej szerokości, którą warto potem przetestować na urządzeniach mobilnych.
Wdrożenie w produkcji
Skopiowany kod kontenera i elementu wklej bezpośrednio do arkusza stylów. Jeśli masz więcej niż jeden wyróżniony element, powtórz proces zaznaczania dla każdego z nich osobno i nadaj elementom różne klasy w HTML.
What is a CSS Grid Generator?
CSS Grid is the most powerful way to lay out content in CSS — it controls rows and columns
at the same time, enabling layouts that are awkward to achieve with Flexbox alone. The catch
is that describing an item's span requires grid line numbers (grid-column: 2 / 4),
and counting those numbers by hand for a larger grid is tedious and error-prone.
How cell selection works
Instead of counting lines manually, you click cells directly on the preview. The generator
tracks the smallest and largest selected row and column, then derives grid-column
and grid-row values in standard CSS notation (start line number / end line number).
When to reach for Grid vs Flexbox
- Grid — two-dimensional layouts: pages with differently sized sections, bento grids, dashboards.
- Flexbox — one-dimensional layouts: a nav bar, a row of buttons, centering a single element.
- In practice the two often work together — Grid at the page level, Flexbox inside individual cards.
Practical tips
Start with a simple grid (3-4 columns) and add complexity gradually. If the layout should
behave differently at different screen widths, you'll need separate
grid-template-columns rules in media queries — this generator gives you a
starting point for one width, worth testing afterward on mobile devices.
Using it in production
Paste the copied container and item code directly into your stylesheet. If you have more than one highlighted element, repeat the selection process for each one separately and give the elements different classes in your HTML.
Sprawdź też inne generatory CSS.
Check out the other CSS generators too.
Gradienty, cienie, zaokrąglenia i efekty szkła — wszystko w jednym miejscu, bez instalacji.
Gradients, shadows, border radius, and glass effects — all in one place, no install needed.