How do I make make three squares in one section with borders like this?

If you are using a Squarespace 7.1 site, this will be very easy using a List Section.

1. Add a Simple List, turn on/off whichever elements you want to include,
2. Set "Space Between Columns" and "Space Between Rows" to 0px
3. Copy & Paste into Design > Custom CSS. You will need to know the page section's "data-section-id" attribute to replace the placeholder with.

[data-section-id="SECTION_ID_GOES_HERE"] {
  .user-items-list-simple .list-item {
      border: 2px solid gray;
      padding: 46px;
  }
  @media(min-width: 574px) {
    li.list-item:nth-child(2) {
      border-left: none;
      border-right: none;
    }
  }
  @media(min-width: 574px) {
    li.list-item:nth-child(2) {
      border-top: none;
      border-bottom: none;
    }
  }
}