Nested CSS grid layout different behavior in Chrome and Firefox
This appears to be a bug in Firefox. But I'm not sure.
Here's what is clear:
The fact that you have nested grid containers matters.
Your second demo, which works in both Chrome and Firefox, has only one grid container.
The first demo, which only works in Chrome, has nested grid containers. If you eliminate that nesting, and use only one grid container, the layout works in both browsers.
So, as a possible cross-browser solution, minimize the nesting of grid containers.
In this revised demo, I've commented out
display: gridon thebodyand.contentelements. The only grid container left is on.main, the parent of the red boxes:revised demo
html,
body {
height: 100%;
width: 100%;
margin: 0 auto;
padding: 0;
}
body {
/* display: grid; */
grid-template-columns: 1fr;
grid-template-rows: 100px 1fr 50px;
}
.header {
grid-column: 1/2;
grid-row: 1/2;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: #57324f;
}
.header .title {
grid-column: 1/2;
grid-row: 1/2;
align-self: center;
justify-self: center;
width: 100%;
max-width: 1000px;
color: aliceblue;
}
.footer {
grid-column: 1/2;
grid-row: 3/4;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background-color: #57324f;
}
.footer .copyright {
grid-column: 1/2;
grid-row: 1/2;
align-self: center;
font-size: 12px;
justify-self: center;
width: 100%;
max-width: 1000px;
color: aliceblue;
}
.content {
grid-column: 1/2;
grid-row: 2/3;
/* display: grid; */
grid-template-columns: 1fr;
grid-template-rows: 0;
background-color: aliceblue;
}
.content .main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 10px;
grid-auto-flow: dense;
justify-self: center;
width: 100%;
margin-top: 10px;
max-width: 1000px;
}
.placeholder {
height: 100px;
position: relative;
border: 1px solid red;
}<div class="header">
<div class="title">
<h2>Header</h2>
</div>
</div>
<div class="content">
<div class="main">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
</div>
<div class="footer">
<div class="copyright">
<span>Footer</span>
</div>
</div>Firefox vs. Chrome discrepency in CSS Grid grid-template-column behavior on image sizes
I just figured it out. It wasn't the Grid but the image css fit and alignment properties within the grid. When I changed object-fit from "cover" to "contain" and added align-self: start, chrome behaves the same as Firefox. See updates to codepen and original post for correct code.
unexpected behavior with grid-template-rows and 1fr on chrome
The grid container is interpreting the min-height: 100vh on the flex parent differently in Chrome and Firefox.
As you noted, in Firefox everything works as you expect. But in Chrome, the min-height is effectively ignored (even though flex-grow: 1 works on the same element).
If you switch to height: 100vh you'll see the 1fr work in Chrome, as well.
I would have to research more to tell you if this is a bug or not.
Consider nesting the grid inside another grid, as opposed to flex, container.
.container {
display: grid;
min-height: 100vh;
grid-template-rows: min-content 1fr;
}
.grid {
background-color: red;
padding: 1rem;
grid-gap: 1rem;
display: grid;
grid-template-rows: 1fr auto;
}
.grid>* {
background-color: white;
}<div class="container">
<h1>some title</h1>
<div class="grid">
<div>line 1</div>
<div>line 2</div>
</div>
</div>Table header height different from chrome to firefox in grid layout
Add align-self: start; to .building-phonebook-table-labs so it won't stretch to full cell-height:
.view-content {
width: 400px;
}
/**
* Building Phonebook
*/
.building-phonebook-table tr td:nth-child(2),
.building-phonebook-table tr td:nth-child(3) {
max-width: 100px;
}
.building-phonebook-table th {
background: purple;
height: 20px;
line-height: 20px;
overflow: hidden;
color: #fff;
}
.building-phonebook-table th,
.building-phonebook-table td {
height: 20px;
line-height: 20px;
}
.building-phonebook-table {
margin: 0px;
padding: 0px;
border-collapse: collapse;
border-spacing: 0;
}
.building-phonebook header {
background: yellow;
}
/**
* Building-phonebook grid
*/
main.building-phonebook {
display: grid;
grid-template-areas: "header header" "main side" "other other";
grid-template-columns: auto auto;
grid-template-rows: auto auto;
grid-row-gap: 2px;
grid-column-gap: 2px;
}
.building-phonebook header {
grid-area: header;
}
.building-phonebook .building-phonebook-table-employees {
grid-area: main;
}
.building-phonebook .building-phonebook-table-labs {
grid-area: side;
align-self: start;
}<div class="view-content">
<main class="building-phonebook">
<header>This is header</header>
<table class="building-phonebook-table building-phonebook-table-employees">
<tr>
<th colspan="3">Employees</th>
</tr>
<tr>
<td><strong>Name and Surname</strong></td>
<td><strong>Telephone</strong></td>
<td><strong>Office/Info</strong></td>
</tr>
<tr>
<td colspan="3"><strong>Administration<strong></td>
</tr>
<tr>
<td colspan="3"><strong>Technicians<strong></td>
</tr>
<tr>
<td>name surname1</td>
<td>1234</td>
<td>roomA</td>
</tr>
<tr>
<td>name surname 2</td>
<td>4321</td>
<td>roomB - roomC</td>
</tr>
<tr>
<td colspan="3"><strong>Others Employeees<strong></td>
</tr>
<tr>
<td>name surname 3</td>
<td>5463 - 5478</td>
<td>133</td>
</tr>
<tr>
<td>name surname 4</td>
<td>5468 - 4569 - 213546879</td>
<td>215</td>
</tr>
</table>
<table class="building-phonebook-table building-phonebook-table-labs" >
<tr><th colspan="2">Labs</th></tr>
<tr>
<td><strong>Name</strong></td>
<td><strong>Telephone</strong></td>
</tr>
<tr>
<td colspan="3"><strong>Labs type 1<strong></td>
</tr>
<tr>
<td>lab 1</td>
<td>4712</td>
</tr>
<tr>
<td>lab 2</td>
<td>4568</td>
</tr>
<tr>
<td colspan="3"><strong>Other Laboratories<strong></td>
</tr>
<tr>
<td>labs banana</td>
<td>7841</td>
</tr>
<tr><td colspan="3"><strong>Services<strong></td></tr>
</table>
</main>
</div>Why does Chrome not expand an outer grid when the inner grid does
Not sure what the reason is, but you can get the expected behavior in Chrome by changing grid-template-columns: auto to 1fr:
.outer-grid {
display: grid;
grid-template-columns: 1fr;
/* ... */
}
Empty overlapping css grid cell prevents clicks in Firefox and Edge
you can reset pointer-events to allow clicking through an element, or reset position to bring an element on top of static elements:
pointer-events:
.grid {
display: grid;
align-items: stretch;
justify-items: stretch;
grid-template-rows: [first] repeat(2, minmax(auto, auto)) [last];
}
input {
width: 100%;
}
.a {
grid-area: 1 / 1 / span 1 / span 4;
}
.b {
grid-area: 1 / 5 / span 1 / span 4;
}
.c {
grid-area: 1 / 5 / span 1 / span 4;
pointer-events:none;/* here it won't catch mouse events */
}
.d {
grid-area: 1 / 9 / span 1 / span 4;
}<div class="grid">
<div class="a">
<input>
</div>
<div class="b">
<input>
</div>
<div class="c">
</div>
<div class="d">
<input>
</div>
</div>Related Topics
How to Remove the Top Margin in a Web Page
How to Cut a Circular Part from an Image
How to Implement Curve Background in CSS
Drawing Multiple Edges Between Two Nodes with D3
"Invalid Form Control" Only in Google Chrome
Differencebetween Readonly="True" & Readonly="Readonly"
How to Detect HTML 5 Compatibility in Browser
In HTML5, Can the <Header> and <Footer> Tags Appear Outside of the <Body> Tag
Setting the Granularity of the HTML5 Audio Event 'Timeupdate'
CSS Display None and Opacity Animation with Keyframes Not Working
How to Add Div Inside Table Above Every <Tr>
What Elements Can a Span Tag Contain in HTML5
How to Properly Display German Characters in HTML
How to Change a CSS Property Dynamically in Angularjs