Generator CSS Grid

Deklaracja grid-template-areas to jeden z najbardziej czytelnych fragmentów CSS, ale dopiero gdy już istnieje — ręczne jej stworzenie oznacza liczenie ciągów w cudzysłowach i dopasowywanie długości wierszy, a jedna niedopasowana komórka po cichu psuje cały układ. Ten generator zamienia to w bezpośrednią manipulację: ustaw liczbę kolumn i wierszy, wpisz nazwę w dowolną komórkę siatki na żywo, a pasujące nazwy automatycznie scalą się w jeden nazwany region.

Od strony technicznej każda pozostawiona pusta komórka staje się kropką w wygenerowanym ciągu grid-template-areas, a każda nazwana komórka staje się częścią prostokąta o tej nazwie. CSS pozwala, aby nazwany region zajmował tylko jeden regularny prostokątny blok, więc narzędzie sprawdza to podczas pisania i informuje dokładnie, gdy nazwa nie tworzy jeszcze poprawnego prostokąta — zamiast po cichu produkować CSS, który przeglądarka odrzuci.

Odstęp między kolumnami i między wierszami domyślnie wynosi 8px i łączy się w jedną linię gap, gdy są równe, a podgląd siatki na żywo zawsze odzwierciedla ścieżki grid-template-columns i grid-template-rows, w tym stałe kolumny w pikselach z ustawień wstępnych, takie jak 200px boczne szyny w Holy Grail. Gotowy do skopiowania wynik obejmuje obie strony: blok CSS gotowy do arkusza stylów i pasujący szkielet HTML z jednym elementem div z grid-area na każdy nazwany region.

Grid i flexbox rozwiązują różne problemy z układem, a css-flexbox-generator na tej stronie jest lepszym punktem wyjścia dla układów jednowymiarowych — pojedynczego wiersza lub kolumny elastycznych elementów, takich jak pasek nawigacyjny lub stos kart. Sięgnij po ten generator siatki, gdy potrzebujesz dwuwymiarowej kontroli, jawnych wierszy i kolumn lub nazwanych regionów, takich jak header/nav/main/footer; oba narzędzia często trafiają na tę samą stronę — siatka dla szkieletu strony, a flexbox wewnątrz jej części. Jak każde narzędzie na tej stronie, działa w całości w przeglądarce — bez przesyłania i bez konta.