Add deprecation warning for column grid classes and add container-sm utility class

modules/primer-layout/docs/grid.md

@@ -374,9 +374,13 @@ This is how that example would look at the `lg` breakpoint.
 ```
 
 ## Containers
-Container widths match our breakpoints and are available at a `md`, `lg`, and `xl` size. Containers apply a max-width rather than a fixed width for responsive layouts, and they center the container.
+Container widths match our breakpoints and are available at a `sm`, `md`, `lg`, and `xl` size. Containers apply a max-width rather than a fixed width for responsive layouts, and they center the container.
 
 ```html title="Containers sized"
+<div class="container-sm border">
+  .container-sm, max-width 544px
+</div>
+
 <div class="container-md border">
   .container-md, max-width 768px
 </div>
@@ -389,5 +393,3 @@ Container widths match our breakpoints and are available at a `md`, `lg`, and `x
   .container-xl, max-width 1280px
 </div>
 ```
-
-**Note:** `.container` is being replaced with `.container-lg`. To match the current fixed page width use `.container-lg` with `px-3`. This gives the container padding on smaller screens which works better for responsive layouts.

modules/primer-layout/lib/columns.scss

@@ -3,6 +3,8 @@
 // Create rows with `.columns` to clear the floated columns and outdent the
 // padding on `.column`s with negative margin for alignment.
 
+@warn ".columns, .column, .one-third, .two-thirds, .one-fourth, .one-half, .three-fourths, .one-fifth, .four-fifths, .centered will be deprecated in 12.0.0 please migrate to grid.scss";
+
 .columns {
   margin-right: -$grid-gutter;
   margin-left: -$grid-gutter;

modules/primer-layout/lib/container.scss

@@ -8,6 +8,14 @@
 }
 
 // Handy container styles that match our breakpoints
+
+// 544px
+.container-sm {
+  max-width: $width-sm;
+  margin-right: auto;
+  margin-left: auto;
+}
+
 // 768px
 .container-md {
   max-width: $container-md;

modules/primer-support/lib/variables/layout.scss

@@ -68,6 +68,7 @@ $width-lg: 1012px !default;
 $width-xl: 1280px !default;
 
 // Responsive container widths
+$container-sm: $width-sm !default;
 $container-md: $width-md !default;
 $container-lg: $width-lg !default;
 $container-xl: $width-xl !default;