Plac zabaw CSS Flexbox i Grid

Czym jest Plac zabaw CSS Flexbox i Grid?

Plac zabaw CSS Flexbox i Grid to darmowa wizualna piaskownica do nauki i prototypowania dwóch głównych modeli układu CSS, stworzona dla deweloperów front-end, uczniów i projektantów. Wybierz Flex lub Grid, ustaw właściwości kontenera i otwórz Ustawienia, aby nadać styl poszczególnym dzieciom: order, flex-grow, flex-shrink, flex-basis i align-self w trybie Flex, albo rozpiętość kolumny/wiersza i align-self w trybie Grid. Tryb Grid oferuje też własne rozmiary ścieżek — wpisz dowolną wartość grid-template-columns/rows, np. 200px 1fr lub repeat(auto-fit, minmax(120px, 1fr)) — oraz wizualny edytor grid-template-areas, w którym nazywasz każdą komórkę, co tworzy również nazwane linie siatki. Podgląd na żywo ponumerowanych kafelków odzwierciedla każdą zmianę, a możesz wyeksportować samą regułę .container albo kontener plus CSS per element.

Jak używać Plac zabaw CSS Flexbox i Grid

1. Wybierz Flex lub Grid przełącznikiem trybu, aby zdecydować, który model układu budujesz.
2. Ustaw właściwości kontenera — flex-direction/wrap i justify/align, albo liczbę kolumn i wierszy z justify-items/align-items.
3. Otwórz Ustawienia, aby zmienić gap i liczbę elementów oraz nadać styl każdemu dziecku (order, flex-grow/shrink/basis, align-self lub rozpiętość kolumny/wiersza).
4. W Grid przełącz rozmiar ścieżek na Własny, aby wpisać własne grid-template-columns/rows — px, fr, minmax() lub repeat(auto-fit/auto-fill, …).
5. Włącz edytor grid-template-areas i nazwij każdą komórkę, aby rozmieszczać elementy według obszaru.
6. Wybierz eksport samego CSS kontenera albo kontenera plus CSS per element i skopiuj wynik.

Przykłady

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

.container > :nth-child(2) {
  flex-grow: 1;
}

Najczęściej zadawane pytania

Jaka jest tutaj różnica między Flexbox a Grid?

Tryb Flex rozkłada elementy wzdłuż jednej osi i udostępnia flex-direction, flex-wrap, justify-content i align-items. Tryb Grid układa je w dwóch wymiarach za pomocą grid-template-columns i grid-template-rows oraz justify-items i align-items. Przełącz tryb przełącznikiem, aby porównać, jak każdy radzi sobie z tym samym wyrównaniem.

Jak nadać styl pojedynczym elementom?

Otwórz Ustawienia i za pomocą ustawień per element ustaw order, flex-grow, flex-shrink, flex-basis i align-self (Flex) lub rozpiętość kolumny/wiersza i align-self (Grid) dla każdego dziecka. Ustaw Eksport na 'Kontener + elementy', a narzędzie doda regułę .container > :nth-child(n) dla każdego dostosowanego elementu.

Czy mogę używać własnych rozmiarów ścieżek, jak auto-fit lub minmax()?

Tak. W trybie Grid przełącz rozmiar ścieżek na Własny i wpisz dowolną prawidłową wartość grid-template-columns/rows — piksele, jednostki fr, minmax() lub repeat(auto-fit/auto-fill, minmax(120px, 1fr)) dla responsywnych kolumn. Podgląd i wygenerowany CSS aktualizują się podczas pisania.

Co robi edytor grid-template-areas?

Włącz go w trybie Grid i nazwij każdą komórkę siatki; narzędzie składa deklarację grid-template-areas, a puste komórki stają się kropką. Nazywanie obszarów tworzy też nazwane linie siatki, a dziecko możesz umieścić w obszarze, wpisując jego nazwę w polu grid-area tego elementu.

Czy moje dane są gdzieś przesyłane?

Nie. Plac zabaw działa w całości w Twojej przeglądarce za pomocą JavaScript, więc Twoje ustawienia i wygenerowany CSS nigdy nie są wysyłane na serwer. Działa prywatnie, a nawet offline po wczytaniu strony.