Grid of Graphs with a gap I can not remove

src/assets/stylesheets/summary.scss

@@ -56,31 +56,54 @@ $hover-blue: #25b3ff;
   margin-bottom: 50px;
 }
 
-.summary-iframe {
-  width: 400px;
-  height: 400px;
-  min-height: 1px;
-  background: transparent;
-  margin: 10px;
-  display: block;
+
+.summary-grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* 2 columns */
+  grid-gap: 10px; /* Adjust the gap between iframes */
+  grid-row-gap: 5px; /* Adjust the gap between rows */
+
+  
+  // Debug Borders
+      border-width: 5px;
+      border-style: solid;
 }
 
-.summary-fieldContainer-pp {
-  width: 25%;
-  height: 300px;
-  border-radius: 20px;
-  text-align: center;
-  padding: 10px;
+.summary-iframe {
+  width: 100%; /* Ensure iframes take up full width of their grid cell */
+  height: 300px; /* Adjust the height of iframes */
+
+  // Debug Borders
+      border-width: 5px;
+      border-style: solid;
 }
 
+// .summary-iframe {
+//   width: 400px;
+//   height: 400px;
+//   min-height: 1px;
+//   background: transparent;
+//   margin: 10px;
+//   display: block;
+// }
+
+// .summary-fieldContainer-pp {
+//   width: 25%;
+//   height: 300px;
+//   border-radius: 20px;
+//   text-align: center;
+//   padding: 10px;
+// }
+
 .summary-fieldContainer-graph {
   width: 25%;
 }
 
-.summary-fieldContainer-dashboard {
-  width: 100%;
-  height: 300px;
-  border-radius: 20px;
-  text-align: center;
-  padding: 10px;
-}
+// .summary-fieldContainer-dashboard {
+//   width: 100%;
+//   height: 300px;
+//   border-radius: 20px;
+//   text-align: center;
+//   padding: 10px;
+// }

src/components/SummaryComponent.js

@@ -8,10 +8,11 @@ export default class SummaryComponent extends Component {
       <div className="summary">
         <img className="summary-image" src={BeldenLogo} alt="Belden" />
         <div className="summary-fieldContainer">
+          <div className="summary-grid">
             {/* <div className="summary-iframe"> */}
             <iframe
               className="summary-iframe"
-            src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
+              src="=http://192.168.1.12:3000/d/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&viewPanel=9"
               // width="400"
               // height="300"
               frameborder="0"
@@ -37,6 +38,7 @@ export default class SummaryComponent extends Component {
             {/* <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" width="450" height="200" frameborder="0"></iframe> */}
           </div>
         </div>
+      </div>
     );
   }
 }