Skip to content

Instantly share code, notes, and snippets.

@orjan

orjan/subgrid.html

Created March 20, 2024 21:20
Show Gist options
  • Save orjan/8c51b0ba7e4ec12649caa3bdce625eaa to your computer and use it in GitHub Desktop.
Save orjan/8c51b0ba7e4ec12649caa3bdce625eaa to your computer and use it in GitHub Desktop.
Download ZIP
Subgrid for subtasks
Raw
subgrid.html
<html lang="sv">
<style>
.wrapper {
display: grid;
border: solid 1px #0e2a45;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.header {
background-color: #76baff;
}
.wo {
border: darkblue 1px dashed;
grid-column-start: 1;
grid-row: span 2;
}
.subgrid {
border: saddlebrown 1px dashed;
display: grid;
grid-column: 1 / span 8;
grid-template-columns: subgrid;
grid-template-rows: auto;
}
</style>
<body>
<h1>Hello</h1>
<div class="wrapper">
<div>N/A</div>
<div class="header">Mon</div>
<div class="header">Tue</div>
<div class="header">Wed</div>
<div class="header">Thu</div>
<div class="header">Fri</div>
<div class="header">Sat</div>
<div class="header">Sun</div>
<div class="subgrid">
<div style="grid-column: 1 / span 1; background-color: #76baff">
Wono 1
</div>
<div style="grid-column: 3 / span 2; background-color: #76baff">
In progress 40h
</div>
<div style="grid-column: 1 / span 1; background-color: #76baff">
- Subtask 1
</div>
<div style="grid-column: 4 / span 3; background-color: #76baff">
In progress 40h
</div>
<div style="grid-column: 1 / span 1; background-color: #76baff">
- Subtask 2
</div>
<div style="grid-column: 1 / span 1; grid-row-start: 4; background-color: #76baff">
<button>Add task</button>
</div>
</div>
<div class="subgrid">
<div style="grid-column: 1 / span 1; background-color: #76baff">
Wono 1
</div>
<div style="grid-column: 3 / span 2; background-color: #76baff">
In progress 40h
</div>
<div style="grid-column: 1 / span 1; background-color: #76baff">
- Subtask 1
</div>
<div style="grid-column: 4 / span 3; background-color: #76baff">
In progress 40h
</div>
<div style="grid-column: 1 / span 1; background-color: #76baff">
- Subtask 2
</div>
<div style="grid-column: 1 / span 1; background-color: #76baff">
<button>Add task</button>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment