Matematika
Kalkulačka šírky kontajnera a gapov
Vypočítajte rovnakú šírku stĺpcov po odpočítaní paddingu a gapov. Zistite potrebnú vonkajšiu šírku pre cieľ.
Bezplatná online kalkulačka
Zadajte svoje údaje
Výpočet šírky kontajnera a gapov v CSS gride
Kalkulačka šírky kontajnera a gapov sa hodí pri návrhu webového layoutu, keď potrebujete zistiť, aký široký kontajner je potrebný pre konkrétny počet prvkov v jednom riadku. Využijete ju pri CSS gride, kartách, produktoch, galériách, zoznamoch článkov alebo iných rozloženiach, kde majú prvky pevnú šírku a medzi nimi je nastavený gap.
Zadajte vonkajšiu šírku bez borderu, padding na každej strane, počet stĺpcov, gap a cieľovú šírku jedného stĺpca. Všetky dĺžky sú v px. Najprv sa odpočítajú dva paddingy, potom n − 1 gapov. Zvyšok sa delí počtom rovnakých stĺpcov.
Hlavný výsledok je šírka stĺpca pri zadanej vonkajšej šírke. Rozpis ukáže vnútornú šírku, súčet gapov a opačný výpočet vonkajšej šírky potrebnej na váš cieľový stĺpec. Opačný výsledok nemení aktuálne pole šírky; je to osobitné porovnanie.
Na výsledok má najväčší vplyv počet prvkov v riadku, šírka jedného prvku a veľkosť gapu. Väčší počet prvkov rýchlo zvyšuje potrebnú šírku kontajnera, pretože sa sčítavajú všetky prvky aj všetky medzery medzi nimi. Väčší gap môže pri viacerých stĺpcoch výrazne navýšiť celkovú šírku, najmä pri kartách alebo produktových gridoch.
Pri vonkajšej šírke 1 200 px, paddingu 24 px na každej strane, troch stĺpcoch a gape 24 px je vnútro 1 152 px. Dva gapy zaberú 48 px, zostáva 1 104 px a stĺpec má 368 px. Cieľ 300 px na stĺpec potrebuje vonkajšiu šírku 3 × 300 + 48 + 48 = 996 px.
Jednoduchý CSS príklad môže používať grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px;. Výpočet však pracuje s vonkajšou šírkou bez borderu, preto porovnajte skutočný box-sizing a rozmery prvku. Obsah s veľkou minimálnou šírkou a rozdielne stĺpce môžu rovnomerné rozdelenie zmeniť.
Padding nie je gap medzi kartami
Pri jednom stĺpci nevzniká žiadny vnútorný gap, no oba paddingy zostávajú. Pri šírke 1 200 px a paddingu 24 px je jediný stĺpec 1 152 px. Opačný cieľ 300 px potrebuje vonkajšiu šírku 348 px. Pri štyroch stĺpcoch sú už tri gapy; nepoužívajte počet gapov rovný počtu kariet. Border pripočítajte podľa skutočného box modelu osobitne.
Vstupy a jednotky v tomto výpočte
- Vonkajšia šírka bez borderu (px)
- Padding na každej strane (px)
- Počet stĺpcov
- Gap (px)
- Cieľová šírka jedného stĺpca (px)
Ako sa výsledok prepočíta
Vnútorná šírka = vonkajšia − 2 × padding. Zvyšok po n − 1 gapoch sa delí počtom stĺpcov; opačný výpočet pripočíta gapy a padding.
Na nadväzujúci výpočet môžete použiť Kalkulačka šírky prvku v percentách.
Predpoklady a obmedzenia
Vonkajšia šírka tu neobsahuje border. Model neuvažuje odlišné stĺpce ani minimálne šírky obsahu.
Zdroje a metodika
Časté otázky
Zadáva sa padding spolu alebo na jednej strane?
Na každej strane. Hodnota 24 px znamená 24 px vľavo aj vpravo, teda spolu 48 px odpočítaných z vonkajšej šírky bez borderu.
Ako sa vypočíta šírka jedného stĺpca?
Od vonkajšej šírky odpočítajte oba paddingy a n − 1 gapov. Zvyšok vydeľte počtom stĺpcov. Pri ukážkových vstupoch vyjde 368 px.
Čo znamená cieľová šírka stĺpca?
Slúži na opačný prepočet potrebnej vonkajšej šírky. Tri stĺpce po 300 px, dva gapy po 24 px a oba paddingy po 24 px potrebujú 996 px.
Počíta sa gap aj pri jednom stĺpci?
Nie. Jeden stĺpec nemá susedný stĺpec, takže vnútorných gapov je nula. Oba paddingy sa však odpočítajú aj v tomto prípade.
Zahŕňa vonkajšia šírka aj border?
V tomto modeli nie. Border a skutočný box-sizing zohľadnite pri meraní prvku. Výpočet navyše predpokladá rovnaké stĺpce bez ďalších obmedzení obsahu.
