Merge pull request #158 from communitiesuk/grid-classes

Add grid layout and box container layout classes

gov_uk_dashboards/assets/dashboard.css

@@ -8198,4 +8198,25 @@ mark.expenditure {
   background-repeat: no-repeat;
   display: inline-block;
   vertical-align: middle;
+}
+
+.three_column_grid_layout {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px 100px;
+}
+
+.two_column_grid_layout {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px 100px;
+}
+
+.box_container_layout {
+  background-color: #f3f2f1;
+  padding: 20px 20px 10px 20px;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
 }

scss/dashboard.scss

@@ -1237,4 +1237,28 @@ mark.expenditure {
   background-repeat: no-repeat;
   display: inline-block;
   vertical-align: middle;
-}
+}
+
+.three_column_grid_layout {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px 100px;
+}
+
+.two_column_grid_layout {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px 100px;
+}
+
+.box_container_layout {
+  // GOV UK colours LIGHT_GREY
+  background-color: #f3f2f1;
+  padding: 20px 20px 10px 20px;
+  margin-bottom: 20px;
+  display: flex;
+  // Stack children vertically
+  flex-direction: column; 
+  // Stretch children to match the width of the container
+  align-items: stretch;  
+} 

setup.py

@@ -10,7 +10,7 @@
     author="Department for Levelling Up, Housing and Communities",
     description="Provides access to functionality common to creating a data dashboard.",
     name="gov_uk_dashboards",
-    version="9.33.0",
+    version="9.34.0",
     long_description=long_description,
     long_description_content_type="text/markdown",
     packages=find_packages(),