Flexbox i Grid generator

Kako koristiti igralište za flexbox i grid

1. Odaberi Raspored: Flexbox ili Grid, ili kreni od jednog od Predlošci (Centrirano, Navigaciona traka, Kartice u više redova, Bočna traka, Responzivna mreža kartica, Holy grail, 12 kolona).
2. Postavi svojstva Kontejner. Za flexbox: flex-direction i flex-wrap. Za grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items i grid-template-areas. Oba dijele justify-content, align-items, align-content, row-gap (px) i column-gap (px).
3. Upravljaj stavkama u dijelu Elementi pomoću Dodaj element, Ukloni odabrani element i Vrati odabrani element. Klikni element u pregledu (ili do njega dođi tipkom Tab i pritisni Enter) da ga odabereš.
4. Uredi odabrani element: order i align-self u oba načina, flex-grow, flex-shrink i flex-basis za flexbox te grid-area, grid-column, grid-row i justify-self za grid.
5. Kopiraj CSS kôd i odgovarajući HTML kôd njihovim dugmadima Kopiraj.

Svaka kontrola je standardno polje obrasca, pa cijelo igralište radi samo s tastaturom. CSS sadrži samo svojstva koja si promijenio u odnosu na zadana, što ga drži kratkim, a elementi s istim postavkama dijele jedno pravilo (.item kad se svi poklapaju).

Sve se događa u tvom pregledniku. Ništa što upišeš ne šalje se na server.

Flexbox ukratko

Flexbox raspoređuje elemente duž jedne ose. flex-direction postavlja glavnu osu (red ili kolonu); justify-content raspoređuje elemente duž nje (center, space-between…), a align-items ih pozicionira na poprečnoj osi. Uz flex-wrap: wrap elementi koji ne stanu prelaze u novi red, a align-content zatim razmiče te redove.

Svaki element ima tri svojstva veličine, koja se obično pišu zajedno kao flex:

• flex-basis: početna veličina (auto koristi sadržaj ili width);
• flex-grow: koliko slobodnog prostora element preuzima (0 = ništa, 1 = jednak dio);
• flex-shrink: koliko se smanjuje kad nema dovoljno prostora (0 = nikad se ne smanjuje).

Predložak Bočna traka prikazuje klasičan obrazac: bočna traka s flex-basis: 200px i flex-shrink: 0 te glavno područje s flex-grow: 1.

CSS Grid ukratko

Grid raspoređuje elemente u dvije dimenzije. grid-template-columns: repeat(3, 1fr) pravi tri jednake kolone; fr je dio slobodnog prostora. repeat(auto-fill, minmax(120px, 1fr)) pravi onoliko kolona od najmanje 120px koliko stane, što daje responzivnu mrežu kartica bez ijednog media upita.

Elementi popunjavaju ćelije redom, osim ako ih ne postaviš: grid-column: span 2 čini element širokim dvije kolone, a grid-column: 1 / -1 ga razvlači preko cijelog reda.

grid-template-areas omogućava da raspored „nacrtaš“ nazivima. Upiši jedan red po liniji, na primjer header header pa nav main, i elementima daj grid-area: header ili grid-area: main. Tačka označava praznu ćeliju. Svaki red mora imati isti broj ćelija, a svaki naziv mora činiti pravougaonik; alat te upozorava ako nije tako.