@mastors/gridder

<div class="grid grid-cols-3 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

npm install @mastors/gridder

// Full utility + responsive layer
@use "@mastors/gridder";

// Or target just the mixins
@use "@mastors/gridder/scss/mixins/grid-container" as gc;

@mixin grid-container(
  $cols:      null,       // grid-template-columns value
  $rows:      null,       // grid-template-rows value
  $gap:       null,       // shorthand gap (row + column)
  $col-gap:   null,       // column-gap only
  $row-gap:   null,       // row-gap only
  $flow:      row,        // grid-auto-flow (default: row)
  $auto-cols: null,       // grid-auto-columns
  $auto-rows: null,       // grid-auto-rows
  $inline:    false       // true → display: inline-grid
)

@use "@mastors/gridder/scss/mixins/grid-container" as gc;

.my-layout {
  @include gc.grid-container(
    $cols:    repeat(3, minmax(0, 1fr)),
    $gap:     1.5rem,
    $flow:    row
  );
}

// Inline grid with fixed columns and row gap only
.card-row {
  @include gc.grid-container(
    $cols:    repeat(4, 200px),
    $row-gap: 1rem,
    $inline:  true
  );
}

@mixin grid-item(
  $col-span:  null,   // columns to span
  $row-span:  null,   // rows to span
  $col-start: null,   // explicit column start line
  $row-start: null    // explicit row start line
)

@use "@mastors/gridder/scss/mixins/grid-container" as gc;

.feature-card {
  @include gc.grid-item($col-span: 2, $row-span: 1);
}

// Start at column 3, span 2 columns
.hero-block {
  @include gc.grid-item($col-span: 2, $col-start: 3);
}

@mixin gridder(
  $area,              // row-start (named area) OR row-start line number
  $col-start: null,   // column-start line (triggers explicit mode)
  $row-end:   null,   // row-end line
  $col-end:   null,   // column-end line
  $align:     null,   // align-self value
  $justify:   null    // justify-self value
)

@use "@mastors/gridder/scss/mixins/grid-container" as gc;

.page { @include gc.grid-container($cols: 1fr 3fr, $rows: auto 1fr auto); }
.page__header { @include gc.gridder(header); }
.page__sidebar { @include gc.gridder(sidebar, $align: start); }
.page__main { @include gc.gridder(main); }
.page__footer { @include gc.gridder(footer); }

// Places item from row-line 1 → 3, col-line 2 → 4
.hero {
  @include gc.gridder(1, $col-start: 2, $row-end: 3, $col-end: 4);
  // Outputs: grid-area: 1 / 2 / 3 / 4;
}

@mixin gridder-areas($rows...)
// Each $row is a quoted string of space-separated area names

@use "@mastors/gridder/scss/mixins/grid-container" as gc;

.app-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;

  @include gc.gridder-areas(
    "header  header",
    "sidebar main",
    "footer  footer"
  );
}

// Children
.app-header  { @include gc.gridder(header); }
.app-sidebar { @include gc.gridder(sidebar); }
.app-main    { @include gc.gridder(main); }
.app-footer  { @include gc.gridder(footer); }

<div class="grid grid-cols-2 gap-4">...</div>
<span class="inline-grid grid-cols-2 gap-2">...</span>

<!-- 4 equal columns -->
<div class="grid grid-cols-4 gap-3">
  <div>A</div><div>B</div><div>C</div><div>D</div>
</div>

<!-- Responsive: 1 col on mobile, 3 on md+ -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">...</div>

<!-- 3 equal rows, items fill columns automatically -->
<div class="grid grid-cols-2 grid-rows-3 gap-3" style="height:200px">
  <div>1</div><div>2</div>
  <div>3</div><div>4</div>
  <div>5</div><div>6</div>
</div>

@use "@mastors/gridder/scss/utilities/grid-template-areas" as areas;

.page-layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  // define-areas() sets grid-template-areas
  @include areas.define-areas(
    "header header  header",
    "nav    main    aside",
    "footer footer  footer"
  );
}

.page-nav    { @include areas.area(nav); }
.page-main   { @include areas.area(main); }
.page-aside  { @include areas.area(aside); }

<div class="grid grid-cols-3 gap-3">
  <div class="grid-col-2">Placed at column 2</div>
  <div class="grid-col-auto">Auto placed</div>
</div>

<!-- Column flow: items fill down before moving right -->
<div class="grid grid-cols-3 grid-flow-col gap-3">
  <div>1</div><div>2</div><div>3</div>
</div>

<!-- Column flow with fr-sized implicit columns -->
<div class="grid grid-flow-col auto-cols-fr gap-4">
  <div>Auto A</div>
  <div>Auto B</div>
  <div>Auto C</div>
</div>

<div class="grid grid-cols-3 gap-6">…</div>      <!-- uniform gap -->
<div class="grid grid-cols-3 gap-x-8 gap-y-4">…</div> <!-- separate axes -->

<div class="grid grid-cols-4 gap-3">
  <div class="col-span-2">Spans 2</div>
  <div>Single</div>
  <div>Single</div>
  <div class="col-span-full">Full width</div>
  <div class="col-start-2 col-span-3">Start at 2, span 3</div>
</div>

<div class="grid grid-cols-3 grid-rows-3 gap-3" style="height:220px">
  <div class="row-span-2">Tall sidebar (2 rows)</div>
  <div>Content A</div>
  <div>Content B</div>
  <div>Content C</div>
  <div class="col-span-2">Footer (2 cols)</div>
</div>

<!-- All items centered vertically -->
<div class="grid grid-cols-3 items-center gap-4" style="height:120px">
  <div>Short</div>
  <div>Medium content that's taller</div>
  <div class="self-end">Self end</div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>Card A</div>
  <div>Card B</div>
  <div>Card C</div>
  <div>Card D</div>
</div>

<!-- Flow switches to column layout on large screens -->
<div class="grid grid-flow-row lg:grid-flow-col gap-3">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>