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

Układ siatki CSS Świętego Graala — gotowy kod

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 fabrycznie załadowanym układem Świętego Graala: trzy kolumny i trzy wiersze, z nagłówkiem i stopką rozciągającymi się na całą szerokość oraz wierszem nawigacji/głównym/bocznym pomiędzy nimi. Wiersz nagłówka wykorzystuje automatyczną wysokość, środkowy wiersz wypełnia pozostałą przestrzeń, a dwie boczne kolumny mają stałą wielkość 200 pikseli, podczas gdy główna kolumna zajmuje resztę.

Układ Świętego Graala zyskał swoją nazwę, ponieważ naprawdę trudno było go niezawodnie zbudować przed CSS Grid — lata hacków typu float, układów tabel i pozycjonowania absolutnego próbowały sfałszować ten dokładny kształt. W przypadku obszarów szablonów siatki zwija się on do pięciu nazwanych regionów i kilku rozmiarów ścieżek, dlatego pozostaje standardowym pierwszym przykładem nauczania CSS Grid.

Każda liczba i luka na tej stronie są nadal aktywne: zmniejsz boczne kolumny, dodaj czwarty wiersz lub zmień nazwę obszaru i podglądu oraz natychmiastową aktualizację CSS, którą można skopiować. Skopiuj bloki CSS i HTML bezpośrednio do swojego projektu — wszystko działa lokalnie w przeglądarce, nic nie jest przesyłane.

🛡️
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.