diff --git a/ui/app/styles/charts/topo-viz-node.scss b/ui/app/styles/charts/topo-viz-node.scss
index e0006a614..61db0702b 100644
--- a/ui/app/styles/charts/topo-viz-node.scss
+++ b/ui/app/styles/charts/topo-viz-node.scss
@@ -62,6 +62,10 @@
   }
 }
 
+.flex-masonry-columns-2 > .flex-masonry-item > .chart.topo-viz-node svg {
+  width: calc(100% - 0.75em);
+}
+
 .chart.topo-viz-edges {
   width: 100%;
   height: 100%;
diff --git a/ui/app/templates/components/topo-viz/datacenter.hbs b/ui/app/templates/components/topo-viz/datacenter.hbs
index 655976fca..810f6e810 100644
--- a/ui/app/templates/components/topo-viz/datacenter.hbs
+++ b/ui/app/templates/components/topo-viz/datacenter.hbs
@@ -7,11 +7,11 @@
       {{this.aggregatedAllocationResources.cpu}}/{{this.aggregatedNodeResources.cpu}} Mhz</span>
   </div>
   <div class="boxed-section-body">
-    {{#each @datacenter.nodes as |node|}}
+    <FlexMasonry @columns={{if @isSingleColumn 1 2}} @items={{@datacenter.nodes}} as |node|>
       <TopoViz::Node
         @node={{node}}
         @heightScale={{@heightScale}}
         @onAllocationSelect={{@onAllocationSelect}} />
-    {{/each}}
+    </FlexMasonry>
   </div>
 </div>