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

Sānjosla + satura CSS režģa izkārtojums

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 ar divu kolonnu vienas rindas izkārtojumu, kas jau ir nosaukts: 200 pikseļu sānjoslas kolonna blakus elastīgai satura kolonnai, kas aizņem atlikušo vietu. Tiešajā priekšskatījumā abi apgabali ir uzreiz redzami, iekrāsoti un marķēti, lai sadalījums būtu acīmredzams vienā mirklī.

Šī ir visizplatītākā navigācijas un satura forma tīmeklī — iestatījumu lapas, dokumentācijas vietnes un administratora informācijas paneļi ir balstīti uz fiksēta platuma sliedi blakus plūstošai galvenajai zonai. Tā kā sānjoslas kolonna izmanto pikseļu vērtību, bet satura kolonna izmanto 1fr, sānjoslas platums paliek nemainīgs, bet satura kolonna absorbē katru papildu skata loga pikseļu.

Pārdēvējiet kādu no apgabaliem, mainiet kolonnas platumu vai pievienojiet vairāk rindu galvenei virs sadalījuma — zemāk esošā CSS un HTML izvade izseko katru labojumu reāllaikā. Šis rīks ir bezmaksas, un tas pilnībā darbojas jūsu pārlūkprogrammā bez augšupielādes un konta.

🛡️
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.