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

Układ siatki CSS z 3 równymi kolumnami

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 ustawiony na trzy kolumny o równej szerokości w jednym wierszu, z wyłączonymi nazwanymi obszarami — układ jest po prostu powtarzany (3, 1fr), co najkrócej można powiedzieć „trzy kolumny, które zawsze równomiernie dzielą dostępną szerokość”.

Kolumny o równej szerokości są podstawą siatek kart, tabel cenowych i galerii obrazów: żaden obszar nie wymaga nazewnictwa, ponieważ każda kolumna odgrywa tę samą rolę, więc zwykły rozmiar ścieżki jest wyraźniejszy niż deklaracja obszarów szablonu siatki. Dodaj rząd, a pod spodem powtórzą się te same trzy ścieżki, wciąż idealnie równe.

Zwiększ liczbę kolumn, aby uzyskać gęstszą siatkę, lub włącz nazwane obszary, jeśli późniejsza kolumna ma się wyróżniać od pozostałych — poniższy kod CSS i kod HTML zostaną zaktualizowane w momencie, gdy to zrobisz. Wszystko działa po stronie klienta, więc nie ma czego przesyłać i na co czekać.

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