'How do I make an infinite canvas-like grid in CSS?

I am trying to simulate an infinite canvas (ie: drawing canvas on penpot.app, or sketch or figma.com)

I am NOT using the javascript canvas api.

I just want a div that will respond to viewport size and have an infinitely scrollable

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Billion Satoshis</title>
        <script>
            let cells = 6400;
            document.addEventListener('DOMContentLoaded', main);

            function main() {
                const view = document.getElementById('scroller');
                const grid = [];

                for (let i=0; i<cells; i++) {
                    const el = document.createElement('div');

                    el.classList.add('cell');
                    grid.push(el);
                }

                view.append(...grid);
            }
        </script>
    <style>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
    html {
        font-size: 62.5%;
    }

    body {
        font-size: 1.6rem;
        font-family: sans-serif;
    }

    #view {
        width: calc(100vw - 2rem);
        height: calc(100vh - 10rem);
        margin: auto;
        background-color: #eee;
        overflow: auto;
        position: relative;
    }

    #scroller {
    position: absolute;
    height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(80, 1rem);
        gap: 0;
        border-top: 1px solid black;
        border-left: 1px solid black;
    }

    header {
        text-align: center;
    }

    .cell {
        border-right: 1px solid black;
        border-bottom: 1px solid black;
        width: 1rem;
        height: 1rem;
    }
    </style>
  </head>

  <body>
    <header>
      <h1>Billion Satoshis</h1>
      <p>Pixel based advertising for Bitcoin.</p>
    </header>
    <section id="view">
            <section id="scroller"></section>
        </section>
  </body>
</html>

I have this: https://jsfiddle.net/chovy/gt03sLpr/

THe issue is I donj't want the css grid to change dimensions only the parent scrolling container can change sizes.

I have hardcoded an upper limit of 6400 cells. but that can be changed

css


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions