Gettin 'Griddy With It: izveidojiet savu CSS režģi un nometiet ietvarus

Gandrīz katra priekšējā izstrādātāja ceļojums sākas ar pamata HTML, CSS, JavaScript ceļu. Jūs sākat ar struktūru, lai tā izskatās pienācīga, un pēc tam liek tai kaut ko darīt. Tomēr kaut kur brauciena laikā ir viegli nokļūt CSS ietvaru pasaulē un pārspīlēt dažas sīkākas detaļas.

Bootstrap nāk kopā ar savu jauko jauko režģi, izmantojot tikai dažas klases un CDN, lai izveidotu šo jauko diezgan mobilajām ierīcēm piemēroto režģi. Un pirms jūs to zināt, jūs sākat sasniegt šo ietvaru ikreiz, kad izveidojat projektu, kuram nepieciešams režģa izkārtojums. Es bieži darīju to pašu, tas ir, līdz es sāku “Gettin 'Griddy With It”.

Tas, kas mani sūtīja pa CSS režģa apguves ceļu, bija tas, ka, mēģinot izveidot vietni, izmantojot Semantic UI React (skaistāku un mazāk neskaidru sāknēšanas siksnu). Tomēr, veidojot režģi, es nevarēju likt divām kolonnām sēdēt vienā līmenī viens ar otru un galu galā sajaucās ar katru piemales un polsterējuma likumu zem saules, lai ignorētu stilus, kādos ietvertā sistēma bija iebūvēta. Tā bija nomākta pieredze, un es pavadīju vairāk laika, lai sajauktu ar specifikas noteikumiem, nekā faktiski kodējot.

Tajā parādās CSS režģis. CSS režģis ir salīdzinoši jauns CSS3 papildinājums, un zēns ir tas, ka tas ir dumjš. Dodoties uz importētu režģa sistēmu, rodas daži jautājumi:

  1. Palielināts failu lielums. Jo vairāk jūs importējat, jo lielāka kļūst jūsu lietotne. Brīdī, kad ātrums ir galvenais, lietotnes faila lieluma samazināšana ir neticami svarīga ideja, kas jāņem vērā. Tā vietā, lai importētu ietvaru vai paļautos uz lēnu CDN, jūs varat izveidot savu.
  2. Mazāk lasāms kods. Tie no jums, kas ir izmantojuši sistēmu, zina aizvien sarežģītākos un neskaidrākos klases nosaukumus, kas tam pievienoti. Kurš uzreiz neatpazīst to, kas class="col-6 col-md-4 col-sm-12"nozīmē? Vai kurš vēlas beigt rakstīt div.ui.segment.inverted.stackable.desktop.twelve.mobile.sixteensavā CSS?
  3. Mazāk pielāgošanas. Iebūvētos ietvara noteikumus var būt grūti ignorēt. Jūs varat iegūt garu klašu nosaukumus, lai iegūtu pareizu specifiku, vai galu galā ar rindu pēc !importanttagu rindas, lai izveidotu pielāgotus stilus, kas ignorē ietvaru. CSS Grid burvība ir tāda, ka jūs varat izveidot pats un pielāgot to savām vajadzībām, nevis paļauties uz citiem, kuriem nav bijusi prātā jūsu projekta specifika.

Atsaucīgs CSS režģis

CSS režģis būtībā ir lodziņu grupa, kuru varat ievietot lapā. Jūs varat izmantot skaitļu vienības, lai palielinātu lodziņus, vai relatīvos izmērus, lai padarītu to atsaucīgāku. Tā kā ekrāna izmēri ir ļoti dažādi, tas ir liels plus. Pieņemsim, ka vēlaties izveidot sešu divu izkārtojumu un vēlaties, lai tie reaģētu ar vairākām kolonnām dažādiem ekrāna izmēriem.

Tas izskatās neformatēts kā seši divskonteinerā.

Tā vietā, lai pievienotu klases katrai pārtraukuma vietai, varat iestatīt minimālo div lielumu režģī un pēc tam automātiski aizpildīt ar lielākiem atsaucīgiem lodziņiem, izmantojot frlieluma rekvizītu. Vecākiem ir jāpievieno tikai CSS režģa rekvizīti, un tad small-boxdivs tiks automātiski aizpildīts.

