Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Issue with Safari and CSS Columns

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?

output in Safari and 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.

output in Safari and Chrome with a larger first item and display: inline-block property on .card

like image 466
J. Pinkman Avatar asked Jun 19 '18 15:06

J. Pinkman


People also ask

What is a CSS column?

The columns CSS shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.

How do columns work in CSS?

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.


1 Answers

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%

like image 86
Piotr Morawski Avatar answered Nov 13 '22 01:11

Piotr Morawski