CSS Grid ģenerators

grid-template-areas deklarācija ir viens no lasāmākajiem CSS fragmentiem, kāds vien ir, bet tikai tad, kad tā jau eksistē — nonākt līdz tai ar rokām nozīmē skaitīt pēdiņās ievietotas virknes un saskaņot rindu garumus, un viena neatbilstoša šūna klusi salauž visu izkārtojumu. Šis ģenerators pārvērš to par tiešu manipulāciju: uzstādi kolonnu un rindu skaitu, ieraksti nosaukumu jebkurā tiešā režģa šūnā, un vienādie nosaukumi automātiski saplūst vienā nosauktā apgabalā.

Zem pārsega katra šūna, ko atstāj tukšu, kļūst par punktu ģenerētajā grid-template-areas virknē, un katra šūna, kurai piešķir nosaukumu, kļūst par daļu no šī nosaukuma taisnstūra. CSS atļauj nosauktajam apgabalam aizņemt tikai vienu nepārtrauktu taisnstūra bloku, tāpēc rīks to pārbauda rakstīšanas laikā un precīzi pasaka, kad nosaukums vēl neveido derīgu taisnstūri — tā vietā, lai klusējot ģenerētu CSS, ko pārlūkprogramma noraidīs.

Kolonnu atstarpe un rindu atstarpe pēc noklusējuma ir 8px un apvienojas vienā gap rindā, kad tās sakrīt, un tiešā priekšskatījuma režģis vienmēr atspoguļo tavus grid-template-columns un grid-template-rows celiņus, ieskaitot fiksētas pikseļu kolonnas no iepriekš sagatavota izkārtojuma, piemēram, „svētā grāla” 200px sānu sliedēm. Kopējamā izvade aptver abas puses: CSS bloku, kas gatavs tavai stilu lapai, un atbilstošu HTML skeleta kodu ar vienu grid-area div katram nosauktajam apgabalam.

Grid un flexbox risina dažādas izkārtojuma problēmas, un css-flexbox-generator šajā vietnē ir labāks sākumpunkts vienas dimensijas izkārtojumiem — vienai rindai vai kolonnai ar elastīgiem elementiem, piemēram, navigācijas joslai vai karšu kaudzītei. Izmanto šo grid ģeneratoru, ja tev vajag divdimensiju kontroli, skaidri definētas rindas un kolonnas vai nosauktus apgabalus, piemēram, galvene/navigācija/saturs/kājene; abi rīki bieži nonāk vienā lapā — grid lapas čaulai un flexbox tās daļu iekšienē. Tāpat kā visi šīs vietnes rīki, tas darbojas pilnībā tavā pārlūkprogrammā — bez augšupielādes, bez konta.