Uzziniet, kā izmantot CSS režģus, lai viegli izveidotu sarežģītus izkārtojumus.

Elementu izvietošana tīmekļa lapā var būt ļoti sarežģīta, strādājot ar sarežģītiem izkārtojumiem. Šeit noder CSS režģis. Tā ir izkārtojuma sistēma, kas paredzēta, lai vienkāršotu sarežģītu izkārtojumu izveides procesu.

Kā tas jums palīdz? Atšķirībā no tradicionālajām izkārtojuma metodēm, kas ļauj pozicionēt elementus tikai rindās vai kolonnās, CSS režģis piedāvā labāko no abām pasaulēm — 2D pieeju, izmantojot rindas un kolonnas.

Režģa konteineri un priekšmeti

CSS režģa rekvizītus var lietot diviem galvenajiem elementu veidiem: vecākiem un bērniem. Iestatot displeja rekvizītu uz “režģis” vecākelementam, tas pārveido šo elementu režģa konteinerā. Jebkurš pakārtotais elements šajā režģa konteinerā kļūst par režģa vienumu, pārmantojot lietotās režģa īpašības.

Lūk, kā tas tiek attēlots:

Režģa vienums var kļūt arī par režģa konteineru. Tagad varat atsaukties uz izkārtojumu kā ligzdotu režģi — režģi režģī. Galvenais režģa konteiners tagad tiek saukts par ārējo režģi, bet vienumam pagriezts režģa konteiners kļūst par iekšējo režģi.

instagram viewer

Katrs no šiem režģiem darbojas neatkarīgi no otra, kas nozīmē, ka iekšējam režģim iestatītās īpašības neietekmē ārējā režģa izkārtojumu un otrādi.

Lūk, kā tas izskatās:

Ir svarīgi apgūt attiecības starp režģa konteineriem un priekšmetiem būvējot divdimensiju izkārtojumus efektīvi.

Ņemiet vērā, ka ir režģa rekvizīti režģa konteineriem, bet citi ir paredzēti režģa vienumiem.

Režģa līnijas un sliedes

Pirms sākat lietot CSS režģi, jums jāzina divi galvenie termini.

  1. Režģa līnijas: Režģa līnijas attiecas uz horizontālajām un vertikālajām līnijām, kas veido režģi CSS režģa izkārtojumā. Tie norāda rindu un kolonnu sākuma un beigu punktus, palīdzot sakārtot vietu, kur viss notiek režģī. Šīs līnijas ir kā kastīšu malas; tiem ir cipari, kas palīdz norādīt elementus pozicionēšanas laikā. Šeit tos apzīmē sarkanā punktētā līnija:
  2. Režģa trases: tās ir atstarpes starp režģa līnijām, kas nosaka rindas un kolonnas. Tie ir kā režģa izkārtojuma bloki. Iepriekš redzamajā attēlā krāsainais apgabals katrā vienumā attēlo režģa trasi.

Padomājiet par režģa līnijām un celiņiem kā režģa izkārtojuma blokiem, piemēram, līnijām uz milimetru papīra lapas. Kad horizontāla režģa līnija krustojas ar vertikālu režģa līniju, tā veido kastītes formas šūnu. Šīs šūnas darbojas kā konteineri, kuros varat ievietot savus režģa elementus.

CSS režģa konteinera rekvizīti

Šīs ir īpašības, kuras varat lietot režģa konteineram, lai sakārtotu izkārtojumu un palīdzētu tajā izvietot elementus. Kā minēts iepriekš, viens no tiem ir displeja rekvizīts, kas iestatīts uz režģi. Šeit ir vairāk:

Režģa veidne

Šis rekvizīts nosaka rindu un kolonnu lielumu. Šo rekvizītu izmērus var iestatīt, izmantojot pikseļus, procentus vai daļskaitli (fr). Varat arī izmantot tādus atslēgvārdus kā auto, minmax (), un atkārtojiet () lai uzlabotu elastību.

  • režģis-veidne-rindas: Iestata rindu augstumu.
  • režģis-veidne-kolonnas: nosaka kolonnu platumu.

