Generator układu CSS

Zobacz podgląd układu Flexbox lub Grid.

Na Twoim urządzeniu · Bez konta

Generator układu CSS przetwarza wprowadzone dane w tej przeglądarce. Dane wejściowe i wyniki nie trafiają do analityki. Lista ostatnio używanych narzędzi zapisuje nazwy narzędzi, liczbę wizyt i czas ostatniej wizyty. Lista zapisanych narzędzi przechowuje tylko ich nazwy. Zapisywanie szkicu jest opcjonalne, a szkic pozostaje na tym urządzeniu; zapisany tekst usuniesz za pomocą opcji szkicu. Opcjonalne wczytanie tekstu z adresu URL łączy się z danym serwerem; serwer widzi wskazany adres URL i Twój adres IP. Opcjonalna akcja „Użyj w” zachowuje dane do przekazania w tej karcie. Kolejne narzędzie usuwa je po otwarciu i pomija, jeśli minęła więcej niż minuta.

Opcja „Kopiuj link” umieszcza w adresie wybrane dane wejściowe do udostępnienia. Każdy, kto ma ten link, może je ponownie otworzyć. Pliki i wygenerowane wyniki nie są uwzględniane. Narzędzia do haseł i kluczy udostępniają tylko ustawienia.

Polski

Etykiety elementów, każda w osobnym wierszu

Układ

Opcje i plik z urządzenia

Kolumny Grid

Odstęp (px)

Rozmiar bazowy Flexbox (px)

Otwórz plik tekstowy z tego urządzenia

Opcjonalne ustawienia dotyczą tylko tej karty.

Twój wynik

Kod źródłowy HTML

Więcej

Skróty klawiszowe

O linkach i resetowaniu

Linki zawierają wpisane dane i ustawienia. Każdy, kto ma link, może je zobaczyć, więc pomiń prywatny tekst. Pliki i wygenerowane wyniki nie są dołączane; losowania są wykonywane ponownie.

Reset ponownie wczytuje narzędzie z początkowymi wartościami, zamyka otwarte pliki i zwalnia dostęp do urządzeń. Zapisane wersje robocze pozostają na tym urządzeniu, dopóki ich nie usuniesz.

Jak działa generator układu CSS

Wygeneruj z etykiet elementów responsywny układ Grid lub układ Flexbox z zawijaniem. Zmień liczbę kolumn siatki, odstęp lub rozmiar bazowy Flexbox, a następnie skopiuj lub pobierz samodzielny dokument HTML używany w podglądzie.

Dalej: Formatowanie CSS

Dalej: Kalkulator specyficzności CSS

Dalej: Sprawdzanie kontrastu

Przykład

Siatka trzykolumnowa używa repeat(3, minmax(0, 1fr)), aby długie etykiety mogły zawijać się w kolumnach o równej szerokości. Flexbox zawija elementy zgodnie z ich preferowanym rozmiarem bazowym i dostępnym miejscem.

Zanim użyjesz wyniku

To punkt wyjścia do tworzenia układu, a nie pełny kreator stron ani audyt zgodności z przeglądarkami. Podgląd ma stałe style demonstracyjne. Grid zachowuje wybraną liczbę kolumn przy małych szerokościach; dodaj zapytania medialne, jeśli docelowy projekt wymaga zmiany ich liczby.

Aktualizacja 7 października 2026

Jak cytować tę stronę

Styl cytowania

ToolOctopus. “Generator układu CSS.” Aktualizacja 7 października 2026. https://tooloctopus.com/pl/generator-układu-css.

Dodaj datę dostępu, jeśli wymagają tego Twoje wytyczne.

Cytowania są formatowane za pomocą biblioteki citeproc-js autorstwa Franka Bennetta oraz stylów Citation Style Language. Licencja i kod źródłowy.