Is it possible to get a fixed object inside a CSS grid column?-CodePudding

I would like to have a fixed element for the full width of a column, by using a CSS grid. The width of this fixed element should always adjust to the box around.

How is it possible to do that:

This is my try, unfortunately, it it protrudes beyond, because it takes the full screen width:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

main {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

section {
  height: 100px;
  width: 100%;
}

#one {
  grid-column-start: 1;
  grid-column-end: 2;
}

#two {
  grid-column-start: 2;
  grid-column-end: 6;
}

#three {
  grid-column-start: 6;
  grid-column-end: 7;
}

#shape {
  top: 0;
  position: fixed;
  background-color: red;
  height: 200px;
  width: 100%;
  opacity: 0.9;
}

<main>
  <section id="one"><b>Left Area</b></section>
  <section id="two"><b>Middle Area</b>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
      kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
      et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
      sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
      sit amet.</p>
    <div id="shape">This Area should be fixed and have always the width of the Middle Area, even if there will be taken other grid column settings.</div>
  </section>
  <section id="three"><b>Right Area</b></section>
</main>

Would be very thankful for help <3

CodePudding user response：

Make #shape a grid item (under the main element), put it at the same grid track as #two then consider position:sticky

body {
  margin:0;
}

main {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

#one {
  grid-column-start: 1;
  grid-column-end: 2;
}

#two,
#shape{
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row:1
}

#three {
  grid-column-start: 6;
  grid-column-end: 7;
}

#shape {
  top: 0;
  position: sticky;
  background-color: red;
  height: 200px;
  opacity: 0.9;
}

<main>
  <section id="one"><b>Left Area</b></section>
  <section id="two"><b>Middle Area</b>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
      kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
      et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
      sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
      sit amet.</p>
  </section>
  <div id="shape">This Area should be fixed and have always the width of the Middle Area, even if there will be taken other grid column settings.</div>
  <section id="three"><b>Right Area</b></section>
</main>