Exempt a child element from auto layout in CSS grid without using position: fixed?-CodePudding

Is there a way to "exempt" a child element of a grid container from participating in the grid layout other than using position:fixed or display:contents; on the child?

For instance, given something simple like:

body {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
}

<div>Element One</div>
<div>Element Two</div>
<div>Element Three</div>
<div>Element Four</div>
<custom-web-component id="exemptedElement">Exempted Element</custom-web-component>

Is it possible to somehow via CSS or otherwise tell that last element not to participate in the grid layout?

I know that I could set position: fixed; on that element, and it would do so, but that has downstream implications within that component (e.g. a descendant with position: absolute; would be locked to the viewport, rather than the document as intended).

I know that I could also set display: contents on that element, and it would not participate, deferring the layout to its children... but that again has downstream implications meaning the children of this main component all need to be careful about the above fixed/absolute positioning issue.

Note: I do not have control over the fact that the custom-web-component is sometimes being added to a grid container. So I'm trying to find some way to "Break out" of it when that does happen.

CodePudding user response：

If you cannot use absolute/fixed or display: contents then you can approximate the behavior by making the element height: 0, spanning all the columns and have a big order to be paced at the end.

I insist on the fact that it's an approximation as I don't think it's possible with all your constraints.

body {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
}

custom-web-component {
  grid-column: 1/-1; /* span all the possible columns */
  height: 0;
  order: 99;
  
  /* to illustre */
  outline: 1px solid red;
}

body {
  outline: 1px solid blue;
}

<div>Element One</div>
<div>Element Two</div>
<custom-web-component id="exemptedElement">Exempted Element</custom-web-component>
<div>Element Three</div>
<div>Element Four</div>
<div>Element five</div>

CodePudding user response：

can you afford to break out your exempted component from the css grid and then wrap the grid and the exempted component together via relative and absolute positions?

.grid-ele-wrapper {
   position: relative;

   border: red 1px solid;
}

.grid-ele {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
}

#exemptedElement {
  position: absolute;
}

  <div >
  <div >
    <div>Element One</div>
    <div>Element Two</div>
    <div>Element Three</div>
    <div>Element Four</div>
  </div>
  <custom-web-component id="exemptedElement">Exempted Element</custom-web-component>
</div>

*red box is a visual aid to show the exempted element is outside the wrapper

CodePudding user response：

Just wrap the grid elements in a container and use that.

I added some borders just to show where the actual children lie

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  border: 1px solid #4444ff;
}

.grid-container>* {
  margin: 0.5rem;
  border: solid 1px #44ff44;
}

<div >
  <div>Element One</div>
  <div>Element Two</div>
  <div>Element Three</div>
  <div>Element Four</div>
</div>
<custom-web-component id="exemptedElement">Exempted Element</custom-web-component>