5 ciekawych generatorów do tworzenia Grid w CSS

Czas czytania: 3 minut

Zapewne każdy z was podczas budowy strony internetowej korzysta z pewnego rodzaju struktury grid.

Osobiście od kilku już lat głownie korzystam Grida (siatki) jaki oferuje mi Bootstrap gdyż to z nim ostatnio głównie pracuje. Do niedawna był to Bootstrap 3 obecnie już Bootstrap 4+. To oczywiście nie są same struktury gridowe, ale biblioteki CSS i mają dużo więcej opcji. Czasami aż za dużo.

Tworzenie Grida (siatki) na potrzeby strony

Grid można oczywiście napisać samemu. Zajmie to trochę czasu, ale nie ma ku temu żadnych przeszkód. Zajmie nam to jednak dobrą chwilę. Inną opcją są generatory.

Generatorów, które przyspieszą naszą pracę nigdy za wiele. I tak tym razem chciała wspomnieć o CSS Grid generator. Jeśli w tym momencie zdaje ci się, że nigdy nie spotkałeś się z gridem – radzę to uzupełnić tę zaległość. Wydaje mi się jednak, że jest ona bardziej językowa niż praktyczna.

CSS Grid Generator

To bardzo prosty generator. Ustalamy ilość kolumn i wierszy w siatce następnie

Layoutit! CSS Grid generator

Przyznam, ze to dość ciekawy generator umożliwiający tworzenie nie standardowych siatek. Mamy w nim możliwość nie tylko określić ilość kolumn i wierszy siatki, ale także to jak mają nazywać się nasze klasy (pola grida). Nie mamy więc specjalnie narzuconego nazewnictwa.

Obszary siatki wybieramy za pomocą kliknięcia. Następnie w celu utworzenia nowego pola trzeba zapisać to na którym obecnie pracujemy.

Generator cssgr.id


cssgr.id posiada praktycznie takie same funkcje jak poprzednie tyle, że po raz kolejny posiadamy tutaj inny rodzaj panelu. Przydatną funkcją tego narzędzia jest możliwość dodawania tekstu Lorem Ipsum. Autorem jest Dan Netherton.

CSS Grid Layout Generator

To kolejny generator na mojej liście. Jego autorem jest Dmitrija Bykowa. Generator ten dość mocno odbiega od poprzednich. Dysponuje on np. podglądem tego co zrobiliśmy czy zmianę koloru tła. Opanowanie go z pewnością chwilę zajmie – jednak w ostatecznym rozrachunku może to być bardzo dobre narzędzie do pracy.

CSS Grid Template Builder

Ten „generator” z kolei tak naprawdę nie daje nam już takiej swobody. Jesteśmy w dość mocny sposób ograniczeni do tego co miał na myśli twórca. Co prawda możemy decydować o ilości kolumn i wierszy w naszym projekcie jednak nie jest to już tak bardzo rozbudowane.

W sumie dodałam go bardziej jako ciekawostkę.

źródła: