Flexbox i Grid generator rasporeda

Kako se koristi Flexbox i Grid generator

1. Izaberi Raspored: Flexbox ili Grid, ili kreni od jednog od Gotovi rasporedi (Centrirano, Navigaciona traka, Kartice u više redova, Bočna traka, Prilagodljiva mreža kartica, Sveti gral, 12 kolona).
2. Podesi 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 dele justify-content, align-items, align-content, row-gap (px) i column-gap (px).
3. Upravljaj stavkama u odeljku Stavke pomoću Dodaj stavku, Ukloni izabranu stavku i Resetuj izabranu stavku. Klikni stavku u pregledu (ili do nje dođi tasterom Tab i pritisni Enter) da je izabereš.
4. Uredi izabranu stavku: order i align-self u oba režima, flex-grow, flex-shrink i flex-basis za flexbox, te grid-area, grid-column, grid-row i justify-self za grid.
5. Kopiraj CSS kod i odgovarajući HTML kod njihovim dugmadima Kopiraj.

Svaka kontrola je standardno polje obrasca, pa ceo alat radi i samo sa tastaturom. CSS sadrži samo svojstva koja si promenio u odnosu na podrazumevana, što ga drži kratkim, a stavke sa istim podešavanjima dele jedno pravilo (.item kad se sve poklapaju).

Alat radi u tvom pregledaču. Ništa što upišeš ne šalje se na server.

Flexbox ukratko

Flexbox raspoređuje stavke duž jedne ose. flex-direction određuje glavnu osu (red ili kolonu), justify-content raspoređuje stavke duž nje (center, space-between…), a align-items ih postavlja na poprečnu osu. Uz flex-wrap: wrap stavke koje ne staju prelaze u novi red, a align-content tada razmiče te redove.

Svaka stavka 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: koliki deo slobodnog prostora stavka zauzima (0 = nimalo, 1 = jednak deo);
• flex-shrink: koliko popušta kad prostora nema dovoljno (0 = nikad se ne smanjuje).

Gotov raspored Bočna traka prikazuje klasičan obrazac: bočna traka sa flex-basis: 200px i flex-shrink: 0 i glavna oblast sa flex-grow: 1.

CSS Grid ukratko

Grid raspoređuje stavke u dve dimenzije. grid-template-columns: repeat(3, 1fr) pravi tri jednake kolone, a fr je deo slobodnog prostora. repeat(auto-fill, minmax(120px, 1fr)) pravi onoliko kolona od najmanje 120px koliko staje, što daje prilagodljivu mrežu kartica bez ijednog media upita.

Stavke popunjavaju ćelije redom, osim ako ih ne postaviš: grid-column: span 2 čini stavku širokom dve kolone, a grid-column: 1 / -1 je razvlači preko celog reda.

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