Flexbox i CSS Grid generator

Kako koristiti flexbox i grid generator

1. Odaberi Raspored: Flexbox ili Grid, ili kreni od jednog od Predložaka (Centrirano, Navigacijska traka, Kartice u više redaka, Bočna traka, Responzivna mreža kartica, Sveti gral, 12 stupaca).
2. Postavi svojstva Kontejnera. 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 Elementima pomoću Dodaj element, Ukloni odabrani element i Resetiraj 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 kod i pripadajući HTML kod njihovim gumbima Kopiraj.

Svaka kontrola standardno je polje obrasca pa cijeli generator radi samo uz tipkovnicu. 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 podudaraju).

Alat radi u tvom pregledniku. Ništa što upišeš ne šalje se na poslužitelj.

Flexbox ukratko

Flexbox raspoređuje elemente duž jedne osi. flex-direction postavlja glavnu os (redak ili stupac); 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 redak, a align-content tada razmiče te retke.

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 udio);
• flex-shrink: koliko popušta kad prostora nema dovoljno (0 = nikad se ne smanjuje).

Predložak Bočna traka pokazuje klasični 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) stvara tri jednaka stupca; fr je udio slobodnog prostora. repeat(auto-fill, minmax(120px, 1fr)) stvara onoliko stupaca od najmanje 120px koliko ih stane, čime nastaje responzivna mreža kartica bez ijednog media querya.

Elementi redom popunjavaju ćelije osim ako ih sam ne smjestiš: grid-column: span 2 čini element širokim dva stupca, a grid-column: 1 / -1 rasteže ga preko cijelog retka.

grid-template-areas omogućuje da raspored nacrtaš nazivima. Upiši jedan redak po retku, na primjer header header pa nav main, i elementima dodijeli grid-area: header ili grid-area: main. Točka označava praznu ćeliju. Svaki redak treba imati jednak broj ćelija, a svaki naziv mora činiti pravokutnik; u suprotnom te alat upozorava.