Extract mixin to create a grid layout

We were using similar code and three places. And all of them used
`15rem`, which looked a lot like a magic number. So we're making it the
default value of a mixin, which means replacing it with a less arbitrary
value will be easier.

Note that, for the column gap, we're now using the standard
grid-column-gutter we use in most places. We were using `$line-height`
in a couple of places only because writing it is less verbose.

Since we're now, for the first time, using a very long mixin definition
that we need to split in several lines, we're adding the `param`
exception to the indentation rule. As far as I know, there's no way to
define a rule in Stylelint that requires parameters in multiple lines to
be aligned with the first parameter, which is what we define in Rubocop.

.stylelintrc.yml

@@ -83,6 +83,7 @@ rules:
   "@stylistic/indentation":
     - 2
     - ignore:
+      - param
       - value
   "@stylistic/media-feature-parentheses-space-inside": never
   "@stylistic/no-eol-whitespace": true

app/assets/stylesheets/dashboard/polls.scss

@@ -1,7 +1,4 @@
 .dashboard-polls {
-  display: grid;
+  @include dynamic-grid;
-  gap: $line-height;
-  grid-auto-rows: 1fr;
-  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
   margin-top: $line-height;
 }

app/assets/stylesheets/dashboard/resources.scss

@@ -1,9 +1,6 @@
 .dashboard-resources {
   .resources {
-    display: grid;
+    @include dynamic-grid;
-    gap: $line-height;
-    grid-auto-rows: 1fr;
-    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
 
     .resource-card {
       background: #d1f5eb;

app/assets/stylesheets/mixins/layouts.scss

@@ -32,6 +32,15 @@
   }
 }
 
+@mixin dynamic-grid($min-column-width: 15rem,
+                    $row-gap: $line-height,
+                    $column-gap: rem-calc(map-get($grid-column-gutter, medium))) {
+  display: grid;
+  gap: $row-gap $column-gap;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(auto-fit, minmax($min-column-width, 1fr));
+}
+
 @mixin full-width-cover($adjust-margin: true, $adjust-padding: false) {
   $global-padding: rem-calc(map-get($grid-column-gutter, medium)) * 0.5;
   bottom: 0;

app/assets/stylesheets/shared/recommended_index.scss

@@ -17,10 +17,10 @@
   }
 
   ul {
-    display: grid;
+    $row-gap: calc($line-height / 4);
+    @include dynamic-grid($row-gap: $row-gap);
+    @include grid-column-gutter;
     font-weight: bold;
-    grid-auto-rows: 1fr;
-    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
     list-style: none;
     margin: 0;
 
@@ -30,13 +30,9 @@
       }
     }
 
-    > li,
     + * {
       @include grid-column-gutter;
-    }
+      margin-top: $row-gap;
-
-    > li {
-      margin-bottom: calc($line-height / 4);
     }
   }