Konteinera CSS ir šāds:

Kā redzat, jūs varat izveidot vienkāršu atsaucīgu režģi tikai no četrām koda rindām. Tas nevar būt vieglāk, un visu jūsu saturu var brīvi pārvietoties un jaukt pēc vajadzības. Šajā gadījumā mediju vaicājumi pat nav nepieciešami. No šejienes jūs varat brīvi pielāgot atsevišķas rūtiņas režģī. Tas ir diezgan elastīgs atsaucīgiem izkārtojumiem un izmēriem. Spēlējies ar to un vēro, kā kastes maģiski kustas.

Režģa laukumi

Otrs iemesls, kāpēc es mēdzu ķerties pie ietvara režģa, bija izmantot dažādus izkārtojumus dažādās ierīcēs. Varat vēlēties, lai komponenti pārvietotos atkarībā no ekrāna lieluma, kurā atrodaties.

Tālāk ir sniegts vietņu izkārtojumu piemērs, kuru, iespējams, vēlēsities darbvirsmā un planšetdatorā. Mainīt to ir pavisam vienkārši. Lai arī dažiem šī struktūra nepatīk, jūs izmantojat ASCII veida veidņu struktūru režģa apgabalos.

Pieņemsim, ka jums ir pamata lapas izkārtojums, kuram ir galvene, sānjoslas, saturs un kājene.

Lapas izkārtojums bez formatēšanas izskatīsies šādi, iestatot trīs kolonnu pamata režģi 1fr 4fr 1fr. Kastes tiks aizpildītas, lai ietilptu to atvēlētajā vietā režģī. Tomēr, ja vēlaties, lai jūsu lapas izkārtojums būtu vienmērīgāks un dinamiskāks, kā norādīts zemāk, varat to izmantot template-areas.

Lai iegūtu šo vēlamo izkārtojumu, jums jāizveido veidņu laukumi. Jūs to varat iedomāties kā miniatūru ASCII karti, kas parāda, kur lapā vēlaties ievietot rūtiņas.

Lai iegūtu darbvirsmas izkārtojumu, izveidojiet savu miniatūru karti kā grid-template-areasīpašumā. Katrā rindā ir rinda un nosaukumi attiecīgajām izkārtojuma kolonnām. Var redzēt, ka galvenes un kājenes sadaļas stiepjas pa visām kolonnām, kurās tās ir ievietotas. Arī sānjoslas un saturs stiepjas vairākās rindās, kā redzat apgabalā “karte”. Pēc tam to var padarīt par jebkuru nepieciešamo izkārtojumu, pievienojot grid-areaīpašumu attiecīgajiem diviem, piemēram, labajā labajā attēlā. Jūs varat nosaukt šīs lietas, kas atbilst jūsu projektam.

Lai tas darbotos planšetdatora skatā, jums vienkārši jāizveido multivides vaicājums un jāmaina secība veidņu apgabalos. Viegli pārvietojieties pa saturu vajadzīgajam skatam. (Ņemiet vērā, ka ekrāna lasītājos tas var radīt problēmas, ja saturs ir neatbilstošs, tāpēc pārliecinieties, ka jūsu saturs joprojām tiek loģiski lasīts.)

Secinājums

Šis vienkāršais ziņojums noteikti tikai saskrāpē virsmu tam, ko jūs varat darīt ar CSS režģi. Bet es domāju, ka galvenais, kas no tā jāatņem, ir tas, ka jums nevajadzētu baidīties no CSS Grid izmantošanas. Kad esat pieradis pie jaunās sintakses, tas patiešām ir diezgan vienkāršs, spēcīgs un viegls. Iet uz priekšu un izbaudiet “Gettin Griddy With It”.

Lai iegūtu vairāk informācijas par CSS režģi, es ļoti iesaku pārbaudīt //cssgrid.io, kuru māca Wes Bos. Tā ir fantastiska CSS režģa apmācība.

Tāpat kā jums ir jautājumi, noteikti apskatiet CSS triku vietni vietnē //css-tricks.com/snippets/css/complete-guide-grid/, lai uzzinātu vairāk par režģi.

Lai uzzinātu vairāk par manu darbu, apmeklējiet vietni //theran.co un uzziniet vairāk par mani.