RCE able to save flexbox and grid related properties

fixes MAT-346

flag=none

Test plan 1:
- Navigate to a RCE instance.
- Set HTML content using flexbox properties
Example: flex-direction, flex-wrap, flex-flow, etc.
- Save content.
- Verify that the content was saved with the flexbox
properties.

Test plan 2:
- Navigate to a RCE instance.
- Set HTML content using grid properties
Example: grid-row, grid-column, grid-template, etc.
- Save content.
- Verify that the content was saved with the grid
properties.

Change-Id: Iff2a57ad43d8526c5f477e0575e188aaa76b4f9f
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/272776
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Gary Mei <gmei@instructure.com>
QA-Review: Gary Mei <gmei@instructure.com>
Product-Review: Juan Chavez <juan.chavez@instructure.com>

gems/canvas_sanitize/lib/canvas_sanitize/canvas_sanitize.rb

@@ -295,19 +295,28 @@ module CanvasSanitize #:nodoc:
       }.freeze,
       css: {
         properties: ([
+          'align-content', 'align-items', 'align-self',
           'background', 'border', 'border-radius', 'clear', 'clip', 'color',
-          'cursor', 'direction', 'display', 'flex', 'float',
-          'font', 'grid', 'height', 'left', 'line-height',
-          'list-style', 'margin', 'max-height',
+          'column-gap', 'cursor', 'direction', 'display', 'flex',
+          'flex-basis', 'flex-direction', 'flex-flow',
+          'flex-grow', 'flex-shrink', 'flex-wrap','float',
+          'font', 'gap', 'grid', 'height',
+          'justify-content', 'justify-items', 'justify-self', 'left',
+          'line-height', 'list-style', 'margin', 'max-height',
           'max-width', 'min-height', 'min-width',
-          'overflow', 'overflow-x', 'overflow-y',
-          'padding', 'position', 'right',
+          'order', 'overflow', 'overflow-x', 'overflow-y',
+          'padding', 'position', 'place-content',
+          'place-items', 'place-self', 'right', 'row-gap',
           'text-align', 'table-layout',
           'text-decoration', 'text-indent',
           'top', 'vertical-align',
           'visibility', 'white-space', 'width',
           'z-index', 'zoom'
         ] +
+        %w{area auto-columns auto-flow auto-rows column gap row template}.map { |i| "grid-#{i}"} +
+        %w{areas columns rows}.map { |i| "grid-template-#{i}"} +
+        %w{end gap start}.map { |i| "grid-column-#{i}"} +
+        %w{end gap start}.map { |i| "grid-row-#{i}"} +
         %w{attachment color image position repeat}.map { |i| "background-#{i}"} +
         %w{x y}.map { |i| "background-position-#{i}" } +
         %w{bottom collapse color left right spacing style top width}.map { |i| "border-#{i}" } +