0

CSS režģa ģenerators

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

Režģa veidnes apgabalu deklarācija ir viena no lasāmākajām CSS daļām, kas pastāv, taču tikai tad, kad tā pastāv, — tās iegūšana ar roku nozīmē pēdiņās norādīto virkņu saskaitīšanu un rindu garumu saskaņošanu, un viena neatbilstoša šūna klusi pārtrauc visu izkārtojumu. Šis ģenerators to pārvērš tiešā manipulācijā: iestatiet kolonnu un rindu skaitu, ierakstiet nosaukumu jebkurā reāllaika šūnā, un atbilstošie nosaukumi automātiski saplūst vienā nosauktā reģionā.

Zem pārsega katra šūna, kuru atstājat tukšu, kļūst par punktu ģenerētajā režģa-veidnes apgabalu virknē, un katra jūsu nosauktā šūna kļūst par šī nosaukuma taisnstūra daļu. CSS ļauj nosauktam reģionam aizņemt tikai vienu tīru taisnstūra bloku, tāpēc rīks to pārbauda, ​​kad rakstāt, un precīzi norāda, kad nosaukums vēl neveido derīgu taisnstūri — tā vietā, lai klusi izveidotu CSS, pārlūkprogramma to noraidīs.

Kolonnu atstarpe un rindu atstarpe pēc noklusējuma ir 8 pikseļi un apvienojas vienā atstarpes līnijā, kad tie sakrīt, un tiešraides priekšskatījuma režģis vienmēr atspoguļo jūsu režģa-veidnes kolonnas un režģa-veidnes rindu ierakstus, tostarp fiksēto pikseļu kolonnas no iepriekš iestatīta, piemēram, Svētā Grāla 200 pikseļu sānu sliedes. Kopējamā izvade aptver abas puses: CSS bloku, kas ir gatavs jūsu stila lapai, un atbilstošu HTML skeletu ar vienu režģa apgabala div katrā nosauktajā reģionā.

Režģis un flexbox atrisina dažādas izkārtojuma problēmas, un šajā vietnē esošais css-flexbox ģenerators ir labāks sākumpunkts viendimensijas izkārtojumiem — viena elastīgu vienumu rinda vai kolonna, piemēram, navigācijas josla vai karšu kaudze. Tā vietā izmantojiet šo režģa ģeneratoru, kad nepieciešama divdimensiju vadība, precīzas rindas un kolonnas vai nosaukti reģioni, piemēram, galvene/nav/galvenā/kājene; abi rīki bieži nonāk vienā lapā, lapas apvalka režģī un flexbox tās daļās. Tāpat kā katrs rīks šajā vietnē, tas pilnībā darbojas jūsu pārlūkprogrammā — bez augšupielādes, bez konta.