5 layout utilities that will handle 80% of cases

layout.css

.x-container {
  max-width: var(--length-l);
  margin-inline: auto;
  padding-inline: var(--gap-l);
  
  .x-container {
    padding-inline: 0;
  }
  
  @media (--small) {
    padding-inline: var(--gap-m);
  }
}

.layout-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--gap-m);
  
  @media (--width-s) {
    display: flex;
    flex-flow: column;
  }
}

.flow-grid {
  display: grid;
  --length-cell: var(--length-card);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--length-cell)), 1fr));
  gap: var(--gap-m);
}

.flex-column, .flex-row {
  display: flex;
  gap: var(--gap-m);
}

.flex-column {
  flex-flow: column;
}

.flex-row {
  flex-flow: row;
}