CSS Grid Generatorius

Kas yra CSS Grid?

CSS Grid Layout yra dvimatis išdėstymo sistema, leidžianti vienu metu išdėstyti turinį eilutėse ir stulpeliuose. Ją įgalinate naudodami display: grid konteineryje, tada apibrėžiate stulpelių dydžius naudodami grid-template-columns ir eilučių dydžius naudodami grid-template-rows. Vienetas fr (frakcija) proporcingai paskirsto likusią vietą — pavyzdžiui, 1fr 2fr 1fr sukuria tris stulpelius, kuriame viduryje yra du kartus platesnė. Vidiniai elementai gali apimti kelias ląsteles naudodami grid-column: span 2 arba grid-row: span 3, leidžiančias sudėtingus asimetrinius išdėstymus. Skirtingai nei Flexbox (kuris yra vienmatis), CSS Grid skirtas dvimačiams puslapių lygio išdėstymams, pvz. žurnalo tinkleliai, skydai ir kelių stulpelių straipsniai.

Kaip naudoti CSS Grid Generatorių

• Nustatykite stulpelių ir eilučių skaičių naudodami skaičiaus įvestis (1–12 kiekviena).

• Nustatykite grid-template-columns, kad kontroliuotumėte stulpelio plotį (pvz. 1fr 2fr, 200px auto, repeat(3,1fr)).

• Panašiai nustatykite grid-template-rows arba palikite auto eilutėms tūrinį dydžiu.

• Nustatykite tarpinę reikšmę, kad kontroliuotumėte tarpą tarp ląstelių (priima bet kokį CSS ilgio vienetą).

• Spustelėkite bet kurią ląstelę peržiūroje, kad ją pasirinkumėte — pasirinktos ląstelės yra paryškintös.

• Nustatykite col-span ir row-span, tada spustelėkite Taikyti. Masyvusios ląstelės rodomos žaliai.

• Perjunkite tarp CSS ir HTML išvesties skirtukai ir spustelėkite Kopijuoti, kad pasiimtumėte sugeneruotą kodą.