Skip to content

Instantly share code, notes, and snippets.

@louisebolden

louisebolden/css-list-columns-with-break-inside.css

Created September 11, 2017 09:44
Show Gist options
  • Save louisebolden/095db85fcdfac50662c787d8786841f3 to your computer and use it in GitHub Desktop.
Save louisebolden/095db85fcdfac50662c787d8786841f3 to your computer and use it in GitHub Desktop.
Download ZIP
A List Element with CSS Columns and `column-break-inside: avoid;`, to display the border-bottom on each list item correctly.
Raw
css-list-columns-with-break-inside.css
ol, ul {
columns: 3;
-webkit-column-break-inside: avoid;
}
li {
border-bottom: 1px solid silver;
margin-bottom: 1rem;
padding-bottom: 1rem;
}
@louisebolden
Copy link
Author

Result:
screen shot 2017-09-11 at 10 49 27

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment