Skip to content

Instantly share code, notes, and snippets.

@daqi

daqi/grid-layout.html

Created February 3, 2023 11:16
Show Gist options
  • Save daqi/1e3886ff66445056d69c87775a194ca6 to your computer and use it in GitHub Desktop.
Save daqi/1e3886ff66445056d69c87775a194ca6 to your computer and use it in GitHub Desktop.
Download ZIP
squarespace layout
Raw
grid-layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>grid</title>
<style>
html,
body {
margin: 0;
}
:root {
--site-gutter: 4vw;
--mobile-site-gutter: 6vw;
--site-max-width: 1200px;
}
.wrapper {
--column-gap: 11px;
--inset-padding: 0vw;
--row-height-scaling-factor: 0.0215;
--cell-max-width: calc((var(--site-max-width) - var(--column-gap) * 23) / 24);
--grid-gutter: calc(var(--site-gutter) - var(--column-gap));
--container-width: min(
var(--site-max-width),
calc(100vw - var(--site-gutter, 4vw) * 2 - var(--inset-padding))
);
display: grid;
grid-template-rows: repeat(
17,
minmax(calc(var(--container-width) * var(--row-height-scaling-factor)), auto)
);
grid-template-columns:
minmax(var(--grid-gutter), 1fr)
repeat(24, minmax(0, var(--cell-max-width)))
minmax(var(--grid-gutter), 1fr);
column-gap: var(--column-gap);
row-gap: var(--column-gap);
}
.item1 {
grid-area: 1/2/5/26;
background-color: #ff0000;
}
.item2 {
grid-area: 2/3/3/5;
background-color: #0000ff;
z-index: 2;
}
@media (max-width: 768px) {
.wrapper {
--column-gap: 11px;
--inset-padding: 0vw;
--grid-gutter: calc(var(--mobile-site-gutter) - 11px);
--cell-max-width: calc((var(--site-max-width) - (var(--column-gap) * 7)) / 8);
display: grid;
position: relative;
grid-template-rows: repeat(32, minmax(24px, auto));
grid-template-columns:
minmax(var(--grid-gutter), 1fr)
repeat(8, minmax(0, var(--cell-max-width)))
minmax(var(--grid-gutter), 1fr);
row-gap: 11px;
column-gap: 11px;
}
.item1 {
grid-area: 1/2/5/10;
background-color: #ff0000;
}
}
</style>
</head>
<body>
<div id="root">
<div class="wrapper">
<div class="item2"></div>
<div class="item1"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment