无论网格如何，如何使网格子项具有全屏宽度？答案

【问题标题】：How do I make a grid child to be of full screen width irrespective of grid?无论网格如何，如何使网格子项具有全屏宽度？
【发布时间】：2020-03-01 10:45:00
【问题描述】：

我需要以下帮助：

我在“小容器”div 中使用网格，当屏幕尺寸低于 768 像素时，我希望它的一个子项（“vod-player”）采用全屏宽度，而不是 8 列网格的宽度，而其他子项将跨越 8 列。

index.html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Wireframe</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
    <div class="big-container">
        <div class="header">Header</div>


        <div class="small-container"> 

            <div class=vod-player>Vod Player 16x9 8cols</div>

            <div class=highlights>Highlights 4cols, height=vodplayer height</div>
            <div class=video-information>
                <div class="video-name">Video Name</div>
                <div class="details-section">Details Section</div>
            </div>
            <div class=feedback>Feedback</div>
            <vr class=rule>
        </div>


        <div class="footer">2019</div> 

    </div>
</body>
</html>

style.css：

/* html {
  margin: 0;
  border: 2px solid black;
  height: 100%;
}
body {
  margin: 0;
  border: 2px solid yellow;
  height: 100%;
} */
.big-container {
  max-width: 1920px;
  border: 2px solid red;
  width: 100%;
  margin: 0 auto;
}
.header {
  width: 100%;
  max-width: 1920px;
  height: 54px;
  border: 2px solid red;
  margin: 0;
  margin-bottom: 24px;
  background-color: #263238;
}
.small-container {
  display: grid;
  /* max-width:1800px; */
  max-width:95%; 
  margin: auto;  

  grid-column-gap: 30px;
  grid-row-gap: 24px;
  margin-right: 60px;
  margin-left: 60px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto auto;
  border: 2px solid red;
  /* grid-auto-rows: 766px; */
}
.vod-player {
  grid-area: vodplayer;
  max-height: 715px;
  border: 2px solid red;
  grid-column-start: 1;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 2;
  padding-top: 56.25%;
  background-color: #f4511e;
}
.highlights {
  grid-area: highlights;
  max-height: 715px;
  border: 2px solid purple;
  grid-column-start: 9;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: #546e7a;
}
.video-information {
  grid-area: info;
  max-height: 333px;
  border: 2px solid green;
  grid-column-start: 1;
  grid-column-end: 9;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: #4caf50;

  display: grid;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  margin-right: 0px;
  margin-left: 0px;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: auto auto;
  border: 2px solid red;

  /* margin-bottom: 80px; */
}
.video-name {
  grid-column-start: 1;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 2;
  height: 66px;
  border: 1px solid green;
}
.details-section {
  grid-column-start: 1;
  grid-column-end: 9;
  grid-row-start: 2;
  grid-row-end: 3;
  height: 243px;
  border: 1px solid green;
}
.feedback {
  height: 214px;
  grid-area: feedback;
  /* max-width: 580; */
  max-height: 214;
  grid-column-start: 9;
  grid-column-end: 13;
  border: 2px solid pink;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: #00bcd4;
}
.footer {
  height: 17px;
  width: 285px;
  color: #1c1c1d;
  font-family: "Proxima Nova";
  font-size: 14px;
  font-weight: 300;
  line-height: 17px;
  margin: auto;
  text-align: center;
  border: 2px solid red;
}
vr {
  grid-area: rule;
  grid-column-start: 1;
  grid-column-end: 9;
  grid-row-start: 3;
  grid-row-end: 4;
  margin-top: 16px;
  margin-bottom: 40px;
  box-sizing: border-box;
  height: 1px;
  width: 100%;
  border: 1px solid #cbd2da;
}

