- From: AmeroHan via GitHub <noreply@w3.org>
- Date: Mon, 10 Nov 2025 13:35:06 +0000
- To: public-i18n-archive@w3.org
Flex can be used if your gap has a fixed length, which means `justify-content` is not `space-*`.
```css
.roster {
--row-gap: 0.5ic;
--column-gap: 1ic;
--column-width: 3ic;
--column-count: 3;
display: flex;
flex-wrap: wrap;
width: calc(
var(--column-width) * var(--column-count)
+ var(--column-gap) * (var(--column-count) - 1)
);
gap: var(--row-gap) var(--column-gap);
padding: 0;
margin: 2ic;
li {
display: block;
text-align-last: justify;
background-color: aquamarine;
width: calc-size(
max-content,
var(--column-width)
+ round(
up,
size - var(--column-width), var(--column-width) + var(--column-gap)
)
);
}
}
```
<img width="411" height="331" alt="Image" src="https://github.com/user-attachments/assets/ee8a830e-f14e-47ee-b3d8-7a5ba9b4cf85" />
--
GitHub Notification of comment by AmeroHan
Please view or discuss this issue at https://github.com/w3c/clreq/issues/268#issuecomment-3511700137 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 10 November 2025 13:35:11 UTC