⭐ 0
🔍
Tekstas Vaizdas PDF ir dokumentai Garsas Muzika Elektronika Laikas Komunalinės paslaugos Validatoriai Ezoterinis Žaidimai

3 lygių stulpelių CSS tinklelio išdėstymas

Sukurkite CSS tinklelio išdėstymą vizualiai: nustatykite stulpelius, eilutes ir tarpus, tada įveskite sričių pavadinimus į langelius, kad sukurtumėte tinklelio šablono sritis – su tiesiogine peržiūra ir kopijuojamu CSS ir HTML.

Įveskite pavadinimą į bet kurį toliau esantį langelį; langeliai tuo pačiu pavadinimu susilieja į vieną tinklelio-šablono sričių sritį.

Apdorojama... 0%

Rezultatas

Šiame puslapyje atidaromas tinklelio generatorius, nustatytas į tris vienodo pločio stulpelius vienoje eilutėje, išjungus pavadintas sritis – išdėstymas yra tiesiog kartojimas (3, 1fr), trumpiausias būdas pasakyti „trys stulpeliai, kurie visada tolygiai padalija galimą plotį“.

Vienodo pločio stulpeliai yra kortelių tinklelių, kainodaros lentelių ir vaizdų galerijų darbo arkliukas: jokiai sričiai nereikia įvardyti, nes kiekvienas stulpelis atlieka tą patį vaidmenį, todėl paprastas takelio dydis yra aiškesnis nei tinklelio šablono sričių deklaracija. Pridėkite eilutę ir apačioje kartojasi tie patys trys takeliai, vis tiek visiškai tolygūs.

Padidinkite stulpelių skaičių, kad tinklelis būtų tankesnis, arba įjunkite pavadintas sritis, jei vėlesnis stulpelis turi išsiskirti iš kitų – toliau pateikti CSS ir HTML atnaujinami tą akimirką, kai tai padarysite. Viskas veikia kliento pusėje, todėl nėra ką įkelti ir nieko laukti.

🛡️
Vykdoma naršyklėje

Jūsų failai ir įvestis niekada nepalieka šio įrenginio. Apdorojimas vykdomas visiškai neprisijungus. 100% saugus.

Priimami formatai ir taisyklės

  • 1–6 stulpelių ir eilučių skaičių įvestis, taip pat atskiri stulpelių tarpo ir eilučių tarpo valdikliai, kurie sutampa sujungiami į vieną tarpo reikšmę.
  • Pavadintų sričių režimas: įveskite srities pavadinimą tiesiai į bet kurį tiesioginio tinklelio langelį; įrankis sukuria galiojančią tinklelio šablono sričių eilutę ir įspėja, kai pavadinimai nesudaro švarių stačiakampių.
  • Kopijuojamas CSS blokas (rodymas: tinklelis, tinklelio šablono stulpeliai/eilutės, tarpas, tinklelio šablono sritys) ir atitinkamas HTML skeletas su vienu tinklelio srities div kiekviename pavadintame regione.

Pagrindiniai privalumai

✓ Įveskite pavadinimą tiesiai į bet kurį langelį ir atitinkantys pavadinimai susilieja į vieną tinklelio-šablono sričių sritį – jokio vilkimo pasirinkimo, kabučių eilutės sintaksės atspėjimo ranka.
✓ Tiesioginės peržiūros tinklelio dydis keičiasi ir keičia spalvas kiekvieną kartą pakeitus, todėl prieš nukopijuodami vieną CSS eilutę matote tikslius stulpelių ir eilučių takelius bei kiekvieną pavadintą regioną.
✓ Išankstiniai nustatymai, tokie kaip klasikinis šventojo gralio išdėstymas ir siaura šoninė juosta, suteikia jums tikrą, veikiančią tinklelio-šablono sričių deklaraciją, nuo kurios galite pradėti, o ne nuo tuščios tinklelio.

Naudojimo atvejai

  • • Sukurkite klasikinį Holy Grail puslapio apvalkalą – viso pločio antraštę ir poraštę su naršymo/pagrindine/šaline vidurine eilute – įvesdami sričių pavadinimus, o ne ranka rašydami tinklelio-šablono sritis.
  • • Šalia lankstaus turinio stulpelio išdėstykite nustatymų puslapį arba administratoriaus prietaisų skydelį su fiksuoto pločio šonine juosta ir nukopijuokite tikslų CSS ir HTML, kai tiesioginė peržiūra atrodys tinkama.
  • • Prieš išsiųsdami patikrinkite, ar pavadintų sričių rinkinys iš tikrųjų sudaro tinkamus stačiakampius – įrankis pažymi tikslius pavadinimus, kurie naršyklėje sulaužytų tinklelio šablono sritis.