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

3 vienādu kolonnu 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, kas iestatīts uz trim vienāda platuma kolonnām vienā rindā, un nosauktie apgabali ir izslēgti — izkārtojums ir tikai atkārtojums (3, 1fr), kas ir īsākais veids, kā pateikt "trīs kolonnas, kas vienmēr vienmērīgi sadala pieejamo platumu".

Vienāda platuma kolonnas ir karšu režģu, cenu tabulu un attēlu galeriju darba zirgs: nevienam apgabalam nav nepieciešams nosaukums, jo katrai kolonnai ir viena un tā pati loma, tāpēc vienkārša sliežu ceļa lieluma noteikšana ir skaidrāka nekā režģa veidnes apgabalu deklarācija. Pievienojiet rindu, un apakšā atkārtojiet tās pašas trīs dziesmas, joprojām pilnīgi vienmērīgi.

Palieliniet kolonnu skaitu, lai izveidotu blīvāku režģi, vai ieslēdziet nosauktos apgabalus, ja vēlākai kolonnai ir jāizceļas no pārējām — tālāk norādītais CSS un HTML tiek atjaunināts brīdī, kad to darāt. Viss darbojas klienta pusē, tāpēc nav ko augšupielādēt un nav ko gaidīt.

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