I am in the process of creating a grid of items using pure CSS and HTML. I have encountered an issue while testing in Safari. I have extracted the code into a CodePen which works in the same way as my grid.
This is the code that I am using to reproduce the issue:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
background: WhiteSmoke;
}
.wrapper {
display: block;
font: 400 14px/1.3 "Helvetica", sans-serif;
width: 100%;
padding: 0 20px;
@media only screen and (min-width : 768px) {
column-count: 2;
font-size: 17px;
column-gap: 20px;
}
@media only screen and (min-width : 992px) {
column-count: 3;
}
}
.wrapper > * {
@media only screen and (min-width : 768px) {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
}
.wrapper > *:last-child {
margin-bottom: 0;
}
.card {
box-sizing: border-box;
display: block;
width: 100%;
overflow: hidden;
background: #FFF;
border: 1px solid red;
margin-bottom: 20px;
padding: 15px;
font-family: "Helvetica", sans-serif;
}
<div class="wrapper">
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
<div class="card">D</div>
<div class="card">E</div>
</div>
Below are two screenshots (both taken on macOS 10.13) showing the different results in Chrome and Safari.
The issue being is that Safari seems to carry over the margin from the previous item in to the second column. Is there a way to force behaviour similar to that of Chrome?
Edit:
I should also include that I have tried setting .card
to display: inline-block;
which makes it look fine in both Chrome and Safari, as long as the items are of the same sizes.
Below is another screenshot comparing Chrome and Safari this time with .card
having display: inline-block;
and the first item being much larger then the rest.
The columns CSS shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.
The column-count will act as the maximum number of columns, while the column-width will dictate the minimum width for each column. By pulling these properties together, the multi-column layout will automatically break down into a single column at narrow browser widths without the need of media queries or other rules.
My team had the same problem and we fixed it by adding extra div at the bottom of the column, with the height of the wanted margin-bottom and width 100%
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With