Ensuring a minimum outside "padding" on max-width grid

Michelle Barker (CSS{IRL} (opens new window)) did an excellent presentation about CSS Grid (opens new window).

The thing that I took away from it was to use minmax() on our outside, "filler" columns. This would allow those columns to always have a minimum width for when you want a little extra space around your grid on "medium" screen sizes.

Add minmax([MIN-OUTSIDE-PADDING - GAP-WIDTH], 1fr) as sizing for outside columns to maintain a minimum padding on grids.

/* $gap: 20px; */
.grid {
  display: grid;
  grid-gap: 20px;
  
  /* Distance from screen edge to first "lettered" column should be a minimum of 30px. */
  /* 12 column grid math: (max-width - (11 * gap)) / 12 */
  /* Distance from last "lettered" column to screen edge should be a minimum of 30px. */
  grid-template-columns: minmax(10px, 1fr) repeat(12, minmax(0, calc((1024px - (11 * 20px)) / 12 ))) minmax(10px, 1fr);
  grid-template-areas: ". a a a a a a b b b b b b .";
}

In the above example, There would always be a 30px "margin/padding" on the grid parent. It isn't real margin or padding, but the design will look right.

See the Pen Grid with Max-width with Min-width outside columns by Dave Cross (@davecross) on CodePen.