CODEWITHSUNDEEP
htmlcss
Andreas Christiansen
Andreas Christiansen

Reputation: 946

Ignore divs surrounding grid cells in display: grid

I have a grid-layout with 3 children, each spanning 4 out of 12 columns, to create a horisontal 3 column layout. A simplified example can be seen here: https://jsfiddle.net/bnyy6fde/1/.

<div class="grid">
  <div class="grid-cell">
    <h3>Grid element 1</h3>
  </div>
  <div class="grid-cell">
    <h3>Grid element 2</h3>
  </div>
  <div class="grid-cell">
    <h3>Grid element 3</h3>
  </div>
</div>

My CMS wraps each child in a div, which causes the grid layout to render incorrectly. This can be seen here, demonstrated by the div with class 'not-working': https://jsfiddle.net/e6b2yf37/2/.

<div class="grid">
  <div class="not-working">
    <div class="grid-cell">
      <h3>Grid element 1</h3>
    </div>
  </div>
  <div class="not-working">
    <div class="grid-cell">
      <h3>Grid element 1</h3>
    </div>
  </div>
  <div class="not-working">
    <div class="grid-cell">
      <h3>Grid element 1</h3>
    </div>
  </div>
</div>

Depending on the editor's setup, the number of columns can span from 1 to 4 elements per row. As such, it is not possible to simply solve this, by giving the div, 'not-working', grid-column-end: 4.

It is not possible to remove the divs wrapping each child in the CMS.

Is there a pure CSS-solution, which simply ignores the div 'not-working' regardless of the number of columns the children span?

Upvotes: 6

Views: 5010

Answers (4)

AtomicUs5000
AtomicUs5000

Reputation: 368

You could switch to a flex layout, but then you would lose the look of elements aligned in a grid when there is wrapping.

You can use auto-fit and simply forget about the possibility of 12 columns. It will show 12 columns if there is room and wrap if necessary while maintaining the grid look.

.grid {
    display: grid;
    grid-gap: 24px;
    grid-gap: var(--mdc-layout-grid-gutter-desktop, 24px);
    margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    flex-flow: row wrap;
}
<div class="grid">
  <div class="not-working">
    <div class="grid-cell">
      <h3>Grid element 1</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
    </div>
  </div>
    <div class="not-working">
    <div class="grid-cell">
      <h3>Grid element 2</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
    </div>
  </div>
  <div class="not-working">
    <div class="grid-cell">
      <h3>Grid element 3</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
    </div>
  </div>
  <div class="not-working">
    <div class="grid-cell">
      <h3>Grid element 4</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
    </div>
  </div>
  <div class="not-working">
    <div class="grid-cell">
      <h3>Grid element 5</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
    </div>
  </div>
  <div class="not-working">
    <div class="grid-cell">
      <h3>Grid element 6</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
    </div>
  </div>
</div>

Upvotes: 0

Nux
Nux

Reputation: 10012

Well actually... All you needed was display: contents.

You only need to add this in your CSS:

.not-working {
  display: contents;
}

See also: updated fiddle.

Note that it only works well in Firefox, so you might want to test it in various browsers before you use this. There might be some accessibility issues with your content. See also: Can I Use notes.

Upvotes: 11

Carele
Carele

Reputation: 774

.grid {display: flex;}
.not-working {flex-grow: 1; width: 10%;}

Your divs should now fill the grid equally.

Upvotes: 0

omukiguy
omukiguy

Reputation: 1437

How about just changing the styline to .not-working i.e.

.not-working {
    width: auto;
    grid-column-end: span 4;
}

Upvotes: -1

Related Questions