Matematika
Kalkulačka CSS grid stĺpcov
Zistite počet celých rovnakých stĺpcov CSS grid podľa vnútornej šírky, minimálnej šírky karty a gapu.
Bezplatná online kalkulačka
Zadajte svoje údaje
Výpočet šírky CSS grid stĺpcov
CSS grid potrebuje zosúladiť šírku kontajnera, minimálnu šírku karty a medzery. Kalkulačka odhadne, koľko rovnakých stĺpcov sa zmestí do vnútornej šírky, aké široké budú a koľko riadkov vyžaduje zadaný počet kariet. Hodí sa pri plánovaní galérií, produktov a článkových kariet.
Zadajte vnútornú šírku kontajnera v px bez vonkajšieho paddingu, najmenšiu šírku stĺpca, gap a počet kariet. Kapacita sa počíta zaokrúhlením (šírka + gap) / (minimum + gap) nadol. Aktívny počet stĺpcov neprekročí počet kariet; výsledná šírka rovnomerne využije zostávajúce miesto.
Hlavný výsledok je kapacita stĺpcov pri zadanom minime. Rozpis ukáže šírku jedného aktívneho stĺpca, počet riadkov a použitú minimálnu šírku. Pri menšom počte kariet sa šírka delí len medzi tieto karty; hlavná kapacita zostáva nezmenená. Náhľad vykresleného gridu ani kopírovací CSS zápis nie sú samostatné výsledky.
Vyššie minimum alebo väčší gap môžu znížiť kapacitu o celý stĺpec. Počet kariet obmedzuje aktívne stĺpce a určuje riadky. Reálne CSS môže mať odlišné správanie cez auto-fit, auto-fill a minimálnu šírku obsahu, preto ide o plán rovnakých stĺpcov, nie úplný layout engine.
Pri vnútornej šírke 1 200 px, minime 250 px a gape 24 px sa zmestia štyri stĺpce. Tri gapy zaberú 72 px a zostáva 1 128 px, teda 282 px na stĺpec. Desať kariet potrebuje tri riadky. Príklad pevného rozdelenia je grid-template-columns: repeat(4, 1fr); gap: 24px;.
Na menšej obrazovke prepočítajte skutočnú vnútornú šírku. Kontajner široký 600 px pri rovnakom minime a gape umožní dva stĺpce po 288 px; desať kariet sa rozloží do piatich riadkov. Overte dlhý obsah kariet, obrázky a padding, ktorý môže zmenšiť dostupný priestor.
Menej kariet než kapacita kontajnera
Pri 1 200 px a iba dvoch kartách model použije dva aktívne stĺpce, nie štyri prázdne sloty. Jeden gap 24 px ponechá 1 176 px a každá karta má 588 px. To pomáha pochopiť rozdiel medzi kapacitou a použitými stĺpcami. CSS auto-fill môže ponechať aj prázdne stopy a auto-fit ich môže zrútiť; výsledok porovnajte so skutočnou konfiguráciou v prehliadači.
Vstupy a jednotky v tomto výpočte
- Vnútorná šírka kontajnera (px)
- Najmenšia šírka stĺpca (px)
- Medzera medzi stĺpcami (px)
- Počet kariet
Ako sa výsledok prepočíta
Kapacita stĺpcov = floor((vnútorná šírka + gap) / (minimum + gap)). Model delí zostávajúcu šírku rovnomerne medzi min(kapacita, počet kariet).
Na nadväzujúci výpočet môžete použiť Kalkulačka šírky kontajnera a gapov.
Predpoklady a obmedzenia
Model zodpovedá rovnakým stĺpcom bez vonkajšieho paddingu. Auto-fill, auto-fit a minimálna šírka obsahu môžu mať odlišné správanie.
Zdroje a metodika
Časté otázky
Čo je vnútorná šírka kontajnera?
Miesto dostupné stĺpcom a ich gapom. Vonkajší padding do tohto čísla nezahrňte. Ak je vonkajšia šírka 1 200 px a padding 24 px z oboch strán, vnútro má 1 152 px.
Ako sa určí počet stĺpcov?
Kapacita je celé zaokrúhlenie (šírka + gap) / (minimum + gap) nadol. Použitý počet sa obmedzí počtom kariet. Pri 1 200, 250 a 24 px vyjdú najviac štyri stĺpce.
Prečo sú pri štyroch stĺpcoch len tri gapy?
Gap je medzi susednými stĺpcami. Štyri stĺpce vytvoria tri vnútorné medzery; okrajový padding sa musí riešiť osobitne.
Ako vznikne šírka 282 px?
Z 1 200 px sa odpočítajú tri gapy po 24 px, zostane 1 128 px. Rozdelenie štyrmi rovnakými stĺpcami dá 282 px na každý.
Zodpovedá model každému použitiu auto-fill alebo auto-fit?
Nie. Rovnaké stĺpce a počet kariet zjednodušuje. Prázdne stopy, minimálna šírka obsahu a konkrétne CSS pravidlá môžu vytvoriť odlišný výsledok.
