snipshare

56 views Raw Download Revisions (v1)

grid-layouts.css css Raw

/* Holy Grail Layout */
.holy-grail {
  display: grid;
  grid-template:
    "header  header  header"  64px
    "sidebar main    aside"   1fr
    "footer  footer  footer"  48px
    / 200px  1fr     200px;
  min-height: 100vh;
  gap: 1rem;
}

/* Card Grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Masonry-ish */
.masonry {
  columns: 3 280px;
  column-gap: 1.5rem;
}
.masonry > * {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}

/* Centered hero */
.hero-center {
  display: grid;
  place-items: center;
  min-height: 100vh;
}