Generator CSS grid
Zamień tekstowy szkic układu na rzeczywisty CSS grid z nazwanymi obszarami.
Generator CSS grid
Wstaw szkic układu strony i to narzędzie zamienia go w działający kod CSS grid. Napiszcie każdy wiersz układu na własnym wierszu i powtarzaj to samo słowo w komórkach, aby oznaczyć nazwany obszar — "header header" w jednym wierszu, "nav main" w następnym, "footer footer" w ostatnim opisuje klasyczny układ z trzema wierszami z pełną szerokością nagłówka i stopki. Narzędzie czyta powtarzane nazwy jako obszary siatki i automatycznie generuje odpowiadającą deklarację grid-template-areas.
Opcje kontrolują resztę wygenerowanego CSS. Ustaw odstęp między komórkami w pikselach i opcjonalnie podaj jawne szerokości kolumn lub wysokości wierszy, używając dowolnego ważnego rozmiaru ścieżki CSS — jednostki fr, auto lub minmax(); pozostaw dowolne pole puste, a narzędzie równomiernie rozprowadzi ścieżki. Włącz reguły dla obszaru, aby uzyskać gotowe reguły grid-area dla każdej nazwanej sekcji z prefiksem klasy, który wybierzesz, więc "header" staje się .grid-header od razu. Przełącznik responsywności dodaje zapytanie medialne o maksymalnej szerokości, które zwija cały układ do jednej kolumny na wąskich ekranach, a przełącznik HTML dołącza odpowiadającą strukturę znaczników, abyś mógł zobaczyć strukturę obok CSS.
Jeśli dwie komórki o tej samej nazwie nie tworzą solidnego prostokąta — kształt L lub nazwa, która pomija komórkę — rzeczywisty CSS grid nie może poprawnie renderować tego obszaru, więc narzędzie oznacza to bezpośrednio na wyjściu jako komentarz ostrzegawczy zamiast bezgłośnie generować nieprawidłowo wyglądające reguły. Zakończenia linii z dowolnego systemu operacyjnego są obsługiwane w ten sam sposób, a żywe liczenie poniżej wyjścia śledzi, ile wierszy układu, nazwanych obszarów i znaków zawiera wygenerowany CSS.
Wszystko działa lokalnie w Twojej przeglądarce; układ, który narysujesz, i CSS, który otrzymasz z powrotem, nigdy się nigdzie nie wysyłają. Skopiuj wynik, pobierz go jako plik .txt lub wyślij wynik bezpośrednio do innego narzędzia, takiego jakFormatter CSS, aby dodatkowo dopracować wcięcia.