Šeit ir daži piemēri:

Pikseļu izmantošana:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Procentu izmantošana:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Izmantojot fr:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

Auto un minmax() atslēgvārdu izmantošana:

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Repeat() izmantošana konsekventai izmēru noteikšanai:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Automātiskā izvietojuma un režģa veidņu apgabali

Automātiskā izvietošana: Automātiskā izvietošana ir kā ļaut režģim izlemt, kur ievietot vienumus. Ja nenorādīsiet precīzas pozīcijas, režģis automātiski izvietos vienumus tādā secībā, kādā tie tiek parādīti marķējumā. Tas ir noderīgi, ja jums ir daudz vienumu un vēlaties, lai tie vienmērīgi aizpildītu režģi.

Režģa veidņu apgabali: domājiet par režģa veidņu apgabaliem kā izkārtojuma izveidi, izmantojot nosauktas zonas. Tas ir tāpat kā telpu nosaukšana stāva plānā. Pozicionējot režģa vienumus, varat atsaukties uz šiem apgabalu nosaukumiem. Piemēram:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Šis izkārtojums ir kā režģis ar trim kolonnām un četrām rindām. Galvenajam satura apgabalam ir divas rindas. Apzīmētie apgabali ietver "galvene", "sānjosla", "saturs" un "kājene". Nākamajās sadaļās uzzināsit, kā izmantot šīs apgabala iezīmes katra režģa vienuma rekvizītos.

Izlīdzināšana CSS režģī

Varat izmantot līdzināšanas rekvizītus, lai kontrolētu režģa vienumu novietojumu to režģa šūnās. Īpašības ir:

  • attaisnot-preces: kontrolē vienumu horizontālo līdzināšanu to režģa šūnā.
    • Vērtības: sākums, beigas, centrs un stiepšanās.
  • izlīdzināt vienumus: kontrolē vienumu vertikālo līdzināšanu to režģa šūnā.
    • Vērtības: sākums, beigas, centrs un stiepšanās.
  • attaisnot-saturs: izlīdzina visu režģi konteinerā pa horizontālo asi.
    • Vērtības: sākums, beigas, centrs, stiepšanās, atstarpe-starp, atstarpe-ap un atstarpe-vienmērīga.
  • līdzināt-saturs: izlīdzina visu režģi konteinerā pa vertikālo asi.
    • Vērtības: sākums, beigas, centrs, stiepšanās, atstarpe-starp, atstarpe-ap un atstarpe-vienmērīga.

Šeit ir piemērs:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

Šajā piemērā vienumi tiks centrēti gan horizontāli, gan vertikāli savās šūnās. Vieta tiks vienmērīgi sadalīta starp visa režģa kolonnām, un režģis konteinerā centrēsies vertikāli.

Režģa sprauga

Režģa sprauga attiecas uz atstarpi starp rindām un kolonnām režģa izkārtojumā. Tas palīdz izveidot vizuālu atdalīšanu un palielina vietu starp režģa vienumiem.

The režģa sprauga Īpašums ļauj iestatīt atstarpi starp rindām un kolonnām. Lai to definētu, varat izmantot dažādas vienības, piemēram, pikseļus (px), procentus (%), em vienības (em) un citus.

.grid-container {
grid-gap: 20px;
}

Šajā piemērā režģa konteineram ir divas kolonnas ar 20 pikseļu atstarpi starp tām. Šis attālums vizuāli atdala kolonnas un uzlabo izkārtojumu.

CSS režģa vienuma rekvizīti

Šeit ir daži galvenie rekvizīti, kas kontrolē atsevišķu režģa vienumu darbību CSS režģa izkārtojumā, kā arī piemēri.

