title: grid-template-columns not respected in Safari 13
body: <p>I'm having an issue where the grid columns in my React component are showing up on separate rows in Safari 13. Numerous Google searches have come up with nothing and I'm really hoping somebody here can help. Here is the code of my React component (I've left out a bunch of state stuff and functions that aren't relevant):</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState, useRef } from 'react'
  import classNames from 'classnames'
  import SlideToggle from 'react-slide-toggle'
  import styles from './shoppingListItem.module.css'
  
  const ShoppingListItem = ({
    itemId,
    listTitle,
    canEdit,
    description,
    quantity,
    notes
  }) =&gt; {
    const [currentQuantity, setCurrentQuantity] = useState(quantity)
  
    return(
      &lt;div className={styles.root}&gt;
        &lt;button className={styles.button} onClick={toggleDetails}&gt;
          &lt;span ref={headerRef} className={classNames(styles.header, { [styles.headerEditable]: canEdit })}&gt;
            {canEdit &amp;&amp;
              &lt;span className={styles.editIcons} ref={iconsRef}&gt;
                &lt;div className={styles.icon} ref={deleteRef} onClick={destroyItem}&gt;&lt;FontAwesomeIcon className={classNames(styles.fa, styles.destroyIcon
                )} icon={faTimes} /&gt;&lt;/div&gt;
                &lt;div className={styles.icon} ref={editRef} onClick={showEditForm}&gt;&lt;FontAwesomeIcon className={styles.fa} icon={faEdit} /&gt;&lt;/div&gt;
              &lt;/span&gt;}
            &lt;h4 className={styles.description}&gt;{description}&lt;/h4&gt;
          &lt;/span&gt;
          &lt;span className={styles.quantity}&gt;
            {canEdit &amp;&amp; &lt;div className={styles.icon} ref={incRef} onClick={incrementQuantity}&gt;
              &lt;FontAwesomeIcon className={styles.fa} icon={faAngleUp} /&gt;
            &lt;/div&gt;}
            &lt;div className={styles.quantityContent}&gt;
              {currentQuantity}
            &lt;/div&gt;
            {canEdit &amp;&amp; &lt;div className={styles.icon} ref={decRef} onClick={decrementQuantity}&gt;
              &lt;FontAwesomeIcon className={styles.fa} icon={faAngleDown} /&gt;
            &lt;/div&gt;}
          &lt;/span&gt;
        &lt;/button&gt;
        &lt;SlideToggle toggleEvent={toggleEvent} collapsed&gt;
          {({ setCollapsibleElement }) =&gt; (
            &lt;div className={styles.collapsible} ref={setCollapsibleElement}&gt;
              &lt;p className={styles.notes}&gt;{notes || 'No details available'}&lt;/p&gt;
            &lt;/div&gt;
          )}
        &lt;/SlideToggle&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>The relevant CSS is:</p>
  <pre class="lang-css prettyprint-override"><code>.root {
    font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
    background-color: var(--main-color);
    border-bottom: 1px solid var(--border-color);
  }
  
  .root:hover {
    background-color: var(--hover-color);
  }
  
  .button {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    cursor: pointer;
    padding: 0;
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
  
  .fa {
    color: var(--title-text-color);
  }
  
  .destroyIcon {
    margin-right: 8px;
  }
  
  .header {
    display: inline-block;
    padding: 32px 16px;
    border-right: 1px solid var(--border-color);
  }
  
  .headerEditable {
    display: flex;
    align-items: flex-start;
  }
  
  .editIcons {
    display: flex;
    flex-direction: row;
    margin: auto 12px auto 0;
  }
  
  .quantity {
    font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
    font-size: 1rem;
    color: var(--title-text-color);
    display: inline-block;
    margin: auto 0;
    padding: 32px 8px;
    display: flex;
    justify-content: space-between;
  }
  
  .quantityContent {
    margin: auto;
  }
  
  .icon {
    display: inline-block;
    padding: 4px;
    cursor: pointer;
  }
  
  .description {
    display: inline-block;
    font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
    font-size: 1.025rem;
    color: var(--title-text-color);
    margin: auto 0;
    line-height: 1.25;
  }
  </code></pre>
  <p>This is what the list item <code>.button</code> element/its children look like in Chrome (i.e., the way it's supposed to look):</p>
  <p><a href="https://i.stack.imgur.com/1Epbi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Epbi.png" alt="Element in Chrome (right)" /></a></p>
  <p>This is the way the element looks in Safari (i.e., how it's not supposed to look):</p>
  <p><a href="https://i.stack.imgur.com/lwt8p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lwt8p.png" alt="Element in Safari 13 (wrong)" /></a></p>