⭐ 0
🔍
Teksts Attēls PDF un dokumenti Audio Mūzika Elektronika Laiks Komunālie pakalpojumi Validatori Ezotērisks Spēles

Svētā Grāla CSS režģa izkārtojums — gatavs kods

Vizuāli noformējiet CSS režģa izkārtojumus: iestatiet kolonnas, rindas un atstarpes, pēc tam ierakstiet šūnās apgabalu nosaukumus, lai izveidotu režģa veidņu apgabalus — ar tiešo priekšskatījumu un kopējamu CSS un HTML.

Ievadiet nosaukumu jebkurā zemāk esošajā šūnā; šūnas ar tādu pašu nosaukumu apvienojas vienā režģa-veidnes apgabalu reģionā.

Notiek apstrāde... 0%

Rezultāts

Šajā lapā tiek atvērts režģa ģenerators, kas ir iepriekš ielādēts ar Svētā Grāla izkārtojumu: trīs kolonnas un trīs rindas ar galveni un kājeni, kas aptver visu platumu, un starp tām ir navigācijas/galvenās/malas rinda. Galvenes rindā tiek izmantots automātiskais augstums, vidējā rinda aizpilda atlikušo vietu, un abas sānu kolonnas ir fiksētas uz 200 pikseļiem, bet galvenā kolonna aizņem pārējo.

Svētā Grāla izkārtojums ieguva savu nosaukumu, jo pirms CSS Grid to bija patiesi grūti uzticami izveidot — vairākus gadus ilgušais pludiņš, tabulu izkārtojumi un absolūtā pozicionēšana mēģināja viltot šo precīzo formu. Izmantojot režģa veidnes apgabalus, tas tiek sakļauts līdz pieciem nosauktajiem reģioniem un dažiem celiņu izmēriem, tāpēc tas joprojām ir standarta pirmais piemērs CSS režģa mācīšanai.

Katrs numurs un atstarpe šajā lapā joprojām ir aktuāla: samaziniet sānu kolonnas, pievienojiet ceturto rindu vai nekavējoties pārdēvējiet apgabalu un priekšskatījumu un kopējamo CSS atjauninājumu. Kopējiet CSS un HTML blokus tieši savā projektā — viss darbojas lokāli jūsu pārlūkprogrammā, nekas netiek augšupielādēts.

🛡️
Izpildīts pārlūkprogrammā

Jūsu faili un ievades dati nekad netiek atstāti no šīs ierīces. Apstrāde notiek pilnīgi bezsaistē. 100% drošs.

Pieņemtie formāti un noteikumi

  • Skaitļu ievade 1–6 kolonnām un rindām, kā arī atsevišķas kolonnu atstarpes un rindu atstarpes vadīklas, kas apvienojas vienā atstarpes vērtībā, kad tās sakrīt.
  • Nosaukto apgabalu režīms: ierakstiet apgabala nosaukumu tieši jebkurā reāllaika šūnā; rīks izveido derīgu grid-template-areas virkni un brīdina, ja nosaukumi neveido tīrus taisnstūrus.
  • Kopējams CSS bloks (displejs: režģis, režģa veidnes kolonnas/rindas, sprauga, režģa veidnes apgabali), kā arī atbilstošs HTML skelets ar vienu režģa apgabala divelementu katrā nosauktajā reģionā.

Galvenās priekšrocības

✓ Ierakstiet nosaukumu tieši jebkurā šūnā, un atbilstošie nosaukumi tiek apvienoti vienā režģa-veidnes apgabalu reģionā — bez vilkšanas atlases, nekādas pēdētās virknes sintakses uzminēšanas ar roku.
✓ Reāllaika priekšskatījuma režģis maina izmērus un maina krāsu katrā izmaiņā, tāpēc pirms vienas CSS rindiņas kopēšanas jūs redzat precīzu kolonnu un rindu celiņus un katru nosaukto reģionu.
✓ Sākotnējie iestatījumi, piemēram, klasiskais Svētā Grāla izkārtojums un šaura sānjosla, nodrošina reālu, funkcionējošu režģa-veidnes apgabalu deklarāciju, no kuras sākt tukša režģa vietā.

Lietošanas gadījumi

  • • Izveidojiet klasisko Svētā Grāla lapas apvalku — pilna platuma galveni un kājeni ar navigācijas/galvenās/malas vidējo rindu, ierakstot apgabalu nosaukumus, nevis ar roku rakstot režģa-veidnes apgabalus.
  • • Izvietojiet iestatījumu lapu vai administratora informācijas paneli ar fiksēta platuma sānjoslu blakus elastīgai satura kolonnai un nokopējiet precīzu CSS un HTML, tiklīdz tiešraides priekšskatījums izskatās pareizi.
  • • Pirms nosūtīšanas pārbaudiet, vai nosaukto apgabalu kopa patiešām veido derīgus taisnstūrus — rīks atzīmē precīzus nosaukumus, kas pārlūkprogrammā izjauktu režģa-veidnes apgabalus.