Bug occurs in Vaadin 10.0.0.beta3 and only in Chrome
When I have code like this:
<div style="background: white;column-count: 2;column-gap: .5rem;">
<div style="break-inside: avoid-column; page-break-inside: avoid;">
<vaadin-grid theme="compact row-stripes" height-by-rows="" style="touch-action: none;">
<!-- vaadin grid content -->
</vaadin-grid>
</div>
<div style="break-inside: avoid-column; page-break-inside: avoid;">
<vaadin-grid theme="compact row-stripes" height-by-rows="" style="touch-action: none;">
<!-- vaadin grid content -->
</vaadin-grid>
</div>
<div style="break-inside: avoid-column; page-break-inside: avoid;">
<vaadin-grid theme="compact row-stripes" height-by-rows="" style="touch-action: none;">
<!-- vaadin grid content -->
</vaadin-grid>
</div>
</div>
Only in first grid elements shows up. In the other two, there is only blank space:
![image]
(https://user-images.githubusercontent.com/11396254/37739255-d910454c-2d59-11e8-8434-6274f8ed3132.png)
![image]
(https://user-images.githubusercontent.com/11396254/37739263-e372b60a-2d59-11e8-831d-ce92f542a711.png)
When I remove the column-count: 2;column-gap: .5rem; style from outer div, the elements in other two grids shows up
![image]
(https://user-images.githubusercontent.com/11396254/37757176-5348bc52-2dac-11e8-9daa-773b58765892.png)
but I lose Masonry effect (“tiles” like effect with different heights) for which column-count was designed
![image]
(https://user-images.githubusercontent.com/11396254/37739420-4882094c-2d5a-11e8-954e-bfcce4b929c2.png)
I did a workaround for this by creating my own css class, and it works good (i don’t know if it will work in all cases, eg. row description), but I don’t think it’s proper solution for this problem.
<dom-module id="my-grid-styles" theme-for="vaadin-grid">
<template>
<style>
:host(.custom-grid) #items [part~="row"]
{
position: relative !important;
transform: none !important;
}
:host(.custom-grid) #header {
transform: none !important;
}
:host(.custom-grid) {
transform: none !important;
}
</style>
</template>
</dom-module>
<div style="background: white;column-count: 2;column-gap: .5rem;">
<div style="break-inside: avoid-column; page-break-inside: avoid;">
<vaadin-grid class="custom-grid" theme="compact row-stripes" height-by-rows="" style="touch-action: none;">
<!-- vaadin grid content -->
</vaadin-grid>
</div>
<div style="break-inside: avoid-column; page-break-inside: avoid;">
<vaadin-grid class="custom-grid" theme="compact row-stripes" height-by-rows="" style="touch-action: none;">
<!-- vaadin grid content -->
</vaadin-grid>
</div>
<div style="break-inside: avoid-column; page-break-inside: avoid;">
<vaadin-grid class="custom-grid" theme="compact row-stripes" height-by-rows="" style="touch-action: none;">
<!-- vaadin grid content -->
</vaadin-grid>
</div>
</div>
![image]
(https://user-images.githubusercontent.com/11396254/37757150-43dd1970-2dac-11e8-8d3a-bba8984c82a4.png)
