100%). Gap // share = total_gap / count = (count - 1) × gap / count. // Cell sizes may still sum to < 100% — that's the author's call // (e.g. [15%, 70%] leaves a 15% slack on purpose). // // 2. Other CSS length with unit ("200px", "15em", "30vw"): // pass through as flex-basis unchanged — absolute units are // independent of container width so no gap compensation is possible // without overflowing. // // 3. Bare number (50, 100, 33.33): author wants a GROW-SHARE // ratio. Grid cells distribute horizontal space in proportion: // [50, 50] → 50/50 split, [30, 70] → 30/70, [1, 2] → 1:2. // Totals don't need to sum to anything specific and the flex // algorithm already accounts for gap automatically. // // Anything else (unparseable) falls back to equal share so we don't // render a zero-width cell. // // `min-width: 0` lets content shrink below its intrinsic width so // long words don't force overflow. var str = String(width).trim(); if (/%$/.test(str)) { var pct = parseFloat(str); if (!isNaN(pct) && pct > 0) { if (gap > 0 && count > 1) { var gapShare = (gap * (count - 1) / count); flexStyle = 'flex: 0 0 calc(' + pct + '% - ' + gapShare + 'px); min-width: 0;'; } else { flexStyle = 'flex: 0 0 ' + pct + '%; min-width: 0;'; } } else { flexStyle = 'flex: 1 1 0; min-width: 0;'; } } else if (/(px|em|rem|vw|vh|ch|ex)$/i.test(str)) { flexStyle = 'flex: 0 0 ' + str + '; min-width: 0;'; } else { var numWidth = parseFloat(str); if (!isNaN(numWidth) && numWidth > 0) { flexStyle = 'flex: ' + numWidth + ' 1 0; min-width: 0;'; } else { flexStyle = 'flex: 1 1 0; min-width: 0;'; } } } var height = formatter.getFormat('height'); var heightStyle = ''; if (height !== null && height !== '' && height !== undefined) { heightStyle = 'height: ' + height + (typeof height === 'number' ? 'px' : '') + ';'; } var otherStyles = formatter.toStyleStringAll().replace(/width:\s*[^;]+;?\s*/gi, '').replace(/height:\s*[^;]+;?\s*/gi, '').trim(); var finalStyle = (flexStyle + ' ' + heightStyle + ' ' + otherStyles).trim(); %><%- finalStyle %>"> <% if (blocks && blocks.length) { blocks.forEach(function(block) { %> <%- block %> <% }); } %>