Problem s postocima u CSS-u

Nedavno smo se potpuno oslanjali na korištenje postotaka za širine i visine. Korištenje postotaka značilo je da vaš izgled i elementi mogu pretpostaviti visinu i širinu na temelju okvira za prikaz. Ali kako se moderni CSS nastavlja razvijati, došli smo do točke u kojoj bi čak bilo dobro izbjegavati korištenje postotaka.

Saznajte više o uobičajenim problemima na koje ćete naići pri korištenju postotaka. Također saznajte o modernim CSS tehnikama koje možete koristiti umjesto postotaka. Ove tehnike će vam dati isti rezultat kao postoci bez ikakvih nedostataka.

Vrlo jednostavan primjer mreže

Da biste demonstrirali problem s postotnim jedinicama, razmotrite ovaj HTML izgled:

<divrazreda="spremnikmoja-mreža">
 <divrazreda="grid-item">
div>
 <divrazreda="grid-item">
div>
div>

Vanjski element je osnovni div kontejnerski element s dva div djece. Svako dijete ima a grid-item razreda. Da bismo spremnik pretvorili u rešetku s dva stupca (dva okvira), morat ćemo primijeniti sljedeći CSS kod:

tijelo {
boja pozadine: crno;
align-items: centar;
opravdati-sadržaj: flex-start;
}
.moja-mreža {
prikaz: rešetka;
rešetka-predložak-stupci: 50% 50%;
margina: 3rem;
granica: 2pxčvrstazlato;
podstava: 1rem;
}
.mreža-stavka {
granica: 3pxčvrstazlato;
podstava: 10rem 0;
pozadina: plava;
}

Dakle, svaki stupac (stavka mreže) ima zlatnu boju pozadine. Na roditeljskoj klasi spremnika postavljamo mreža-predložak-stupac do 50% za svaki stupac. Kao rezultat toga, obje kutije zauzimaju 50% ukupne širine elementa spremnika.

Evo rezultata:

Ali postoje problemi s tim usklađivanjem. Prvo, ako ste odlučili dodati a praznina roditelju rešetke, dijete bi moglo preliti sa strane. Na primjer, ako želite dodati razmak: 3px prema .moja-mreža blok u CSS-u, onda bi izgled izgledao ovako:

Kao što možete vidjeti na gornjoj slici, desna kutija je izašla iz spremnika. Ponekad to možda nećete primijetiti jer je vaš razmak dovoljno mali, što dovodi do čudnog problema s poravnanjem. Ali ako ste imali veći razmak, tada preklapanje postaje sasvim očito.

Kad god koristite postotke i dodajete margine ili praznine, velika je vjerojatnost da ćete doživjeti ovakve pogreške. Ali zašto dolazi do pogreške?

To je zato što je svaki stupac 50% nadređenog. U gornjem primjeru imamo 50% plus 50% plus taj razmak (3px), koji gura kutiju iz spremnika.

Imajte na umu da se ova pogreška ne događa samo s 50-50. Možete postaviti prvi stupac na 75%, drugi stupac na 25% i pogreška će se i dalje javljati. Zbog toga morate češće koristiti sljedeće rješenje.

Rješenje s razlomačkim vrijednostima

Rješenje je korištenje frakcijskih vrijednosti umjesto postotaka. Dakle, umjesto postavljanja prvog stupca na 75%, a drugog na 50%, možete postaviti prvi stupac na 3fr, a drugi stupac na 1fr:

rešetka-predložak-stupci: 3fr 1fr

Time se zadržava isti omjer kao u prvom primjeru. Ali prednost korištenja fr jedinice je da koriste djelić dostupnog prostora. U ovom slučaju, prvi stupac će zauzeti tri dijela prostora, dok će drugi stupac zauzeti jedan dio, ne uključujući prazninu.

Još jedna prednost korištenja frs u odnosu na postotke—ili nešto drugo apsolutne jedinice, poput px ili em— je da ih možete kombinirati s fiksnim vrijednostima. Evo primjera:

rešetka-predložak-stupci: 1fr 10rem;

Pomoću gornjeg koda dobit ćete fiksnu vrijednost koja se nikada ne mijenja bez obzira na veličinu zaslona. To je zato što će stupac s desne strane uvijek ostati na 10rem, dok će stupac s lijeve strane zauzimati preostali prostor (minus razmak).

Ponekad se možete izvući korištenjem postotaka. Ali morate ih koristiti na pametne načine koji se ipak mogu prilagoditi situaciji. Često to znači upariti ih s fr vrijednost.

Realniji primjer

Zamislimo da imate stranicu koja se sastoji od područja s glavnim sadržajem i strane (za povezane objave). Područje glavnog sadržaja zauzima tri dijela zaslona, ​​dok ono sa strane zauzima preostali prostor minus razmak:

.kontejner {
širina: 100%;
prikaz: rešetka;
rešetka-predložak-stupci: 3fr 1fr;
praznina: 1.5rem;
}
.kartica {
boja pozadine: #5A5A5A;
podstava: 10px;
margina-dno: .5rem;
}

Evo rezultata:

Obično biste pomaknuli bočnu traku (ili u stranu) na dno (ili vrh) stranice kada zaslon postane preuzak. To znači postavljanje medijskih upita koji slažu sve jedno na drugo kada okvir za prikaz dosegne određenu prijelomnu točku.

Evo kako možete složiti sve u stupac kada okvir za prikaz dosegne 55 em ili manje:

@mediji(maksimalna širina: 55em) {
.kontejner {
prikaz: savijati;
flex-direction: stupac;
 }
}

A rezultat će izgledati otprilike ovako:

Sada ne želite da svaka kartica obuhvaća širinu cijelog okvira za prikaz. Umjesto toga, karte bi trebale biti prikazane jedna do druge. Najbolji način da to postignete je pomoću CSS mreža. Ali umjesto postavljanja fiksnih vrijednosti širine (kao što je 50%) za stupac rešetke-predloška, ​​koristite ponoviti() funkcionirati na sljedeći način:

.bočna traka-mreža {
prikaz: rešetka;
rešetka-predložak-stupci: ponoviti(auto-fit, minmax(25rem, 1fr));
poravnati sadržaj: početak;
praznina: 2rem;
}

Ovaj CSS postavlja minimalnu veličinu od 25rem i maksimalnu veličinu od 1fr. Taj je pristup puno bolji od postavljanja fiksnih širina jer se oslanja na intrinzičnu veličinu. Drugim riječima, omogućuje pregledniku da shvati stvari na temelju dostupnih parametara.

Sada kada smanjite prozor preglednika na određenu širinu, rešetkasti okvir automatski se ponovno prilagođava na dva okvira po retku.

Kada se zaslon smanji, pada na jedan okvir po retku. Tako preglednik slaže sve jedno na drugo. Sve se to događa dok mijenjate veličinu prozora. Možete koristiti značajku preglednika kao što je Chrome DevTools da biste razumjeli kako ovaj CSS funkcionirai kako promjena veličine prozora mijenja izgled.

Najbolji dio je to što vam ne treba upit spremnika ili bilo što otmjeno da bi element bio osjetljiv. Jednostavno postavite rešetku i koristite min-max() za postavljanje frakcijskih vrijednosti umjesto fiksnih veličina.

Saznajte više o CSS mreži

Ako želite biti izvrsni s CSS-om, morate dobro poznavati CSS Grids. Rešetke mogu biti vrlo moćne ako se dobro koriste. Pomoću rešetki možete postići gotovo svaki izgled koji želite. To ga čini nezamjenjivim alatom u CSS-u.

Jednu stvar koju morate imati na umu kada koristite CSS rešetke jest da se usredotočite na odziv. Također možete koristiti frakcijski pristup kako biste izbjegli slučajeve sudara između elemenata. Ne zaboravite savladati CSS mreže jer će vam stil izgleda neizmjerno pomoći pri izradi web stranica.