[ Darmowe narzędzie CSS ]
Wizualny kreator layoutów CSS Grid do projektowania stron internetowych. Definiuj kolumny, wiersze, gap i wyrównanie — generuj gotowy kod z media queries.
Gotowe presety
Breakpoint
Wyrównanie
Styl
Podgląd — desktop
kliknij element aby edytować
/* Mobile — max-width: 639px */
.grid-container {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(3, minmax(60px, auto));
column-gap: 16px;
row-gap: 16px;
}
/* Tablet — min-width: 640px */
@media (min-width: 640px) {
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, minmax(60px, auto));
column-gap: 16px;
row-gap: 16px;
}
}
/* Desktop — min-width: 1024px */
@media (min-width: 1024px) {
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, minmax(60px, auto));
column-gap: 16px;
row-gap: 16px;
}
}
/* Item base styles */
.grid-item {
border-radius: 8px;
padding: 1rem;
}
/* Item-specific overrides */Edytor elementu
Kliknij element w podglądzie, aby edytować jego właściwości grid.
Szybka pomoc
[ Dokumentacja ]
Kluczowe koncepty CSS Grid, które każdy twórca stron internetowych powinien znać.
CSS Grid to system dwuwymiarowy — kontrolujesz kolumny i wiersze jednocześnie. Idealny do budowania layoutu całej strony internetowej. Flexbox sprawdza się w układaniu elementów w jednym wymiarze — nawigacja, przyciski, listy.
Jednostka fr (fraction) reprezentuje ułamek dostępnej przestrzeni. grid-template-columns: 1fr 2fr 1fr tworzy trzy kolumny, gdzie środkowa jest dwukrotnie szersza. To podstawa przy tworzeniu responsywnych stron internetowych.
Funkcja minmax(min, max) definiuje przedział rozmiarów komórki. Przykład: minmax(150px, 1fr) — minimum 150px, maksimum cała dostępna przestrzeń. Używaj przy projektowaniu elastycznych siatek stron www.
repeat(auto-fill, minmax(200px, 1fr)) automatycznie dopasowuje liczbę kolumn. auto-fill zachowuje puste kolumny, auto-fit rozciąga elementy wypełniając pustą przestrzeń. Doskonałe do galerii i sklepów internetowych.
Właściwość grid-template-areas pozwala nazwać regiony siatki tekstowo. Przykład: "header header" "nav main" "footer footer". Każdy element przypisujesz przez grid-area: header. Czytelne przy tworzeniu stron www.
Subgrid (grid-template-columns: subgrid) pozwala elementom potomnym dziedziczyć ścieżki siatki rodzica. Rozwiązuje problemy z wyrównaniem zagnieżdżonych elementów w projektowaniu stron internetowych. Obsługiwany od Chrome 117+.
[ Studio Kalmus ]
Generator Siatki CSS Grid to bezpłatne narzędzie stworzone przez Studio Kalmus — agencję specjalizującą się w projektowaniu stron internetowych i tworzeniu stron www.
CSS Grid zrewolucjonizował sposób budowania layoutów stron internetowych. Zamiast zagnieżdżonych divów z float i clearfix, teraz projektowanie stron sprowadza się do kilku deklaratywnych właściwości na kontenerze. Rezultat: czystszy kod, lepsza responsywność i łatwiejsze utrzymanie serwisu.
Nasz generator pozwala wizualnie skonfigurować siatkę, ustawić wyrównanie, zdefiniować breakpointy dla mobile/tablet/desktop i jednym kliknięciem skopiować gotowy kod CSS z media queries do swojego projektu strony internetowej.
CSS Grid umożliwia tworzenie złożonych layoutów stron www bez zbędnych hacków. Idealne do landing page, blogów, sklepów i paneli administracyjnych.
Dzięki auto-fill, minmax() i fr units możesz tworzyć siatki które automatycznie dostosowują się do szerokości ekranu bez nadmiaru media queries.
Czysty CSS Grid generowany przez nasze narzędzie działa we wszystkich nowoczesnych przeglądarkach bez żadnych zależności od zewnętrznych bibliotek.
[ FAQ ]
Odpowiedzi na najczęstsze pytania o CSS Grid i projektowanie stron internetowych.
[ Studio Kalmus ]
Studio Kalmus zajmuje się projektowaniem stron internetowych, tworzeniem stron www oraz pozycjonowaniem. Budujemy z CSS Grid, Tailwind i nowoczesnym stackiem — zadbamy o każdy piksel layoutu.