【CSS】使用grid layout布局的疑问?

Z时代
2024-01-10
分类：技术分享

图片描述

学习grid布局，对于图片上的布局，我自己的实现如下：

//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...

但是，现在又遇到一个问题，我苦思冥想了好几天，不得其解：

对于左边的item1,其实是一个固定屏幕的fixed效果，高度和浏览器高度一致，但是我如果使用grid做布局，左边没有办法实现fixed的固定效果，怎么解决呢？（因为要实现响应式布局，所以屏幕小于一定大小后，item1会被隐藏，点击menu按钮才会展现出来）。

回答：

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