Het probleem met percentages in CSS

Nog niet zo lang geleden waren we volledig afhankelijk van het gebruik van percentages voor breedtes en hoogtes. Het gebruik van percentages betekende dat uw lay-out en elementen een hoogte en breedte konden aannemen op basis van de viewport. Maar terwijl moderne CSS blijft evolueren, zijn we op een punt beland waarop het misschien zelfs een goed idee is om het gebruik van percentages te vermijden.

Meer informatie over de veelvoorkomende problemen die u kunt tegenkomen bij het gebruik van percentages. Lees ook meer over de moderne CSS-technieken die u kunt gebruiken in plaats van percentages. Deze technieken geven u hetzelfde resultaat als percentages zonder de nadelen.

Een heel eenvoudig rastervoorbeeld

Overweeg deze HTML-lay-out om een ​​probleem met procentuele eenheden aan te tonen:

<divklas="containermijn-raster">
 <divklas="raster-item">
div>
 <divklas="raster-item">
div>
div>

Het buitenste element is een basic

div containerelement met twee div kinderen. Elk kind heeft een raster-item klas. Om van de container een raster met twee kolommen (twee vakken) te maken, moeten we de volgende CSS-code toepassen:

lichaam {
Achtergrond kleur: zwart;
uitlijnen-items: centrum;
rechtvaardigen-inhoud: flex-start;
}
.mijn-raster {
weergave: rooster;
raster-sjabloon-kolommen: 50% 50%;
marge: 3rem;
grens: 2pxsteviggoud;
opvulling: 1rem;
}
.grid-item {
grens: 3pxsteviggoud;
opvulling: 10rem 0;
achtergrond: blauw;
}

Dus elke kolom (rasteritem) heeft een achtergrondkleur van goud. Op de bovenliggende containerklasse stellen we in raster-sjabloon-kolom tot 50% voor elke kolom. Hierdoor nemen beide bakken 50% van de totale breedte van het containerelement in beslag.

Dit is het resultaat:

Maar er zijn problemen met deze uitlijning. Ten eerste, als u besluit om een gat voor de roosterouder kan het kind uit de zijkant overstromen. Als u bijvoorbeeld zou toevoegen tussenruimte: 3px naar de .mijn-raster blok in de CSS, dan ziet de lay-out er als volgt uit:

Zoals je op de afbeelding hierboven kunt zien, is de rechterdoos uit de container geschoven. Soms merk je het misschien niet omdat je opening klein genoeg is, wat resulteert in een vreemd uitlijningsprobleem. Maar als je een grotere opening had, dan wordt de overlap vrij duidelijk.

Telkens wanneer u percentages gebruikt en marges of hiaten toevoegt, is de kans groot dat u dit soort fouten tegenkomt. Maar waarom treedt de fout op?

Dit komt omdat elke kolom 50% van de bovenliggende kolom is. In het bovenstaande voorbeeld hebben we 50% plus 50% plus die opening (3px), die de doos uit de container duwt.

Merk op dat deze fout niet alleen voorkomt bij 50-50. U kunt de eerste kolom instellen op 75%, de tweede kolom op 25% en de fout zal nog steeds optreden. Daarom moet u de volgende oplossing vaker gebruiken.

De oplossing met gebroken waarden

De oplossing is om breuken te gebruiken in plaats van percentages. Dus in plaats van de eerste kolom in te stellen op 75% en de tweede op 50%, kun je de eerste kolom instellen op 3fr en de tweede kolom op 1fr:

raster-sjabloon-kolommen: 3fr 1fr

Dit handhaaft dezelfde verhouding als het eerste voorbeeld. Maar het voordeel van gebruiken fr eenheden is dat ze een fractie van de beschikbare ruimte gebruiken. In dit geval neemt de eerste kolom drie delen van de ruimte in beslag, terwijl de tweede kolom één deel in beslag neemt, de opening niet meegerekend.

Een ander voordeel van het gebruik van frs boven percentages - of andere absolute eenheden, zoals px of em—is dat je ze kunt combineren met vaste waarden. Hier is een voorbeeld:

