是否可以在CSS網格列中獲取固定物件？

我想通過使用 CSS 網格為列的全寬設定一個固定元素。此固定元素的寬度應始終根據周圍的框進行調整。

怎么可能做到這一點：

這是我的嘗試，不幸的是，它突出了，因為它占據了整個螢屏寬度：

* {
  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>

非常感謝您的幫助<3

uj5u.com熱心網友回復：

制作#shape一個網格項（在主元素下），將其放在與#two然后考慮相同的網格軌道上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>

標籤：css

上一篇：CSS：根據標題類將類應用于tbody單元格（在同一列中）

下一篇：媒體查詢CSS覆寫CSS而不滿足寬度條件