ListFan
Archiwum · Bezpłatne

Generator CSS Grid

Utwórz podgląd siatki i CSS z liczby kolumn, wierszy i odstępu.

To narzędzie jest w archiwum. Przed użyciem ponownie sprawdź metodę i datowane dane.

01Wprowadź wartości

Działa w przeglądarce

Działa offline w przeglądarce. Po załadowaniu strony i wymaganych plików przetwarzanie nie wymaga Internetu.

Przykład
px

02Generator CSS Grid

|

Działa w przeglądarce

Jak to działa

Utwórz podgląd siatki i CSS z liczby kolumn, wierszy i odstępu.

Działa w przeglądarce

Twoje dane zostają u Ciebie

Dane są przetwarzane na tej stronie i nie są wysyłane na serwer.

O narzędziu

Utwórz podgląd siatki i CSS z liczby kolumn, wierszy i odstępu.

Utwórz CSS Grid o równych kolumnach i dostosuj kod do strony.

Użyj narzędzia ↑
Jak korzystać?
  1. Wprowadź wartości
    • Kolumny
    • Wiersze
    • Odstęp
  2. Metoda obliczeń

    Utwórz podgląd siatki i CSS z liczby kolumn, wierszy i odstępu.

  3. Przykładowy scenariusz · Wynik

    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

Metoda obliczeń

  1. Utwórz CSS Grid o równych kolumnach i dostosuj kod do strony.
Przykładowy scenariusz

Generator CSS Grid

Kolumny
3
Wiersze
2
Odstęp
16 px
Wynik
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

Częste pytania

Jak interpretować wynik?

Utwórz CSS Grid o równych kolumnach i dostosuj kod do strony.

Dokąd trafiają moje dane?

Obliczenia odbywają się na Twoim urządzeniu. Dane nie są wysyłane na serwer.

Terminy i objaśnienia

Wprowadź wartości

Kolumny

Wpisz liczbę całkowitą, bez ułamków.

Minimum: 1 · Maksimum: 12

Wiersze

Wpisz liczbę całkowitą, bez ułamków.

Minimum: 1 · Maksimum: 12

Odstęp

Wpisz wartość liczbową tej wielkości. Użyj jednostki podanej obok pola. px

Minimum: 0 · Maksimum: 100 px

Wynik

Wynik

Utwórz CSS Grid o równych kolumnach i dostosuj kod do strony.

Obliczane z danych według poniższej metody.

Typowe błędy i rozwiązania

Generator CSS Grid

Błąd: Używanie wyniku poza opisanym zakresem.

Rozwiązanie: Utwórz CSS Grid o równych kolumnach i dostosuj kod do strony.

Ograniczenia i założenia

  • Utwórz CSS Grid o równych kolumnach i dostosuj kod do strony.
  • Wyniki mogą być zaokrąglone; nie zwiększa to dokładności pomiaru.

Więcej narzędzi

Wszystkie narzędzia