Differences in functionality across various browsers when dealing with complex subgrid structures

Question

Differences in functionality across various browsers when dealing with complex subgrid structures

After nesting a subgrid inside a padded subgrid within a grid, I noticed varying behavior across different web browsers.

Chrome/Edge (Windows)	Firefox (Windows)	Safari MacOS
https://i.stack.imgur.com/uHlto.png	https://i.stack.imgur.com/SGxuC.png	https://i.stack.imgur.com/QkVIT.png

This is the provided code snippet:

.grid {
  display: grid;
  grid-template-columns: [fullwidth-start] 100px [col1-start] 1fr [col1-end col2-start] 1fr [col2-end col3-start] 1fr [col3-end] 100px [fullwidth-end];
}
.grid .subgrid {
  display: grid;
  grid-column: fullwidth;
  grid-template-columns: subgrid;
}

.pad {
  padding-inline: 200px;
}

.setgap {
  padding-block: 1em;
  background-color: #def;
  display: grid;
  gap: 1em;
  grid-column: fullwidth;
  grid-template-columns: subgrid;
}

.col1_2 {
  background-color: #edf;
  padding: 1em;
  grid-column: col1-start/span 2;
}

.col3 {
  padding: 1em;
  background-color: #fde;
  grid-column: col3;
}

<div class="grid">
  <div class="subgrid pad">
    Padded content<br><br>
    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
</div>


<div class="grid">
  <div class="subgrid">
    Non-padded content<br><br>
    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
</div>

Which interpretation aligns best with the intended specifications? The desired outcome is to replicate the behavior observed in Chrome.

css cross-browser subgrid

Answer 1

Answer №1

Firstly, there is a multitude of discrepancies in how CSS is rendered across various browsers, not just limited to subgrid, which is still relatively new.

Secondly, as I am unable to view the browser images you provided, I have created a fiddle for testing purposes.

https://jsfiddle.net/Ltp4m7fw/

Thirdly, while I am not very familiar with subgrid yet, there may be a more effective approach available. However, I managed to achieve consistent appearance in Chrome and Firefox (Windows) by making some adjustments to your CSS grid elements.

The issue could potentially be related to the lack of width declaration on the inner items. Certain browsers are particular about this aspect. To replicate the layout of "Padded content," I utilized calc and margin properties.

I am not entirely clear on your ultimate goal, but I hope this initial guidance sets you on the right path.

/* Begin Edits */
div.grid, div.setgap.subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
div.setgap.subgrid {
  gap: initial;
  row-gap: 1rem;
  column-gap: 1rem;
}
div.subgrid.pad > span {
  background-color: aqua;
}
div.subgrid > span {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 4;
  width: 100%;
  background-color: violet;
}
div.col1_2 {
  grid-column: 1;
}
div.col3 {
  grid-column: 2;
}
.pad {
  padding: 2.5rem !important;
}
.subgrid:not(.pad) .setgap.subgrid {
  column-gap: initial;
}
.subgrid:not(.pad) .setgap.subgrid .col1_2 {
  width: calc(100% - 5rem);
  margin: 0 auto 0 2.5rem;
}
.subgrid:not(.pad) .setgap.subgrid .col3 {
  width: calc(100% - 5rem);
  margin: 0 2.5rem 0 auto;
}
/* End Edits */

.grid {
  display: grid;
  grid-template-columns: [fullwidth-start] 100px [col1-start] 1fr [col1-end col2-start] 1fr [col2-end col3-start] 1fr [col3-end] 100px [fullwidth-end];
}
.grid .subgrid {
  display: grid;
  grid-column: fullwidth;
  grid-template-columns: subgrid;
}

.pad {
  padding-inline: 200px;
}

.setgap {
  padding-block: 1em;
  background-color: #def;
  display: grid;
  gap: 1em;
  grid-column: fullwidth;
  grid-template-columns: subgrid;
}

.col1_2 {
  background-color: #edf;
  padding: 1em;
  grid-column: col1-start/span 2;
}

.col3 {
  padding: 1em;
  background-color: #fde;
  grid-column: col3;
}

<div class="grid">
  <div class="subgrid pad">
    <span>Padded content</span>
    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
</div>


<div class="grid">
  <div class="subgrid">
    <span>Non-padded content</span>
    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
</div>

Answer 2

Firstly, there is a multitude of discrepancies in how CSS is rendered across various browsers, not just limited to subgrid, which is still relatively new.

Secondly, as I am unable to view the browser images you provided, I have created a fiddle for testing purposes.

https://jsfiddle.net/Ltp4m7fw/

Thirdly, while I am not very familiar with subgrid yet, there may be a more effective approach available. However, I managed to achieve consistent appearance in Chrome and Firefox (Windows) by making some adjustments to your CSS grid elements.

The issue could potentially be related to the lack of width declaration on the inner items. Certain browsers are particular about this aspect. To replicate the layout of "Padded content," I utilized calc and margin properties.

I am not entirely clear on your ultimate goal, but I hope this initial guidance sets you on the right path.

