Basic CSS Flex and Grid layout

layout.css

:root {
  --min-col-width: 200px; 
  --max-row-width: 860px;
}
/* Simple tuning for auto cols */
@media screen and (min-width: 500px) {
  :root {
    --min-col-width: 150px;  
  }
}
html, body {
  margin: 0;
  padding: 0;
}
.row {
  display: grid;
  max-width: var(--max-row-width);
  margin: auto;
}

.grid { display: grid }
.flex { display: flex }

.col {
  padding-left: 0.5em;
  padding-right: 0.5em;
  flex: 1;
}
.row .row {
  margin-left: -.5em;
  margin-right: -.5em;
}

.small-center {text-align: center}
.small-only-hidden {display: none}

.small-flex-auto { flex: 1} 
.small-shrink {flex: 0 1 auto }
.small-h, .small-horizontal {flex-direction: row}
.small-v, .small-vertical {flex-direction: column}
.small-order-1 {order: 1}
.small-order-2 {order: 2}
.small-order-3 {order: 3}
.small-order-4 {order: 4}
.small-order-5 {order: 5}
.small-order-6 {order: 6}

.row, .small-auto { grid-template-columns: repeat(auto-fit, minmax(var(--min-col-width), 1fr)) }
.small-1 { grid-template-columns: 1fr }
.small-2 { grid-template-columns: repeat(2, 1fr) }
.small-3 { grid-template-columns: repeat(3, 1fr) }
.small-4 { grid-template-columns: repeat(4, 1fr) }
.small-5 { grid-template-columns: repeat(5, 1fr) }
.small-6 { grid-template-columns: repeat(6, 1fr) }
.small-1-2 { grid-template-columns: 1fr 2fr }
.small-2-1 { grid-template-columns: 2fr 1fr }
.small-1-3 { grid-template-columns: 1fr 3fr }
.small-3-1 { grid-template-columns: 3fr 1fr }


@media screen and (min-width: 500px) {
  .small-only-hidden {display: inherit}
  
  .medium-center {text-align: center}
  .medium-hidden {display: none}
  
  .medium-flex { display: flex}
  .medium-flex-auto { flex: 1} 
  .medium-shrink {flex: 0 1 auto }
  .medium-h, .medium-horizontal {flex-direction: row}
  .medium-v, .medium-vertical {flex-direction: column}
  .medium-order-1 {order: 1}
  .medium-order-2 {order: 2}
  .medium-order-3 {order: 3}
  .medium-order-4 {order: 4}
  .medium-order-5 {order: 5}
  .medium-order-6 {order: 6}
  
  .medium-auto { grid-template-columns: repeat(auto-fit, minmax(var(--min-col-width), 1fr)) }  
  .medium-1 { grid-template-columns: 1fr }  
  .medium-2 { grid-template-columns: repeat(2, 1fr) }
  .medium-3 { grid-template-columns: repeat(3, 1fr) }
  .medium-4 { grid-template-columns: repeat(4, 1fr) }
  .medium-5 { grid-template-columns: repeat(5, 1fr) }
  .medium-6 { grid-template-columns: repeat(6, 1fr) }
  .medium-1-2 { grid-template-columns: 1fr 2fr }
  .medium-2-1 { grid-template-columns: 2fr 1fr }
  .medium-1-3 { grid-template-columns: 1fr 3fr }
  .medium-3-1 { grid-template-columns: 3fr 1fr }
}
@media screen and (min-width: 800px) {
  .small-only-hidden {display: inherit}
  
  .large-center {text-align: center}
  
  .large-flex { display: flex}
  .large-flex-auto { flex: 1} 
  .large-shrink {flex: 0 1 auto }
  .large-h, .large-horizontal {flex-direction: row}
  .large-v, .large-vertical {flex-direction: column}
  .large-order-1 {order: 1}
  .large-order-2 {order: 2}
  .large-order-3 {order: 3}
  .large-order-4 {order: 4}
  .large-order-5 {order: 5}
  .large-order-6 {order: 6}
  
  .large-auto { grid-template-columns: repeat(auto-fit, minmax(var(--min-col-width), 1fr)) }  
  .large-1 { grid-template-columns: 1fr }  
  .large-2 { grid-template-columns: repeat(2, 1fr) }
  .large-3 { grid-template-columns: repeat(3, 1fr) }
  .large-4 { grid-template-columns: repeat(4, 1fr) }
  .large-5 { grid-template-columns: repeat(5, 1fr) }
  .large-6 { grid-template-columns: repeat(6, 1fr) }
  .large-1-2 { grid-template-columns: 1fr 2fr }
  .large-2-1 { grid-template-columns: 2fr 1fr }
  .large-1-3 { grid-template-columns: 1fr 3fr }
  .large-3-1 { grid-template-columns: 3fr 1fr }
}