režģis-rindas sākums un režģis-rindas beigas:

  • Definē vienuma sākuma un beigu rindas rindas.
  • Vērtības var būt rindu numuri, "span n" vai "auto". 
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Šis kods vietas Režģa 1. vienums no otrās rindas līnijas uz ceturtās rindas līniju.

režģis-kolonna-sākums un režģis-kolonna-beigas:

  • Definē vienuma sākuma un beigu kolonnas rindas.
  • Vērtības var būt rindu numuri, "span n" vai "auto". 
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Šis kods vietas Režģa 2. vienums no pirmās kolonnas rindas uz trešo kolonnas rindu.

režģa apgabals:

  • Norāda režģa vienuma izmēru un pozīciju režģī, atsaucoties uz nosauktajām režģa līnijām režģa-veidnes apgabali.
  • Kā minēts iepriekš, iepriekš noteikti apgabalu nosaukumi jau tiek izmantoti ar režģa-veidnes apgabali īpašums. Šeit ir piemērs, kā to izmantot kopā ar režģa apgabals. 
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Lūk, rezultāts:

attaisnot sevi:

  • Izlīdzina atsevišķus vienumus horizontāli savā šūnā.
  • Vērtības var būt sākums, beigas, centrs un stiepšanās. 
.grid-item-5 {
justify-self: center;
}

Šis kods horizontāli centrē Režģa 5. vienums savā šūnā.

izlīdzināt-paši:

  • Izlīdziniet atsevišķus vienumus vertikāli šūnā.
  • Vērtības var būt sākums, beigas, centrs un stiepšanās. 
.grid-item-1 {
align-self: end;
}

Šis kods tiek izlīdzināts Režģa 1. vienums tās šūnas apakšā.

Jūtieties brīvi apvienot un pielāgot šos rekvizītus, lai izveidotu vēlamo izkārtojumu un izskatu katram režģa vienumam jūsu CSS režģī.

Adaptīvu izkārtojumu izveide, izmantojot CSS režģus

CSS režģu izmantošana priekš veidojot atsaucīgus izkārtojumus ir svarīgi, lai jūsu tīmekļa lapa nevainojami pielāgotos dažādiem ekrāna izmēriem un ierīcēm. Varat izmantot šādas metodes:

  • Multivides vaicājumi: Varat izmantot multivides vaicājumus lai piemērotu dažādus režģa izkārtojumus atkarībā no ekrāna izmēra. Piemēram, jums var būt nepieciešams pārkārtot režģa vienumus vai pielāgot kolonnu platumu mazākiem ekrāniem.
  • Elastīgas vienības: izmantojiet relatīvās vienības, piemēram, procentus un fr, lai režģa vienumus un kolonnas varētu proporcionāli pielāgoties pieejamajai vietai.
  • minmax (): izmantojiet minmax () funkcija, lai norādītu režģa kolonnu vai rindu izmēru diapazonu. Tas nodrošina, ka priekšmeti dažādos ekrānos neparādīsies pārāk mazi vai pārāk lieli.

Atcerieties pielāgot kolonnas un citus elementus, piemēram, atstarpes starp režģa vienumiem, fontu izmērus un piemales. Tas nodrošina konsekventu un labi izstrādātu izkārtojumu, kas labi darbojas dažādās ierīcēs.

Izpētiet CSS režģa izkārtojuma iespējas

CSS režģa elastības un jaudas izmantošana ļaus jums izveidot izkārtojumus, kas ne tikai izskatās lieliski, bet arī nemanāmi pielāgojas mūsdienu tīmekļa dizaina prasībām. Tātad, ienirstiet režģu pasaulē, izpētiet iespējas un uzlabojiet savas tīmekļa izstrādes prasmes.

Iedziļinoties izkārtojuma sistēmās, iespējams, vēlēsities salīdzināt citas izkārtojuma metodes ar CSS režģiem. To var izdarīt, izmantojot CSS Flexbox moduli. Tas palīdzēs jums iemācīties pieņemt lēmumu, strādājot pie projekta.