Skip to content

Instantly share code, notes, and snippets.

@inspiran

inspiran/gist:a8858383f9e1c28fa39c9c01b667706e

Created June 14, 2024 11:13
Show Gist options
  • Save inspiran/a8858383f9e1c28fa39c9c01b667706e to your computer and use it in GitHub Desktop.
Save inspiran/a8858383f9e1c28fa39c9c01b667706e to your computer and use it in GitHub Desktop.
Download ZIP
Span issue
Raw
gistfile1.txt
<html>
<head>
<title>Grid item break</title>
</head>
<body>
<style>
body{margin:0;padding: 0}
@page{margin: 1cm; padding: 0}
.activities-horizontal-content {
display: grid;
grid-template-columns: 9.5cm 9.5cm;
gap: 0.5cm;
grid-auto-flow: row;
}
.ahz-activity-day {
break-inside: avoid;
border: 1px solid #ccc;
margin: 0;
}
.ahz-big {
grid-column: span 2;
background-color: #ddeedd;
}
</style>
<div class="activities-horizontal-content">
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day ahz-big">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day ahz-big">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day ahz-big">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day ahz-big">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
<div class="ahz-activity-day">
1TEST<br/>2TEST<br/>3TEST<br/>4TEST<br/>5TEST<br/>6TEST<br/>7ANOTHER<br/>8ANOTHER<br/>9ANOTHER<br/>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment