學(xué)習(xí)grid布局，對(duì)于圖片上的布局，我自己的實(shí)現(xiàn)如下：

//html
<header class="header">this is header</header>
<div class="container">
  <div class="item-1">clo 1</div>
  <div class="item-2">col 2</div>
  <div class="item-3">col 3</div>
  <div class="item-4">col 4</div>
  <div class="item-5">
      <h2>this is 44</h2>
  </div>
  <div class="item-6">
      <h1>123123</h1>
      <h1>123123</h1>
      <h1>123123</h1>
      <h1>123123</h1>
      <h1>123123</h1>
      <h1>123123</h1>
      <h1>123123</h1>
      <h1>123123</h1>
      <h1>123123</h1>
      <h1>123123</h1>
      <h1>123123</h1>
      <h1>123123</h1>
  </div>
</div>
<footer>this is footer</footer>

body, html {
    margin: 0px;
    padding: 0px;

    height: 100%;
}
header, footer {
    background-color: #999;
    text-align: center;
    padding: 10px;
    color: #fff;
}
header {
    grid-column: 1 / 5;
}
footer {
    position: fixed;
    bottom: 0;

    width: 100%;
    height: 30px;
}
.container {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;

    display: grid;
    /*   display: inline-grid; */

    grid-template-rows: 1fr;
    grid-template-columns: repeat(4, 1fr);

    grid-gap: 15px 20px;

    grid-template-areas:
            "m b i t"
            "m s s s"
            "m c c c";
}
.item-1 {
    background-color: aquamarine;
    height: 100vh;
    left: 0px;
    grid-area: m;
}
.item-2 {
    background-color: coral;

    grid-area: b;

    height: 120px;
    margin-top: 10px;
}
.item-3 {
    background-color: beige;

    grid-area: i;

    height: 120px;
    margin-top: 10px;
}
.item-4 {
    background-color: darkturquoise;

    grid-area: t;
    margin-top: 10px;
}
.item-5 {
    background-color: darkgray;

    grid-area: s;
}
.item-6 {
    background-color: darkcyan;
    grid-area: c;
    padding-bottom: 50px;
}

演示地址如下：

https://codepen.io/LeoJingHui...

但是，現(xiàn)在又遇到一個(gè)問(wèn)題，我苦思冥想了好幾天，不得其解：

對(duì)于左邊的item1,其實(shí)是一個(gè)固定屏幕的fixed效果，高度和瀏覽器高度一致，但是我如果使用grid做布局，左邊沒(méi)有辦法實(shí)現(xiàn)fixed的固定效果，怎么解決呢？（因?yàn)橐獙?shí)現(xiàn)響應(yīng)式布局，所以屏幕小于一定大小后，item1會(huì)被隱藏，點(diǎn)擊menu按鈕才會(huì)展現(xiàn)出來(lái)）。