.grid > .row,
.row.grid {
  display: grid;
  gap: 1rem;
}
.auto {grid-auto-flow: column; grid-auto-columns: 1fr}
.auto-fill {grid-template-columns: repeat(auto-fill, minmax(var(--width, 300px), 1fr))}
.auto-fit  {grid-template-columns: repeat(auto-fit, minmax(var(--width, 300px), 1fr))}

.column-1-1 { grid-template-columns: 1fr 1fr; }
.column-1-2 { grid-template-columns: 1fr 2fr; }
.column-1-3 { grid-template-columns: 1fr 3fr; }
.column-2-1 { grid-template-columns: 2fr 1fr; }
.column-2-3 { grid-template-columns: 2fr 3fr; }
.column-3-1 { grid-template-columns: 3fr 1fr; }
.column-3-2 { grid-template-columns: 3fr 2fr; }

.flex {
  display: flex;
  gap: 1rem;
}
.space-between { justify-content: space-between; }