Skip to content

Instantly share code, notes, and snippets.

@shuaibird

shuaibird/grid.css

Created Jul 2, 2017
Embed
What would you like to do?
Draw a grid using css & js
body,
* {
margin: 0;
padding: 0;
}
.line {
background-color: #efefef;
}
.line--horizontal {
position: absolute;
height: 1px;
width: 100%;
}
.line--vertical {
position: fixed;
width: 1px;
height: 100%;
}
svg,
img {
z-index: 5;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GRID</title>
<link href="grid.css" rel="stylesheet" />
</head>
<body>
<div id="grid"></div>
</body>
<script src="grid.js"></script>
</html>
(() => {
const drawLines = (size, orientation, interval = 10) => {
const drawLine = (() => {
const styleProp = (orientation === 'vertical') ? 'left' : 'top'
return (position = 0) =>
`
<div
class="line line--${orientation}"
style="${styleProp}: ${position}px"
>
</div>
`
})()
const lineCount = Math.floor(size / interval)
return [...Array(lineCount)].reduce((acc, cur, index) =>
acc + drawLine(interval * (index + 1))
, drawLine())
}
const grid = document.querySelector('#grid')
const horizontalLines = drawLines(document.body.scrollHeight, 'horizontal')
const verticalLines = drawLines(window.outerWidth, 'vertical')
grid.innerHTML = verticalLines + horizontalLines
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.