raster-sjabloon-kolommen: 1fr 10rem;

Met de bovenstaande code krijg je een vaste waarde die nooit verandert, ongeacht de schermgrootte. Dit komt omdat de kolom aan de rechterkant altijd op 10rem zal blijven, terwijl de kolom aan de linkerkant de resterende ruimte zal innemen (minus de opening).

Soms kun je wegkomen met het gebruik van percentages. Maar je moet ze op een slimme manier gebruiken die zich nog steeds kan aanpassen aan de situatie. Vaak betekent dit dat ze worden gekoppeld aan een fr waarde.

Een realistischer voorbeeld

Laten we ons voorstellen dat je een pagina hebt die het hoofdinhoudsgebied bevat en een terzijde (voor gerelateerde berichten). Het gebied met de hoofdinhoud neemt drie fracties van het scherm in beslag, terwijl de zijkant de resterende ruimte min de opening in beslag neemt:

.container {
breedte: 100%;
weergave: rooster;
raster-sjabloon-kolommen: 3fr 1fr;
gat: 1.5rem;
}
.kaart {
Achtergrond kleur: #5A5A5A;
opvulling: 10px;
marge-bodem: .5rem;
}

Dit is het resultaat:

Meestal verplaatst u de zijbalk (of opzij) naar de onderkant (of bovenkant) van de pagina zodra het scherm te smal wordt. Dit betekent het instellen van mediaquery's die alles op elkaar stapelen wanneer de viewport een bepaald breekpunt bereikt.

Hier ziet u hoe u alles in een kolom kunt stapelen wanneer de viewport 55 em of minder bereikt:

@media(Maximale wijdte: 55em) {
.container {
weergave: buigen;
flex-richting: kolom;
 }
}

En het resultaat zal er ongeveer zo uitzien:

Nu wilt u niet dat elke kaart de breedte van de gehele viewport overspant. De kaarten moeten eerder naast elkaar worden weergegeven. De beste manier om dit te bereiken is met CSS-rasters. Maar in plaats van vaste breedtewaarden in te stellen (zoals 50%) voor de raster-sjabloon-kolom, gebruikt u de herhalen() functie als volgt:

.sidebar-raster {
weergave: rooster;
raster-sjabloon-kolommen: herhalen(automatische aanpassing, minimaal(25rem, 1fr));
align-inhoud: begin;
gat: 2rem;
}

Deze CSS stelt een minimale grootte van 25rem en een maximale grootte van 1fr. Die aanpak is veel beter dan het instellen van vaste breedtes, omdat het afhankelijk is van intrinsieke maatvoering. Met andere woorden, het laat de browser dingen uitzoeken op basis van beschikbare parameters.

Wanneer u nu het browservenster verkleint tot een bepaalde breedte, wordt het rastervak ​​automatisch aangepast naar twee vakken per regel.

Wanneer het scherm kleiner wordt, zakt het naar één vakje per regel. Dus de browser stapelt alles op elkaar. Dit gebeurt allemaal terwijl u het formaat van het venster wijzigt. U kunt een browserfunctie gebruiken zoals Chrome DevTools om te begrijpen hoe deze CSS werkt, en hoe het wijzigen van de grootte van de vensters de lay-out verandert.

Het beste deel is dat je geen containerquery of iets speciaals nodig hebt om het element responsief te maken. Stel eenvoudig een raster in en gebruik min-max() om gebroken waarden in te stellen in plaats van vaste maten.

Meer informatie over CSS-raster

Als je goed wilt worden met CSS, moet je een grondige kennis hebben van CSS Grids. Grids kunnen behoorlijk krachtig zijn als ze goed worden gebruikt. U kunt bijna elke gewenste lay-out bereiken met behulp van Grids. Dit maakt het een onmisbare tool in CSS.

Een ding om in gedachten te houden bij het gebruik van CSS-rasters is om te focussen op reactievermogen. U kunt ook de fractionele benadering gebruiken om gevallen van botsingen tussen elementen te voorkomen. Vergeet niet om CSS-rasters onder de knie te krijgen, want de lay-outstijl zal u enorm helpen bij het maken van websites.