GizDevCraft Editor - Masonry-Style Layouts

HTML

CSS

<main class="lesson-shell grid-playground">
  <section class="demo-card">
    <span class="eyebrow">Masonry-Style Layouts</span>
    <h1>Grid practice area</h1>
    <p>Edit the CSS tab, resize the preview, and watch tracks, areas, spans, gaps, and responsive Grid patterns change.</p>

    <section class="grid-shell" aria-label="Dashboard layout">
      <header class="grid-header">Header area</header>
      <aside class="grid-sidebar">
        <strong>Sidebar</strong>
        <span>Navigation and filters</span>
      </aside>
      <main class="grid-main">
        <div class="grid-gallery" aria-label="Card gallery">
          <article class="box grid-card grid-featured">Featured card spans columns</article>
          <article class="box grid-card">Lesson</article>
          <article class="box grid-card wide">Practice</article>
          <article class="box grid-card tall">Review</article>
          <article class="box grid-card">Build</article>
        </div>
      </main>
      <footer class="grid-footer">Footer area</footer>
    </section>

    <article class="grid-article">
      <h2>Named line article</h2>
      <p>This text sits in the content column. The callout below uses named lines to stretch wider than the paragraph.</p>
      <div class="bleed">Full-width callout using named grid lines.</div>
    </article>
  </section>
</main>

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f8fafc;
  color: #111827;
}

.lesson-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.demo-card {
  width: min(760px, 100%);
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 18px 45px rgb(15 23 42 / .10);
  text-align: center;
}

.eyebrow {
  display: inline-block;
  margin-bottom: .75rem;
  color: #4f46e5;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 .75rem;
  font-size: clamp(1.8rem, 4vw, 3rem);
}

p {
  color: #536471;
  line-height: 1.7;
}

button {
  border: 0;
  border-radius: 8px;
  padding: .75rem 1rem;
  background: #4f46e5;
  color: white;
  font-weight: 800;
  cursor: pointer;
}

.demo-target {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.box {
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 1.25rem;
  background: #f8fafc;
  font-weight: 800;
}

.featured {
  background: #eef2ff;
  color: #3730a3;
}
.grid-playground .demo-card { max-width: 1040px; }
.grid-shell { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: minmax(10rem, 14rem) 1fr; gap: 1rem; margin-top: 1.5rem; text-align: left; }
.grid-header, .grid-sidebar, .grid-main, .grid-footer, .bleed { border: 1px solid #d7dde8; border-radius: 8px; padding: 1rem; }
.grid-header { grid-area: header; background: #eef2ff; }
.grid-sidebar { grid-area: sidebar; display: grid; gap: .35rem; background: #f8fafc; }
.grid-main { grid-area: main; background: #ffffff; }
.grid-footer { grid-area: footer; background: #f6f7fb; }
.grid-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); grid-auto-rows: minmax(6rem, auto); gap: 1rem; }
.grid-card { min-height: 6rem; display: grid; place-items: center; text-align: center; }
.grid-featured { grid-column: span 2; background: #dbeafe; color: #1d4ed8; }
.wide { grid-column: span 2; }
.tall { grid-row: span 2; }
.grid-article { display: grid; grid-template-columns: [full-start] minmax(1rem, 1fr) [content-start] minmax(0, 46rem) [content-end] minmax(1rem, 1fr) [full-end]; gap: .75rem; margin-top: 1.5rem; text-align: left; }
.grid-article > * { grid-column: content; }
.bleed { grid-column: full; background: #ecfdf5; color: #166534; }
@media (max-width: 700px) { .grid-shell { grid-template-areas: "header" "sidebar" "main" "footer"; grid-template-columns: 1fr; } .grid-featured, .wide { grid-column: auto; } .tall { grid-row: auto; } }

/* Lesson code: Masonry-Style Layouts */
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  grid-auto-rows: 8px;
  grid-auto-flow: dense;
}

.item--small { grid-row: span 18; }
.item--large { grid-row: span 32; }

console.log('Grid editor starter loaded for ' + "Masonry-Style Layouts");