.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}function App() {
const [ count, setCount ] = useState(0);
const onChange = e => setCount(Math.max(0, e.target.value | 0));
return (
<div>
<input type="number" value={count} onChange={onChange} />
<div className="container">
{Array.from(Array(count).keys(), n => <div className="item">{n}</div>)}
</div>
</div>
);
}
calc(100vw - 100%) можно вычислить ширину скроллбара (а если он не отображается, то будет 0). Идея: при помощи отрицательного margin-right увеличить ширину <html> на эту ширину. При этом появляется горизонтальная полоса прокрутки — ее скрываем.html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">