Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/tynanpurdy/grids. Proportional Grid Generator
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071* { box-sizing: border-box;}
body, html { margin: 0; padding: 0; height: 100%;}
body { display: grid; font-family: Helvetica, sans-serif; display: grid; flex: 1; height: 100vh; grid-template-columns: 15rem auto; grid-template-rows: 2.5rem auto; grid-template-areas: "header main" "sidebar main";}
.header { -webkit-app-region: drag; grid-area: header;}
.sidebar { padding: 1rem; grid-area: sidebar; overflow-y: auto;}
/* interactables */input, select, #font-picker, button { -webkit-app-region: no-drag;}
input, .output { font-family: monospace;}
.form-control { width: min-content;}
.main { grid-area: main; display: flex; justify-content: center; align-items: center; border-left: gray solid 1px; padding: 1rem; overflow: auto;}
#page { width: 400px; height: 400px; border: black solid 1px; resize: both; display: grid; column-gap: var(--spacing); row-gap: var(--spacing);}
.grid-item { background-color: lightgray;}