Probléma a százalékokkal a CSS-ben

Nem sokkal ezelőtt még teljes mértékben a szélesség és a magasság százalékos arányában voltunk. A százalékok használata azt jelentette, hogy az elrendezés és az elemek magasságot és szélességet vehettek fel a nézetablaknak megfelelően. De ahogy a modern CSS folyamatosan fejlődik, elérkeztünk egy olyan ponthoz, ahol akár jó ötlet is lehet elkerülni a százalékok használatát.

Ismerje meg azokat a gyakori problémákat, amelyekkel a százalékok használata során találkozhat. Ismerje meg a százalékok helyett használható modern CSS-technikákat is. Ezek a technikák ugyanazt az eredményt adják, mint a százalékok, hátrányok nélkül.

Egy nagyon egyszerű példa rácsra

A százalékos mértékegységekkel kapcsolatos probléma bemutatásához vegye figyelembe ezt a HTML-elrendezést:

<divosztály="tartálymy-grid">
 <divosztály="rács-elem">
div>
 <divosztály="rács-elem">
div>
div>

A külső elem egy alap div konténer elem kettővel div gyermekek. Minden gyereknek van egy

rács-elem osztály. Ahhoz, hogy a tárolót két oszlopból (két mezőből) álló rácsmá alakítsuk, a következő CSS-kódot kell alkalmaznunk:

test {
háttérszín: fekete;
align-ites: központ;
indokolja-tartalom: flex-start;
}
.my-grid {
kijelző: rács;
rács-sablon-oszlopok: 50% 50%;
árrés: 3rem;
határ: 2pxszilárdArany;
párnázás: 1rem;
}
.rács-elem {
határ: 3pxszilárdArany;
párnázás: 10rem 0;
háttér: kék;
}

Tehát minden oszlopnak (rácselemnek) arany háttérszíne van. A konténer szülőosztályán beállítjuk rács-sablon-oszlop oszloponként 50%-ra. Ennek eredményeként mindkét doboz a tárolóelem teljes szélességének 50%-át foglalja el.

Íme az eredmény:

De vannak problémák ezzel az igazítással. Először is, ha úgy döntött, hogy hozzáadja a rés a rácsszülőhöz, a gyerek túlcsordulhat az oldalról. Például, ha hozzátenné rés: 3px hoz .my-grid blokkot a CSS-ben, akkor így nézne ki az elrendezés:

Amint a fenti képen látható, a jobb oldali doboz kikerült a tárolóból. Néha előfordulhat, hogy nem veszi észre, mert a rés elég kicsi, ami furcsa igazítási problémát eredményez. De ha nagyobb a rés, akkor az átfedés nyilvánvalóvá válik.

Amikor százalékokat használ, és margókat vagy hézagokat ad hozzá, nagy az esélye, hogy ilyen jellegű hibákat tapasztal. De miért fordul elő a hiba?

Ez azért van, mert minden oszlop a szülő 50%-a. A fenti példában 50% plusz 50% plusz ez a rés (3px), ami kinyomja a dobozt a tárolóból.

Vegye figyelembe, hogy ez a hiba nem csak 50-50 esetén fordul elő. Beállíthatja az első oszlopot 75%-ra, a második oszlopot 25%-ra, és a hiba továbbra is fennáll. Ezért kell gyakrabban használnia az alábbi megoldást.

A megoldás törtértékekkel

A megoldás a százalékok helyett törtértékek használata. Tehát ahelyett, hogy az első oszlopot 75%-ra, a másodikat pedig 50%-ra állítaná, beállíthatja az első oszlopot 3fr-ra, a második oszlopot pedig 1fr-ra:

rács-sablon-oszlopok: 3fr 1fr

Ez ugyanazt az arányt tartja fenn, mint az első példa. De a használat előnye fr egységek az, hogy a rendelkezésre álló hely töredékét használják ki. Ebben az esetben az első oszlop a tér három részét foglalja el, míg a második oszlop egy részt, a rést nem számítva.

Az frs használatának másik előnye a százalékokkal – vagy mással – szemben abszolút mértékegységek, például px vagy em-az, hogy ezeket fix értékekkel kombinálhatja. Íme egy példa:

rács-sablon-oszlopok: 1fr 10rem;

