Generator CSS Grid
Zdefiniuj kolumny i wiersze, zaznacz obszary myszką, aby rozmieścić elementy, i jednym kliknięciem skopiuj kod CSS wraz z pasującym kodem HTML.
Siatka jest tworzona bezpośrednio w Państwa przeglądarce. Żadne parametry nie są przesyłane do BroBroGo.
FAQ
Jak umieszczać elementy na siatce?
Kliknij i przeciągnij kursor po komórkach siatki, aby zaznaczyć prostokątny obszar — po zwolnieniu przycisku myszy powstanie tam element podrzędny rozciągający się na wybrane kolumny i wiersze. Każdy narysowany element otrzymuje własne reguły grid-column i grid-row w CSS oraz odpowiadający mu znacznik div w HTML. Elementy mogą się nakładać (ten narysowany później znajdzie się na wierzchu); do usunięcia elementu służy ikona ×.
Czy kolumny i wiersze mogą mieć różne rozmiary?
Tak. Każda kolumna i wiersz mają własne pole tekstowe, w którym można wpisać dowolną poprawną wartość CSS Grid — np. 1fr, 200px, auto, min-content lub minmax(120px, 1fr). Ścieżki o tym samym rozmiarze są automatycznie grupowane w funkcję repeat(), aby kod pozostał zwięzły. Odstępy pionowe i poziome ustawia się osobno; jeśli są równe, zostaną uproszczone do jednej właściwości gap.
Co zrobić z wygenerowanym kodem?
Skopiuj wygenerowany kod CSS oraz HTML. Kod HTML zawiera kontener z osobnymi divami dla każdego elementu, a kod CSS definiuje siatkę i pozycjonuje te elementy. Wklejenie obu fragmentów do projektu odtworzy dokładnie taki sam układ, jaki został narysowany w kreatorze.