/* Begin Edits */
div.grid, div.setgap.subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
div.setgap.subgrid {
  gap: initial;
  row-gap: 1rem;
  column-gap: 1rem;
}
div.subgrid.pad > span {
  background-color: aqua;
}
div.subgrid > span {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 4;
  width: 100%;
  background-color: violet;
}
div.col1_2 {
  grid-column: 1;
}
div.col3 {
  grid-column: 2;
}
.pad {
  padding: 2.5rem !important;
}
.subgrid:not(.pad) .setgap.subgrid {
  column-gap: initial;
}
.subgrid:not(.pad) .setgap.subgrid .col1_2 {
  width: calc(100% - 5rem);
  margin: 0 auto 0 2.5rem;
}
.subgrid:not(.pad) .setgap.subgrid .col3 {
  width: calc(100% - 5rem);
  margin: 0 2.5rem 0 auto;
}
/* End Edits */

.grid {
  display: grid;
  grid-template-columns: [fullwidth-start] 100px [col1-start] 1fr [col1-end col2-start] 1fr [col2-end col3-start] 1fr [col3-end] 100px [fullwidth-end];
}
.grid .subgrid {
  display: grid;
  grid-column: fullwidth;
  grid-template-columns: subgrid;
}

.pad {
  padding-inline: 200px;
}

.setgap {
  padding-block: 1em;
  background-color: #def;
  display: grid;
  gap: 1em;
  grid-column: fullwidth;
  grid-template-columns: subgrid;
}

.col1_2 {
  background-color: #edf;
  padding: 1em;
  grid-column: col1-start/span 2;
}

.col3 {
  padding: 1em;
  background-color: #fde;
  grid-column: col3;
}

<div class="grid">
  <div class="subgrid pad">
    <span>Padded content</span>
    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
</div>


<div class="grid">
  <div class="subgrid">
    <span>Non-padded content</span>
    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
</div>

Answer 3

Answer №2

To ensure that the content doesn't touch the columns, you can apply padding directly to the content block:

.grid {
  display: grid;
  grid-template-columns: 100px 1fr 1fr 1fr 100px;
  row-gap: 1em;
}

.pad {
  padding-inline: 200px;
}

.grid-content {
  grid-column: 1 / -1;
}

.grid .subgrid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.setgap {
  padding-block: 1em;
  background-color: #def;
}

.col1_2 {
  background-color: #edf;
  padding: 1em;
  grid-column: 2 / 4;
}

.col3 {
  padding: 1em;
  background-color: #fde;
  grid-column: 4;
}

<div class="grid">
  <div class="subgrid">
     <div class="grid-content pad">
        Padded content<br><br>
     </div>
    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
  <div class="subgrid">
    <div class="grid-content">
    Non-padded content<br><br>
    </div>

    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
</div>

It's important to note that the size of margins, borders, and padding may impact the parent grid's tracks and the grid element's position in different browsers. For more information, refer to subgrid-item-contribution.

Answer 4

To ensure that the content doesn't touch the columns, you can apply padding directly to the content block:

.grid {
  display: grid;
  grid-template-columns: 100px 1fr 1fr 1fr 100px;
  row-gap: 1em;
}

.pad {
  padding-inline: 200px;
}

.grid-content {
  grid-column: 1 / -1;
}

.grid .subgrid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.setgap {
  padding-block: 1em;
  background-color: #def;
}

.col1_2 {
  background-color: #edf;
  padding: 1em;
  grid-column: 2 / 4;
}

.col3 {
  padding: 1em;
  background-color: #fde;
  grid-column: 4;
}

<div class="grid">
  <div class="subgrid">
     <div class="grid-content pad">
        Padded content<br><br>
     </div>
    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
  <div class="subgrid">
    <div class="grid-content">
    Non-padded content<br><br>
    </div>

    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
</div>

It's important to note that the size of margins, borders, and padding may impact the parent grid's tracks and the grid element's position in different browsers. For more information, refer to subgrid-item-contribution.

Differences in functionality across various browsers when dealing with complex subgrid structures

Answer №1

Answer №2

Similar questions

Dropdown menu is not positioning correctly over other elements on the webpage

What is the best way to remove unnecessary space in a div when the content is smaller than the height, while still using overflow:auto?

Getting user input with JQuery and dynamically updating CSS properties

The nested navigation link disappears suddenly on Internet Explorer 9

Trouble with the Bootstrap navbar loading correctly

Combine linear and radial background effects in CSS styling

Dynamically linking tabbable tabs is a useful technique that allows for

Looking to implement a CSS banner image for seamless customization across multiple pages

The div within the button is failing to properly adjust to height settings

Trigger the scrolling of one div when another div is scrolled

Having trouble with CSS margins behaving unexpectedly

I'm struggling to understand how to interpret this. The v-tab function seems to be generating a button with various properties, but I'm unsure which specific property is related to

What is the purpose of applying the two unique class names (root and disabled) to the DOM in order for it to function correctly?

Angular material input featuring an additional component

What could be the reason for the css problems being caused by my flash banner?

Expanding divs automatically depending on the content they contain

Tips for customizing the scrollbar design in iOS Safari

What could be causing my dropdown menu to vanish unexpectedly after being clicked for the first time?

When using JQuery's .each method, only the first two elements from an array of automatically generated elements are retrieved

Are there ways to implement Vue.js transitions without directly setting the height in the code?