Skip to content

Instantly share code, notes, and snippets.

@Kcko

Kcko/index.html

Last active November 5, 2025 15:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Kcko/593906d393011e87484a57555aba2bb9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Kcko/593906d393011e87484a57555aba2bb9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!-- https://codepen.io/gwaradon/pen/poYYbPY -->
<div class="w-500">
<div class="grid">
<div class="grid-item">
Gird item 1
</div>
<div class="grid-item">
Gird item 2
</div>
<div class="grid-item">
Gird item 3
</div>
<div class="grid-item">
Gird item 4
</div>
<div class="grid-item">
Gird item 5
</div>
<div class="grid-item">
Gird item 6
</div>
</div>
</div>
<style>
.w-500{
max-width:500px;
margin:auto;
}
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow:hidden;
justify-content: center;
align-items:center;
text-align:center;
border: 1px solid #333;
}
.grid-item{
position:relative;
padding:1rem
}
.grid-item::before,
.grid-item::after {
content: '';
position: absolute;
background-color: #333;
z-index: 1;
}
.grid-item::after {
width: 100vw;
height: 1px;
left: 0;
top: -1px;
}
.grid-item::before {
width: 1px;
height: 100vh;
left: -1px;
top: 0;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment