Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Content group simple: Align to non-gutter grid line and use CSS grid #4967

Closed
RobertaJHahn opened this issue Jan 21, 2021 · 0 comments
Closed

Content group simple: Align to non-gutter grid line and use CSS grid #4967

RobertaJHahn opened this issue Jan 21, 2021 · 0 comments
Assignees
@asudoh
Labels
dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package priority: high
Milestone
Sprint 21-03

Comments

@RobertaJHahn
Copy link

The problem

<dds-content-group-simple> assumes that it's used within a Carbon grid with gutter. However, there are several child contents, for example, card and link list, that should be aligned to non-gutter grid line.

We don't have a cohesive way how to deal with that at this point, that have caused for example the following problems:

  • Cards are aligned to grid gutter whereas it should be aligned to non-gutter grid line
  • Link list (horizontally) sticks out of the container element unless its containing element has (horizontal) paddings larger than $carbon--spacing-05 (the padding of Carbon grid gutter).

The solution

Make <dds-content-group-simple> not depend on a gutter (of Carbon grid) defined in its containing element. Also, use CSS grid for its internal layout to make the internal markup simpler.
@RobertaJHahn RobertaJHahn added dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package labels Jan 21, 2021
@asudoh asudoh self-assigned this Jan 27, 2021
@asudoh asudoh added this to the Sprint 21-03 milestone Jan 27, 2021
asudoh added a commit to asudoh/ibm-dotcom-library that referenced this issue Jan 27, 2021
@asudoh
refactor(content-group-simple): use CSS grid for layout
2615071 
Use CSS grid for layout for `<dds-content-group-simple>` to ensure
correct Carbon grid alignment and simplify the markup.

Refs carbon-design-system#4967.
@asudoh asudoh mentioned this issue Jan 29, 2021
Merged
kodiakhq bot pushed a commit that referenced this issue Feb 2, 2021
@asudoh
refactor(content-group-simple): use CSS grid for layout (#5038)
0bb75aa 
### Related Ticket(s)

Refs #4967.

### Description

Use CSS grid for layout for `<dds-content-group-simple>` to ensure correct Carbon grid alignment and simplify the markup.

### Changelog

**Changed**

- Change to use CSS grid for layout for `<dds-content-group-simple>`.
IgnacioBecerra pushed a commit to IgnacioBecerra/ibm-dotcom-library that referenced this issue Feb 22, 2021
@asudoh @IgnacioBecerra
refactor(content-group-simple): use CSS grid for layout (carbon-desig…
747f948 
…n-system#5038)

### Related Ticket(s)

Refs carbon-design-system#4967.

### Description

Use CSS grid for layout for `<dds-content-group-simple>` to ensure correct Carbon grid alignment and simplify the markup.

### Changelog

**Changed**

- Change to use CSS grid for layout for `<dds-content-group-simple>`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@asudoh asudoh

Labels
dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package priority: high
Projects
None yet
Milestone
Sprint 21-03
Development

No branches or pull requests
2 participants
@asudoh @RobertaJHahn