Build Image Gallery component

src/components/gallery-img.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import Img from 'gatsby-image'
+import { StaticQuery, graphql } from 'gatsby'
+
+function renderImage(file) {
+  return <Img fluid={file.node.childImageSharp.fluid} />
+}
+
+const GalleryImg = function (props) {
+  return (
+    <StaticQuery
+      query={graphql`
+        query {
+          images: allFile(
+            filter: { extension: { regex: "/jpeg|jpg|png|gif/" } }
+          ) {
+            edges {
+              node {
+                extension
+                relativePath
+                childImageSharp {
+                  fluid(maxWidth: 350) {
+                    ...GatsbyImageSharpFluid
+                  }
+                }
+              }
+            }
+          }
+        }
+      `}
+      render={({ images }) =>
+        renderImage(
+          images.edges.find(image => image.node.relativePath === props.src)
+        )
+      }
+    />
+  )
+}
+
+export default GalleryImg

src/components/style.css

@@ -621,3 +621,28 @@ pre tt:after {
 .page-btn {
     margin-bottom: 40px;
 }
+
+.two-col-gallery-grid {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.gatsby-image-wrapper {
+    flex: 0 0 49%;
+    max-width: 49%;
+    margin-bottom: 2%;
+}
+
+@media screen and (max-width: 480px) {
+
+    .two-col-gallery-grid {
+        display: block;
+    }
+
+    .gatsby-image-wrapper {
+        max-width: none;
+    }
+
+}

src/pages/hall-hire.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Link } from 'gatsby'
-
+import GalleryImg from '../components/gallery-img'
 import LayoutPage from '../components/layout-page/layout-page'
 import SEO from '../components/seo'
 
@@ -25,9 +25,22 @@ const HallHirePage = () => (
     </ul>
     <p>Note: No loud amplified music is permitted as the hall is below sheltered accommodation. Gentle music is allowed.</p>
     <p>Please <Link to="/terms-of-hire">see our Terms of Hire</Link> for more information.</p>
+
     <hr />
+
     <h2 className="center">Hall Hire Gallery</h2>
-    <mark>image grid to go here ...</mark>
+
+    <div className="two-col-gallery-grid">
+        <GalleryImg src={`images/HLCCHL-Hall-Hire-1.jpg`} />
+        <GalleryImg src={`images/HLCCHL-Hall-Hire-2.jpg`} />
+        <GalleryImg src={`images/HLCCHL-Hall-Hire-3.jpg`} />
+        <GalleryImg src={`images/HLCCHL-Hall-Hire-4.jpg`} />
+        <GalleryImg src={`images/HLCCHL-Hall-Hire-9.jpg`} />
+        <GalleryImg src={`images/HLCCHL-Hall-Hire-6.jpg`} />
+        <GalleryImg src={`images/HLCCHL-Hall-Hire-7.jpg`} />
+        <GalleryImg src={`images/HLCCHL-Hall-Hire-8.jpeg`} />
+    </div>
+
   </LayoutPage>
 )