attempts to add border between have not worked yet

gatsby/src/components/MasonryGallery.js

@@ -8,9 +8,9 @@ import resolveConfig from 'tailwindcss/resolveConfig';
 import tailwindConfig from '../../tailwind.config.js';
 import useBreakpoint from 'use-breakpoint';
 
-const {theme: {screens}} = resolveConfig(tailwindConfig);
+const {theme} = resolveConfig(tailwindConfig);
-const themeBreakpoints = R.map(size => parseInt(size, 10), screens);
+const themeBreakpoints = R.map(size => parseInt(size, 10), theme.screens);
-console.log(themeBreakpoints);
+console.log(theme);
 
 const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
   const breakpoints = React.useMemo(() => 
@@ -25,49 +25,49 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
     R.map(R.sum)
   ))(itemsPerRowByBreakpoint), [aspectRatios, itemsPerRowByBreakpoint]);
 
-  // console.log('bp', breakpoint);
+  const itemsPerRow = itemsPerRowByBreakpoint[breakpoint];
   const rowAspectRatioSumsForCurrentBP = rowAspectRatioSumsByBreakpoint[breakpoint];
-  // console.log('rowAspectRatioSumsForCurrentBP :', rowAspectRatioSumsForCurrentBP);
   
   return (
     <div
+      className='w-full'
       style={{
-        width: '100%',
         position: 'relative',
       }}
-      // className='mx-auto'
       // style={{ maxWidth: minWidth }}
     >
       {images.map((image, i) => {
-        const rowIndex = Math.floor(i / itemsPerRowByBreakpoint[breakpoint]);
+        const rowIndex = Math.floor(i / itemsPerRow);
         const rowAspectRatioSum = rowAspectRatioSumsForCurrentBP[rowIndex];
-        const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10);
+        // const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10);
+        const ar = getAspectRatio(image);
+        const widthNumber = ((ar / rowAspectRatioSum) * 100);
+        const gutterReserve = parseInt(theme.spacing['1'], 10) * (itemsPerRow - 1);
+        const width = `${widthNumber}%`;
+        // const width = `${widthNumber}%`;
         // console.log('ars', rowAspectRatioSum);
         if (i === 0) {
           // console.log(rowIndex, rowAspectRatioSum);
-          console.log(getName(image), `${width}%`);
+          console.log(getName(image), width);
         }
         return (
-          <div 
+          <Link 
             key={`${image.base}`}
             className='inline-block'
             style={{
-              width: `${width}%`,
+              width,
+              // marginLeft: '8px',
             }}
+            state={{modal: true}} to={`/photogallery/${image.base}`}
           >
-            {/* // <Link className='inline-block' key={image.base} state={{modal: true}} to={`/photogallery/${image.base}`}> */}
             <GatsbyImage
-              // key={`${image.base}-img`}
+              className='w-full'
-              // className='p-2'
+              objectFit='cover'
-              style={{
+              // style={{ width }}
-                width: '100%',
-              }}
-              objectFit='contain'
               image={getImage(image)}
               alt={getName(image)}
             />
-            {/* // </Link> */}
+          </Link>
-          </div>
         );
       })}
     </div>);

gatsby/src/pages/photogallery.js

@@ -11,18 +11,6 @@ const GalleryPage = ({ data }) => {
   const images = React.useMemo(() =>
     data.allFile.edges
       .map(edge => edge.node, [data])
-      // .sort((left, right) => {
-      //   const leftDate = new Date(getMeta(left).dateTaken);
-      //   console.log(leftDate);
-      //   const rightDate = new Date(getMeta(right).dateTaken);
-      //   if (leftDate < rightDate) {
-      //     return 1;
-      //   }
-      //   if (leftDate > rightDate) {
-      //     return -1;
-      //   }
-      //   return 0;
-      // }) // TODO HERE
   , [data]);
 
   return (<>
@@ -32,7 +20,7 @@ const GalleryPage = ({ data }) => {
     </Helmet>
     <div className="bg-black min-h-screen">
       <h1 className="text-2xl">Gallery</h1>
-      <div className="mx-auto" style={{maxWidth: '1800px'}}>
+      <div className="mx-auto 2xl:container">
         <MasonryGallery
           images={images}
           itemsPerRow={{