CSS tinklelio generatorius
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.
Rezultatas
Tinklelio šablono sričių deklaracija yra viena skaitomiausių CSS dalių, bet tik tada, kai ji egzistuoja – ranka pasiekiama reiškia, kad reikia skaičiuoti kabutes ir suderinti eilučių ilgį, o vienas nesutampantis langelis tyliai pažeidžia visą išdėstymą. Šis generatorius paverčia tai tiesioginiu manipuliavimu: nustatykite stulpelių ir eilučių skaičių, įveskite pavadinimą į bet kurį tiesioginio tinklelio langelį, o atitinkantys pavadinimai automatiškai susilieja į vieną pavadintą regioną.
Po gaubtu kiekviena ląstelė, kurią paliekate tuščią, tampa tašku sugeneruotoje tinklelio-šablono sričių eilutėje, o kiekviena jūsų pavadinta ląstelė tampa to pavadinimo stačiakampio dalimi. CSS leidžia pavadintam regionui užimti tik vieną švarų stačiakampį bloką, todėl įrankis tikrina tai vedant ir tiksliai nurodo, kada pavadinimas dar nesudaro tinkamo stačiakampio – užuot tyliai gaminusi CSS, naršyklė atmes.
Stulpelių tarpas ir tarpas tarp eilučių numatytasis yra 8 pikseliai ir, kai jie sutampa, sujungiami į vieną tarpo eilutę, o tiesioginės peržiūros tinklelis visada atspindi tinklelio šablono stulpelius ir tinklelio šablono eilučių takelius, įskaitant fiksuotus pikselių stulpelius iš išankstinio nustatymo, pavyzdžiui, Šventojo Gralio 200 pikselių šoninius bėgius. Kopijuojama išvestis apima abi puses: CSS bloką, paruoštą jūsų stiliaus lapui, ir atitinkamą HTML skeletą su vienu tinklelio srities div kiekviename pavadintame regione.
Tinklelis ir „flexbox“ išsprendžia įvairias išdėstymo problemas, o šioje svetainėje esantis „css-flexbox“ generatorius yra geresnis atspirties taškas vienmačiams maketams – viena lanksčių elementų eilutė arba stulpelis, pvz., naršymo juosta arba kortelių šūsnis. Vietoj to pasiekite šį tinklelio generatorių, kai reikia dvimačio valdymo, aiškių eilučių ir stulpelių arba pavadintų regionų, pvz., antraštės / navigacijos / pagrindinio / poraštės; du įrankiai dažnai patenka į tą patį puslapį, puslapio apvalkalo tinklelį ir lanksčią dėžę jo dalių viduje. Kaip ir kiekvienas šios svetainės įrankis, jis veikia tik jūsų naršyklėje – jokio įkėlimo, jokios paskyros.