@media (max-width: 1440px) {
  .small-container {
    grid-column-gap: 30px;
    margin-right: 60px;
    margin-left: 60px;
  }
}
@media (max-width: 1280px) {
  .small-container {
    grid-column-gap: 30px;
    margin-right: 30px;
    margin-left: 30px;
  }
}
@media (max-width: 1024px) {
  .small-container {
    grid-column-gap: 30px;
    margin-right: 30px;
    margin-left: 30px;
  }
}
@media (max-width: 960px) {
  .small-container {
    grid-column-gap: 30px;
    margin-right: 30px;
    margin-left: 30px;
  }
}
@media (max-width: 768px) {
  .header {
    display: none;
  }
  .small-container {
    grid-column-gap: 30px;
    grid-row-gap: 0px;
    margin-right: 30px;
    margin-left: 30px;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto auto auto auto auto;
  }
  .vod-player {
    grid-column-start: 1;
    grid-column-end: 9;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .highlights {
    grid-column-start: 1;
    grid-column-end: 9;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .video-information {
    grid-column-start: 1;
    grid-column-end: 9;
    grid-row-start: 3;
    grid-row-end: 4;
    margin-bottom: 0px;
  }
  .feedback {
    grid-column-start: 1;
    grid-column-end: 9;
    grid-row-start: 4;
    grid-row-end: 5;
  }
  .rule {
    grid-column-start: 1;
    grid-column-end: 9;
    grid-row-start: 5;
    grid-row-end: 6;
  }
  vr {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
@media (max-width: 360px) {
  .header {
    display: none;
  }
  .small-container {
    grid-column-gap: 20px;
    margin-right: 20px;
    margin-left: 20px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto auto auto;
  }
  .vod-player {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .highlights {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .video-information {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 4;
  }
  .feedback {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 4;
    grid-row-end: 5;
  }
}

预期输出：

768px 以上：（蓝色条为“vod-player”，橙色为“highlights”）格：https://ibb.co/dtHdvt2

低于 768 像素：格：https://ibb.co/DfN83mC

【问题讨论】：

标签： html css grid

【解决方案1】：

尝试使用此代码，希望它会有所帮助。

CSS 文件：

html {
  margin: 0;
  border: 2px solid black;
}
body {
  margin: 0;
  border: 2px solid black;
}
.big-container {
  max-width: 1920px;
  border: 2px solid red;
  width: 100%;
}
.header {
  width: 100%;
  max-width: 1920px;
  height: 54px;

  border: 2px solid red;
  margin: 0;
  margin-bottom: 24px;
}
.small-container {
  display: grid;
   max-width:95%;         // Newly added
  grid-column-gap: 30px;
  grid-row-gap: 24px;
  margin: auto;           // Newly added
  grid-template-columns: repeat(12, 1fr);
  border: 2px solid red;
  grid-auto-rows: 766px;
}
.vod-player {
  grid-area: vodplayer;
  max-height: 715px;
  border: 2px solid red;
  grid-column-start: 1;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 2;
}
.highlights {
  grid-area: highlights;
  /* max-width: 580px; */
  max-height: 715px;

  border: 2px solid red;
  grid-column-start: 9;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 2;
}
.video-information {
  grid-area: info;
  max-height: 333px;
  border: 2px solid red;
  grid-column-start: 1;
  grid-column-end: 9;
  grid-row-start: 2;
  grid-row-end: 3;
}
.feedback {
  grid-area: feedback;
  max-height: 214;
  grid-column-start: 9;
  grid-column-end: 13;
  border: 2px solid red;
  grid-row-start: 2;
  grid-row-end: 3;
}
.footer {
  height: 17px;
  width: 285px;
  color: #1c1c1d;
  font-family: "Proxima Nova";
  font-size: 14px;
  font-weight: 300;
  line-height: 17px;
  margin: auto;
  text-align: center;
  border: 2px solid red;
}

@media (max-width: 768px) {
  .small-container {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    grid-row-gap: 0px;
    grid-template-areas:
      "vodplayer"
      "highlights"
      "info"
      "feedback";
  }
  .vod-player {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-bottom: 0;
  }
  .highlights {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    margin-bottom: 0;
  }
  .video-information {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
    margin-bottom: 0;
  }
  .feedback {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;
    margin: 0;
  }
}
@media (max-width: 360px) {
  .small-container {
    grid-template-columns: repeat(4, 1fr);
  }
  .vod-player {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-bottom: 0;
  }
  .highlights {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
    margin-bottom: 0;
  }
}

HTML 文件：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Wireframe</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
    <div class="big-container">
        <div class="header"></div>
        <div class="small-container"> 
            <div class=vod-player></div>
            <div class=highlights></div>
            <div class=video-information></div>
            <div class=feedback></div>
        </div>
        <div class="footer">2019</div> 
    </div>
</body>
</html>

【讨论】：

它没有达到我想要的效果。我希望 vod-player div 采用完整的根宽度，即使它在网格内。

【解决方案2】：

试试这样的：

.vod-player {
    width: 100vw;
    z-index: 2;
    margin-left: -30px;
}

【讨论】：

嘿，非常感谢，它成功了。 :) 仍然为什么是 Z 索引？
在您的示例中，此元素的右侧有一个元素。如果不添加 Z-index，此元素将低于该元素。