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

CSS Grid generatorius

Kurkite CSS Grid maketus vizualiai: nustatykite stulpelius, eilutes ir tarpus, tada įveskite sričių pavadinimus į langelius, kad sukurtumėte grid-template-areas – su tiesiogine peržiūra ir nukopijuojamu CSS bei HTML kodu.

🔒 Visiškai apdorojama jūsų naršyklėje – niekas, kurį čia įvedėte, niekada neįkeliama.

Įveskite pavadinimą į bet kurį žemiau esantį langelį; langeliai su tuo pačiu pavadinimu sujungiami į vieną grid-template-areas regioną.

Apdorojama... 0%

Rezultatas

grid-template-areas deklaracija yra viena įskaitomiausių CSS dalių, tačiau tik tada, kai ji jau egzistuoja – ją sukurti ranka reiškia skaičiuoti kabutėse rašomas eilutes ir derinti eilučių ilgius, o vienas nesutampantis langelis tyliai sugadina visą maketą. Šis generatorius paverčia tai tiesioginiu manipuliavimu: nustatykite stulpelių ir eilučių skaičių, įveskite pavadinimą į bet kurį gyvo tinklelio langelį, o sutampantys pavadinimai automatiškai sujungiami į vieną pavadintą sritį.

Užkulisiuose kiekvienas langelis, kurį paliekate tuščią, sugeneruotoje grid-template-areas eilutėje virsta tašku, o kiekvienas pavadintas langelis tampa to pavadinimo stačiakampio dalimi. CSS leidžia pavadintai sričiai užimti tik vieną vientisą stačiakampį bloką, todėl įrankis tai tikrina jums rašant ir tiksliai praneša, kai pavadinimas dar nesudaro tinkamo stačiakampio – užuot tyliai generavęs CSS, kurį naršyklė atmes.

Stulpelių tarpas ir eilučių tarpas pagal nutylėjimą yra 8px, o kai jie sutampa, sujungiami į vieną gap eilutę, o tiesioginės peržiūros tinklelis visada atspindi jūsų grid-template-columns ir grid-template-rows takelius, įskaitant fiksuoto pikselių pločio stulpelius iš šablono, pavyzdžiui, holy grail 200px šonines juostas. Kopijuojamas rezultatas apima abi puses: CSS bloką, paruoštą jūsų stilių failui, ir atitinkamą HTML karkasą su po vieną grid-area div kiekvienai pavadintai sričiai.

Grid ir flexbox sprendžia skirtingas maketavimo problemas, o šioje svetainėje esantis css-flexbox-generator yra geresnis pradžios taškas vienmatėms struktūroms – vienai lanksčių elementų eilutei ar stulpeliui, pavyzdžiui, navigacijos juostai ar kortelių krūvai. Šį tinklelio generatorių rinkitės tuomet, kai reikia dvimačio valdymo, aiškių eilučių ir stulpelių arba pavadintų sričių, tokių kaip header/nav/main/footer; abu įrankiai dažnai atsiduria tame pačiame puslapyje – grid puslapio apvalkalui, o flexbox jo dalims. Kaip ir visi šios svetainės įrankiai, jis veikia tik jūsų naršyklėje – be įkėlimo, be paskyros.

Patinka šis įrankis? Manote, kad šis produktas naudingas? Matote jame potencialo ir norite paremti?

🛡️
Vykdoma naršyklėje

Jūsų bylos ir įvestys niekada nepalieka šio įrenginio. Apdorojimas vyksta visiškai atsijungus. 100 % saugu.

Priimtini formatai ir taisyklės

  • Skaičių įvesties laukai 1–6 stulpeliams ir eilutėms bei atskiri stulpelių tarpo ir eilučių tarpo valdikliai, kurie sutapus sujungiami į vieną gap reikšmę.
  • Pavadintų sričių režimas: tiesiogiai įveskite srities pavadinimą į bet kurį gyvo tinklelio langelį; įrankis sukuria tinkamą grid-template-areas eilutę ir įspėja, kai pavadinimai nesudaro vientisų stačiakampių.
  • Kopijuojamas CSS blokas (display: grid, grid-template-columns/rows, gap, grid-template-areas) ir atitinkamas HTML karkasas su po vieną grid-area div kiekvienai pavadintai sričiai.

Pagrindiniai privalumai

✓ Tiesiogiai įveskite pavadinimą į bet kurį langelį ir tie pavadinimai, kurie sutampa, automatiškai sujungiami į vieną grid-template-areas sritį – nereikia pele žymėti ar rašyti kabutėse pateikiamos sintaksės ranka.
✓ Kiekvieną pakeitimą tiesioginė peržiūra atvaizduoja keisdama tinklelio dydį ir spalvas, todėl matote tikslius stulpelių ir eilučių takelius bei kiekvieną pavadintą sritį prieš kopijuojant nors vieną CSS eilutę.
✓ Tokie šablonai kaip klasikinis holy grail maketas ir siaura šoninė juosta suteikia realią, veikiančią grid-template-areas deklaraciją pradžiai, o ne tuščią tinklelį.

Naudojimo atvejai

  • • Sukurkite klasikinį puslapio išdėstymą „šventasis gralis“ – viso pločio antraštę ir poraštę, vidurinę eilutę su navigacija, turiniu ir šonine juosta – tiesiog įvesdami sričių pavadinimus, užuot rašę grid-template-areas ranka.
  • • Sudėliokite nustatymų puslapį ar administratoriaus panelę su fiksuoto pločio šonine juosta šalia lankstaus turinio stulpelio ir, kai tiesioginė peržiūra atrodys gerai, nusikopijuokite tikslų CSS ir HTML kodą.
  • • Prieš paleisdami į darbą patikrinkite, ar įvardytos sritys tikrai sudaro taisyklingus stačiakampius – įrankis pažymi konkrečius pavadinimus, dėl kurių naršyklėje sugestų grid-template-areas.