Заполнение пробелов в div скрыть / показать

function projectCollab() {
      var divsToCange = document.querySelectorAll('[data-decision]'),
        attr = this.getAttribute('data-collaborate');

      for (var i = 0; i < divsToCange.length; i++) {
        var d = divsToCange[i];

        if (d.getAttribute('data-decision') == attr) {
          d.style.display = (!d.style.display) ? 'none' : '';
        } else {
          d.style.display = '';
        }
      }
      return false;
    }

    var divButtons = document.querySelectorAll('[data-collaborate]');

    for (var i = 0; i < divButtons.length; i++) {
      divButtons[i].addEventListener('click', projectCollab);
    }
    

.decisionTreeBox {
  background-color: #4B92DB;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#decisionTreeOneDrive {
  background-color: #094AB2;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#decisionTreeProject {
  background-color: #3C8B12;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#decisionTreeSharePoint {
  background-color: #008CE7;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#decisionTreeTeams {
  background-color: #4A1EBD;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#decisionTreePlanner {
  background-color: #247D0E;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#decisionTreeYammer {
  background-color: #39A4C1;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#innerBoxHeadings {
  color: white!important;
  text-align: center;
  padding-top: 5px;
}

#columnMiddleBorderLeft,
#pageTitle {
  display: none!important;
}

<div class = "outer-container">
  <div class = "row">
    <div class = "col-md-4" style = "text-align: center;">
      <div data-collaborate = "projects" class = "decisionTreeBox" style = "font-size: larger;">
        Collaborate on Projects</div>
    </div>
    <div class = "col-md-4" style = "text-align: center;">
      <div data-collaborate = "files" class = "decisionTreeBox" style = "font-size: larger;">
        Collaborate on Files</div>
    </div>
    <div class = "col-md-4" style = "text-align: center;">
      <div data-collaborate = "socially" class = "decisionTreeBox" style = "font-size: larger;">
        Collaborate Socially</div>
    </div>
  </div>
  <hr />
  <div class = "container" style = "padding: 0px;">
    <div class = "row">
      <div class = "col-md-4" style = "text-align: center;">
        <div data-decision = "projects" id = "decisionTreeOneDrive">
          <h3 id = "innerBoxHeadings"><img src = "/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style = "width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />OneDrive</h3>
        </div>
      </div>
      <div class = "col-md-4" style = "text-align: center;">
        <div data-decision = "projects" id = "decisionTreeProject">
          <h3 id = "innerBoxHeadings"><img src = "/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style = "padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Project</h3>
        </div>
      </div>
      <div class = "col-md-4" style = "text-align: center;">
        <div data-decision = "files" id = "decisionTreeSharePoint">
          <h3 id = "innerBoxHeadings"><img src = "/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style = "padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />SharePoint</h3>
        </div>
      </div>
      <div class = "col-md-4" style = "text-align: center;">
        <div data-decision = "files" id = "decisionTreeTeams">
          <h3 id = "innerBoxHeadings"><img src = "/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style = "padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Teams</h3>
        </div>
      </div>
      <div class = "col-md-4" style = "text-align: center;">
        <div data-decision = "socially" id = "decisionTreePlanner">
          <h3 id = "innerBoxHeadings"><img src = "/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style = "padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Planner</h3>
        </div>
      </div>
      <div class = "col-md-4" style = "text-align: center;">
        <div data-decision = "socially" id = "decisionTreeYammer">
          <h3 id = "innerBoxHeadings"><img src = "/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style = "padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Yammer</h3>
        </div>
      </div>
    </div>
    <div class = "row" style = "margin-top: 40px;">
      
    </div>
  </div>
</div>

$('.item1').click((e) => {
  e.stopPropagation();
  e.preventDefault();
  $(".item5, .item6").toggle();
});

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  grid-gap: 10px;
}

div {
  text-align: center;
  padding: 15px;
}

[class^='item'] {
  background-color: #2196F3;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "grid-container controller" style = "grid-auto-flow: row;">
  <div class = "item1">1</div>
  <div class = "item2">2</div>
  <div class = "item3">3</div>
  <div class = "item4">4</div>
</div>

<hr>

<div class = "grid-container" style = "grid-auto-flow: row;">
  <div class = "item5">1</div>
  <div class = "item6">2</div>
  <div class = "item7">3</div>
  <div class = "item8">4</div>
</div>