CSS grid layout is on parent div, I want to use it on a child div as well

Admin 1
Viewed 4401

In this project I'm combining fullPage with CSS Grid Layout.

I currently have a grid defined on the first div called "section", but also want the contents of the "slide" div to conform to this same grid.

Below is the hierarchy.

<div class="section">
    <div class="fp slides">
        <div class="slides container">
            <div class="slide>

For clarification I also made a pen where the problem is isolated.

Currently the CSS grid auto placement just puts "fp slides" in the first table cell (row 1, column 1) along with all the content it's children has (an h1, h2, p and h3). It should use all available rows/columns.

I've tried setting the grid-area of "fp slides" to all 6 cells but that doesn't preserve the rows and columns and just puts all content in "slide" underneath each other.

Is there a CSS Grid Layout option to make this work?

fullpage.js css-grid css html
1 Answers

You could mark the children that shouldn't be included in the grid as display: contents. This more or less takes them out of the DOM, so that their children are seen as grid-items. But beware that this removes other styling, like background, as well. You may only style the grid-items.

Unfortunately this is not yet supported in Edge. But you can vote for the feature here.

I've updated the pen with:

.fp-slides, .fp-slidesContainer, .slide {
  display: contents;
}
user_26957990
Related