Questions about using grid layout layout?

  css3, question

图片描述

Learning grid layout, for the layout on the picture, my own implementation is as follows:

//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;
 }

The demonstration address is as follows:

https://codepen.io/LeoJingHui …

However, now I have another problem. I have been puzzling over it for several days, but I can’t understand it.

For the one on the leftitem1, in fact, is a fixed screenfixedThe effect, height and browser height are the same, but if I usegridThere is no way to make the layout on the left.fixedHow to solve the fixed effect of? (Since the responsive layout is to be realized, after the screen is smaller than a certain size,item1Will be hidden, clickmenuThe button will show).

html

<div class="container">
 <div class="left">
 </div>
 <div class="right-1">
 </div>
 <div class="right-2">
 </div>
 <div class="right-3">
 </div>
 <div class="right-4">
 </div>
 <div class="right-5">
 </div>
 <div class="right-6">
 </div>
 <div class="right-7">
 </div>
 <div class="right-8">
 </div>
 <div class="right-9">
 </div>
 <div class="right-10">
 </div>
 <div class="right-11">
 </div>
 </div>

css

.container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 grid-gap: 10px;
 grid-auto-rows: 50px;
 }
 
 .container div {
 background-color: #1c78d0;
 }
 
 .left {
 grid-column: 1 / 2;
 grid-row: 1 / 18;
 }
 
 .right-1 {
 grid-column: 2 / 3;
 grid-row: 1 / 3;
 }
 
 .right-2 {
 grid-column: 3 / 4;
 grid-row: 1 / 3;
 }
 
 .right-3 {
 grid-column: 4 / 5;
 grid-row: 1 / 3;
 }
 
 .right-4 {
 grid-column: 2 / 5;
 grid-row: 3 / 4;
 }
 
 .right-5 {
 grid-column: 2 / 5;
 grid-row: 4 / 6;
 }
 
 .right-6 {
 grid-column: 2 / 5;
 grid-row: 6 / 8;
 }
 
 .right-7 {
 grid-column: 2 / 5;
 grid-row: 8 / 10;
 }
 
 .right-8 {
 grid-column: 2 / 5;
 grid-row: 10 / 12;
 }
 
 .right-9 {
 grid-column: 2 / 5;
 grid-row: 12 / 14;
 }
 
 .right-10 {
 grid-column: 2 / 5;
 grid-row: 14 / 16;
 }
 
 .right-11 {
 grid-column: 2 / 5;
 grid-row: 16 / 18;
 }

explain

grid-columnas well asgrid-rowBack2 / 3NoTwo thirdsIt meansStarting in column 2 and ending in column 3. If you understand this meaning, you will know what grid should do.

Effect

https://codepen.io/fengerzh/p …

Reference material