CSS Grid Playground

1
2
3
4
5
6

Shareable URL:

https://itsjavi.com/css-grid-playground/#eyJzZWxlY3RlZEdyaWQiOi0xLCJzZWxlY3RlZEdyaWRJdGVtIjotMSwid3JhcHBlclN0eWxlcyI6ImRpc3BsYXk6IGJsb2NrO1xuICAgICAgcGFkZGluZzogMXJlbTtcbiAgICAgIGJvcmRlcjogNHB4IGRvdHRlZCB2YXIoLS1zYW5kLTMpOyIsImdyaWRTdHlsZXMiOiJkaXNwbGF5OiBncmlkO1xuICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxZnIgMWZyIDFmcjtcbiAgICAgIGdhcDogMC41cmVtOyIsImdyaWRJdGVtU3R5bGVzIjoiYmFja2dyb3VuZDogdmFyKC0tc2FuZC0yKTtcbiAgICAgIGJvcmRlcjogMnB4IHNvbGlkIHZhcigtLXNhbmQtNSk7XG4gICAgICBjb2xvcjogdmFyKC0tc2FuZC04KTsiLCJncmlkcyI6W3siaXRlbXMiOlt7fSx7fSx7fSx7fSx7fSx7fV19XX0=
<style>
.wrapper {
  display: block;
  padding: 1rem;
  border: 4px dotted var(--sand-3);
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}
.grid-item {
  background: var(--sand-2);
  border: 2px solid var(--sand-5);
  color: var(--sand-8);
}
</style>

<div class="wrapper">
  <div class="grid grid-1">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
    <div class="grid-item grid-item-4">4</div>
    <div class="grid-item grid-item-5">5</div>
    <div class="grid-item grid-item-6">6</div>
  </div>
</div>
Wrapper Styles
Grid:
Item:
Online playground for CSS Grids where you can add/remove elements, edit CSS properties, see the changes in real time, and share the state via URL. It also comes with presets inspired by web.dev's examples, and supports Open Props variables.