Menu
I'm building a kind of post grid slider that would show 4 boxes in CSS grid. I build up everything and it works as intended except it does not work in Firefox.
Both Firefox and Safari have problem display the grid height. They result in 0 or 1px. To fix this I used display:flex and flex-flow are set to row wrap. This works in Safari but does not work in Firefox. When I remove flex from the container it works in Firefox but then it does not work in Safari.
Edge and Chrome are fine with both ways. I'm lost in looking for a solution and tried working around with it but still same results.
I'm using padding-top and position absolute to have 'proportionally' responsive grid and its items.
Thank you for your replies. https://codepen.io/Mariopa/pen/ELjqYr
HTML
<div class="post-grid-slider">
<div class="post-grid-wrapper">
<div class="post-grid">
<div class="post-grid__item">
<a href="#" target="_self" rel="nofollow" class="post-grid__link">
<div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/Inoutic-1024x683)"></div>
<div class="subcategory"><span >Category</span></div>
<h2 class="post-grid__title">Title</h2>
</a>
</div>
<div class="post-grid__item">
<a href="#" target="_self" rel="nofollow" class="post-grid__link">
<div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/kinds-of-food-3320746_1920-1024x683)"></div>
<div class="subcategory"><span>Category</span></div>
<h2 class="post-grid__title">Title</h2>
</a>
</div>
<div class="post-grid__item">
<a href="#" target="_self" rel="nofollow" class="post-grid__link">
<div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/leaf-397870_1920-1024x768)"></div>
<div class="subcategory"><span>Category</span></div>
<h2 class="post-grid__title">Title</h2>
</a>
</div>
<div class="post-grid__item">
<a href="#" target="_self" rel="nofollow" class="post-grid__link">
<div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/grape-hyacinth-1024x679)"></div>
<div class="subcategory"><span>Category</span></div>
<h2 class="post-grid__title">Title</h2>
</a>
</div>
</div>
</div>
</div>
CSS
.post-grid-slider {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-ms-flex-flow:row nowrap;
flex-flow:row nowrap;
height:100%;
padding: 0 15px;
}
.post-grid-wrapper {
-webkit-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
position: relative;
width:100%;
padding-top: 25%;
}
.post-grid {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto;
grid-template-columns: auto;
-ms-grid-rows: 50% 50%;
grid-template-rows: 50% 50%;
grid-column-gap: 0.0625rem;
grid-row-gap: 0.0625rem;
width: 100%;
height: 100%;
}
.post-grid__item {
position: relative;
overflow: hidden;
}
.post-grid__item:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-column-span: 6;
grid-column: 1/7;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
grid-row: 1/3;
}
.post-grid__item:nth-child(2) {
-ms-grid-column: 7;
-ms-grid-column-span: 4;
grid-column: 7/11;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1/2;
}
.post-grid__item:nth-child(3) {
-ms-grid-column: 7;
-ms-grid-column-span: 2;
grid-column: 7/9;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
grid-row: 2/3;
}
.post-grid__item:nth-child(4) {
-ms-grid-column: 9;
-ms-grid-column-span: 2;
grid-column: 9/11;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
grid-row: 2/3;
}
.post-grid__link {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.post-grid__link:hover > .post-grid__thumbnail {
webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.post-grid__thumbnail {
width: 100%;
height: 100%;
margin: 0px;
position: absolute;
background-repeat: no-repeat;
background-position: left center;
background-size: cover;
-webkit-transition: All .7s ease;
-moz-transition: All .7s ease;
-o-transition: All .7s ease;
transition: All .5s ease;
-webkit-transform: scale(1.20);
-moz-transform: scale(1.20);
-o-transform: scale(1.20);
-ms-transform: scale(1.20);
transform: scale(1.20);
}
.post-grid__thumbnail::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50%;
-webkit-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.8)));
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8));
background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8));
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
}
.subcategory {
position: absolute;
top: 15px;
left: 15px;
display: inline-block;
padding: 0 0.5rem;
background: #A20315;
color: #fff;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
z-index: 1;
line-height: 24px;
}
.post-grid__title {
position: absolute;
left: 15px;
bottom: 15px;
text-shadow: 0 1px 5px rgba(0,0,0,0.4);
margin: 0;
font-weight: 500;
color: #fff;
}
799
The supporting browsers Other than in Internet Explorer, CSS Grid Layout is unprefixed in Safari, Chrome, Opera, Firefox and Edge. Support for all the properties and values detailed in these guides is interoperable across browsers.
Most developers are afraid to start using CSS Grid because of browser support, but CSS grid is fully supported in all main browsers: Chrome, Firefox, Safari, Edge including their mobile versions.
If you're layout-first, meaning you want to create the layout and then place items into it, then you'll be better off with CSS Grid. But if you're content-first, meaning you have items that you want to place into a container and space out evenly, go with Bootstrap.
If the scrolling of the Grid is disabled and the columns or rows do fit, they overflow the <div> element of the Grid. As a result, the right or bottom border of the widget shows through the table cells.
I found a solution out of blue. I removed the flexbox from the container and wrapper. And I added height:0; to wrapper. It seems to work as intended in all browsers.
I have updated codepen demo.
.post-grid-slider {
height:100%;
padding: 0 15px;
}
.post-grid-wrapper {
position: relative;
width:100%;
height: 0;
padding-top: 25%;
}
.post-grid {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto;
grid-template-columns: auto;
-ms-grid-rows: 50% 50%;
grid-template-rows: 50% 50%;
grid-column-gap: 0.0625rem;
grid-row-gap: 0.0625rem;
width: 100%;
height: 100%;
}
.post-grid__item {
position: relative;
overflow: hidden;
}
.post-grid__item:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-column-span: 6;
grid-column: 1/7;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
grid-row: 1/3;
}
.post-grid__item:nth-child(2) {
-ms-grid-column: 7;
-ms-grid-column-span: 4;
grid-column: 7/11;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1/2;
}
.post-grid__item:nth-child(3) {
-ms-grid-column: 7;
-ms-grid-column-span: 2;
grid-column: 7/9;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
grid-row: 2/3;
}
.post-grid__item:nth-child(4) {
-ms-grid-column: 9;
-ms-grid-column-span: 2;
grid-column: 9/11;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
grid-row: 2/3;
}
.post-grid__link {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.post-grid__link:hover > .post-grid__thumbnail {
webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.post-grid__thumbnail {
width: 100%;
height: 100%;
margin: 0px;
position: absolute;
background-repeat: no-repeat;
background-position: left center;
background-size: cover;
-webkit-transition: All .7s ease;
-moz-transition: All .7s ease;
-o-transition: All .7s ease;
transition: All .5s ease;
-webkit-transform: scale(1.20);
-moz-transform: scale(1.20);
-o-transform: scale(1.20);
-ms-transform: scale(1.20);
transform: scale(1.20);
}
.post-grid__thumbnail::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50%;
-webkit-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.8)));
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8));
background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8));
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
}
.subcategory {
position: absolute;
top: 15px;
left: 15px;
display: inline-block;
padding: 0 0.5rem;
background: #A20315;
color: #fff;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
z-index: 1;
line-height: 24px;
}
.post-grid__title {
position: absolute;
left: 15px;
bottom: 15px;
text-shadow: 0 1px 5px rgba(0,0,0,0.4);
margin: 0;
font-family: 'Roboto';
font-weight: 500;
color: #fff;
}
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