⭐ 0
🔍
Tekst Obraz PDF i Dokumenty Audio Muzyka Elektronika Czas Użyteczne programy Walidatory Ezoteryka Gry

Pasek boczny + układ siatki CSS treści

Projektuj wizualnie układy siatki CSS: ustaw kolumny, wiersze i odstępy, a następnie wpisz nazwy obszarów w komórkach, aby utworzyć obszary szablonów siatki — z podglądem na żywo i kopiowalnymi CSS i HTML.

Wpisz nazwę w dowolnej komórce poniżej; komórki o tej samej nazwie łączą się w jeden region obszarów szablonów siatki.

Przetwarzanie... 0%

Wynik

Ta strona otwiera generator siatki z dwukolumnowym i jednowierszowym układem, który już został nazwany: kolumna paska bocznego o wielkości 200 pikseli obok elastycznej kolumny treści, która zajmuje pozostałe miejsce. Obydwa obszary są natychmiast widoczne w podglądzie na żywo, pokolorowane i oznaczone, dzięki czemu podział jest widoczny na pierwszy rzut oka.

Jest to najpopularniejszy kształt łączący nawigację z treścią w Internecie — strony ustawień, witryny dokumentacji i pulpity administracyjne opierają się na szynie o stałej szerokości obok płynnego obszaru głównego. Ponieważ kolumna paska bocznego używa wartości piksela, a kolumna treści 1fr, szerokość paska bocznego pozostaje stała, podczas gdy kolumna treści pochłania każdy dodatkowy piksel widocznego obszaru.

Zmień nazwę dowolnego obszaru, zmień szerokość kolumny lub dodaj więcej wierszy nagłówka powyżej podziału — poniższe dane wyjściowe CSS i HTML śledzą każdą edycję w czasie rzeczywistym. Narzędzie jest bezpłatne i działa całkowicie w przeglądarce, bez konieczności przesyłania plików i konta.

🛡️
Wykonywane w przeglądarce

Twoje pliki i dane nigdy nie opuszczają tego urządzenia. Przetwarzanie odbywa się całkowicie offline. W 100% bezpieczne.

Zasady i formaty

  • Dane wejściowe liczbowe dla 1–6 kolumn i wierszy oraz oddzielne elementy sterujące odstępami między kolumnami i wierszami, które po dopasowaniu łączą się w jedną wartość odstępu.
  • Tryb nazwanych obszarów: wpisz nazwę obszaru bezpośrednio do dowolnej komórki aktywnej siatki; narzędzie tworzy prawidłowy ciąg obszarów szablonu siatki i ostrzega, gdy nazwy nie tworzą czystych prostokątów.
  • Kopiowalny blok CSS (wyświetlanie: siatka, kolumny/wiersze szablonu siatki, przerwa, obszary szablonu siatki) plus pasujący szkielet HTML z jednym elementem div obszaru siatki na nazwany region.

Kluczowe korzyści

✓ Wpisz nazwę bezpośrednio do dowolnej komórki, a pasujące nazwy połączą się w jeden region obszarów szablonów siatki — bez zaznaczania przez przeciąganie i ręcznego zgadywania składni cytowanego ciągu.
✓ Siatka podglądu na żywo zmienia rozmiar i kolor przy każdej zmianie, dzięki czemu przed skopiowaniem pojedynczej linii CSS widzisz dokładnie ścieżki kolumn i wierszy oraz każdy nazwany region.
✓ Ustawienia wstępne, takie jak klasyczny układ Świętego Graala i wąski pasek boczny, zapewniają prawdziwą, działającą deklarację obszarów szablonów siatki, od której można zacząć, a nie pustą siatkę.

Przypadki użycia

  • • Zbuduj klasyczną powłokę strony Świętego Graala — nagłówek i stopkę o pełnej szerokości ze środkowym wierszem nawigacji/głównym/po bokach — wpisując nazwy obszarów zamiast ręcznie pisać obszary siatki szablonów.
  • • Przygotuj stronę ustawień lub panel administracyjny z paskiem bocznym o stałej szerokości obok elastycznej kolumny treści i skopiuj dokładny kod CSS i HTML, gdy podgląd na żywo będzie wyglądał prawidłowo.
  • • Przed wysyłką sprawdź, czy zestaw nazwanych obszarów rzeczywiście tworzy prawidłowe prostokąty — narzędzie zaznacza dokładne nazwy, które rozdzielają obszary szablonów siatki w przeglądarce.