Copy CSS grid from gem cards to popular links

The CSS is used for the grid is taken from the `cards` component.

app/assets/stylesheets/views/_homepage.scss

@@ -259,25 +259,40 @@
 
 .homepage-most-viewed-list {
   list-style: none;
-  margin: 0;
   padding: 0;
+  // Remove the outermost left and right margin from the internal margin of the list items.
+  margin: 0 govuk-spacing(-3);
 
-  @include govuk-media-query($from: "tablet") {
-    padding-bottom: 0;
-  }
+  display: grid;
+  grid-auto-flow: row;   // Use CSS grid to calculate the number of rows
+  grid-auto-rows: fractions(1); // Set all rows to same fractional height of the complete grid
+  grid-template-columns: fractions(1);
 
-  & > div:last-child li:last-child {
-    margin-bottom: 0;
+  // @include govuk-media-query($from: "tablet") {
+  //   grid-template-columns: fractions(2);
+  // }
+
+  @include govuk-media-query($from: "desktop") {
+    // Note that browsers that don't support CSS grid display the component as one column on all
+    // breakpoints
+    grid-template-columns: fractions(3);
+
+    // For browsers that don't support CSS grid, constrain the width to 50% to improve usability
+    // especially for screen magnifier users
+    width: 50%;
+
+    // Reset the width for browsers that support CSS grid
+    @supports (display: grid) {
+      width: initial;
+    }
   }
 }
 
 .homepage-most-viewed-list__item {
-  margin-bottom: govuk-spacing(4);
-
-  @include govuk-media-query($from: "desktop") {
-    margin-bottom: govuk-spacing(6);
-    padding-right: govuk-spacing(8);
-  }
+  // We use grid to split the container into column widths, so manage the horizontal spacing with
+  // internal margins.
+  margin: 0 govuk-spacing(3);
+  padding: 0 govuk-spacing(4) govuk-spacing(4) 0;
 }
 
 .homepage-most-viewed-list__item-link {