A fenti kóddal egy rögzített értéket kap, amely soha nem változik a képernyő méretétől függetlenül. Ennek az az oka, hogy a jobb oldali oszlop mindig 10 rem marad, míg a bal oldali oszlop fogja elfoglalni a maradék helyet (mínusz a rés).

Néha megúszhatja a százalékok használatát. De okosan kell használni őket, amelyek még mindig képesek alkalmazkodni a helyzethez. Ez gyakran azt jelenti, hogy párosítják őket egy fr érték.

Reálisabb példa

Képzeljük el, hogy van egy oldala, amely tartalmazza a fő tartalmi területet és egy melléket (a kapcsolódó bejegyzésekhez). A fő tartalomterület a képernyő három töredékét foglalja el, míg a mellékterület a fennmaradó helyet foglalja el, mínusz a rés:

.tartály {
szélesség: 100%;
kijelző: rács;
rács-sablon-oszlopok: 3fr 1fr;
rés: 1.5rem;
}
.kártya {
háttérszín: #5A5A5A;
párnázás: 10px;
margó-alsó: .5rem;
}

Íme az eredmény:

Általában az oldalsávot (vagy félre) helyezi az oldal aljára (vagy tetejére), ha a képernyő túl keskeny lesz. Ez azt jelenti, hogy olyan médialekérdezéseket kell létrehozni, amelyek mindent egymásra helyeznek, amikor a nézetablak elér egy bizonyos töréspontot.

A következőképpen helyezhet el mindent egy oszlopba, amikor a nézet eléri az 55 em-t vagy kevesebbet:

@média(max. szélesség: 55em) {
.tartály {
kijelző: Flex;
flex-irány: oszlop;
 }
}

Az eredmény pedig valahogy így fog kinézni:

Most már nem szeretné, hogy az egyes kártyák a teljes nézetablak szélességét átfogják. Inkább a kártyáknak egymás mellett kell megjelenniük. Ezt a legjobb módszer a CSS rácsokkal valósíthatja meg. De ahelyett, hogy rögzített szélességű értékeket (például 50%) állítana be a grid-template-colum számára, használja a ismétlés() a következőképpen működik:

.sidebar-grid {
kijelző: rács;
rács-sablon-oszlopok: ismétlés(automatikus illeszkedés, minimum maximum(25rem, 1fr));
align-content: Rajt;
rés: 2rem;
}

Ez a CSS minimális méretet 25 rem és maximális méretet 1 fr. Ez a megközelítés sokkal jobb, mint a rögzített szélességek beállítása, mert a belső méretezésen alapul. Más szóval, lehetővé teszi a böngésző számára, hogy a rendelkezésre álló paraméterek alapján kitalálja a dolgokat.

Mostantól, amikor a böngészőablakot meghatározott szélességűre csökkenti, a rácsdoboz soronként automatikusan két mezőre igazodik.

Amikor a képernyő kisebb lesz, soronként egy dobozra csökken. Tehát a böngésző mindent egymásra rak. Mindez az ablak átméretezésekor történik. Használhat olyan böngészőfunkciót, mint pl Chrome DevTools, hogy megértse, hogyan működik ez a CSSés az ablakok átméretezése hogyan változtatja meg az elrendezést.

A legjobb az egészben az, hogy nincs szükség konténerlekérdezésre vagy bármire, hogy az elem érzékeny legyen. Egyszerűen állítson be egy rácsot és használja minimum maximum() törtértékek beállításához rögzített méretek helyett.

További információ a CSS Gridről

Ha nagyszerűen szeretne dolgozni a CSS-ben, mélyreható ismeretekkel kell rendelkeznie a CSS-rácsokról. A rácsok meglehetősen erősek lehetnek, ha jól használják. A rácsokkal szinte bármilyen elrendezést elérhet. Ez nélkülözhetetlen eszközzé teszi a CSS-ben.

A CSS-rácsok használatakor egy dolgot szem előtt kell tartani, hogy a válaszkészségre kell összpontosítani. A töredékes megközelítést is használhatja az elemek ütközésének elkerülésére. Ne felejtse el elsajátítani a CSS-rácsokat, mert az elrendezési stílus rendkívül sokat segít a webhelyek létrehozásakor.