[Condensed grid] Remove 2px gutter and achieve grid division with 1px border

[shixiedesign]

Summary

In Carbon's current grid guidance, Condensed grid is used to achieve a 2px division between grouped items (typically cards or tiles) placed on grid. However, this visual treatment is rarely found in the IBM Design Language. Even Carbon homepage and IBM Design Language homepage employs a 1px division between cards in groups. We have yet found compelling examples that uses condensed grid as-is to achieve a 2px division. Digital team (IBM.com) would like to use a 1px division in card groups as well, and the current Condensed grid implementation is blocking it.

The suggestion is to update Condensed grid to support 1px division to really enable teams to build designs already established by the Language.

Details or "Must have" functionality

Zero out the gap between items placed on grid by default. Items get full width of the columns assigned. Division between adjacent items is achieved by adding 1px border, either$ui-03 $ui-04 or $ui-05.

Proposed designs for Card groups on IBM.com

A section from the Learn page. Design come from IBM.com Reboot team (contact persons Lila Title, Shixie Shi Trofimov) and IBM.com Digital Design System team (Wonil Suh, Lara Hanlon, Olivia Flory).

On mobile, all cards stack vertically, 1px border-top $ui-03 on touching cards

Desktop (xlg) breakpoint alone:

Comparison. More explorations exist if anyone wanna see them.

Justification

Visual weight of a 2px division using $ui-background vs a 1px division using $ui-03 is about the same. We should unify so designers don't get confused seeing exemplifying live pages differ from tooling and guidance.

List of places where 1px division is seen on official sources exemplifying the Language:

• IBM Design Language homepage:
  https://www.ibm.com/design/language/
  

• Carbon homepage, icon library, components overview... no where on Carbon is 2px division ever used
  https://www.carbondesignsystem.com
  https://www.carbondesignsystem.com/guidelines/icons/library
  https://www.carbondesignsystem.com/components/overview
  
  
  

• IBM Design Thinking
  https://www.ibm.com/design/thinking/page/courses/Practitioner