使用 grid 定义双飞翼布局

겐호 3

已于 2022-05-20 11:49:20 修改

阅读量197

点赞数

分类专栏：前端 css 文章标签： css css3 html

于 2022-05-20 11:33:36 首次发布

本文链接：https://blog.csdn.net/long321041080/article/details/124880302

版权

前端同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!-- html -->
<div class="grid-box">
  <div class="grid-item header">
    <div>header</div>
  </div>
  <div class="grid-item left">
    <div>left</div>
  </div>
  <div class="grid-item content">
    <div>content</div>
  </div>
  <div class="grid-item right">
    <div>right</div>
  </div>
  <div class="grid-item footer">
    <div>footer</div>
  </div>
</div>

<!-- css -->
// 第一种 使用grid-template-areas定义
<style>
  .grid-box {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-auto-rows: 80px 1fr 100px;
    height: 480px;
    border: 1px solid;
    // width: 240px;
    /* 自定义布局格式 */
    grid-template-areas:
      'header header header'
      'left content right'
      'footer footer footer';
  }
  .grid-item {
    border: 1px solid;
    background-color: goldenrod;
  }
  .header {
    /* 使用grid最外层定义的名称 */
    grid-area: header;
    background-color: skyblue;
  }
  .footer {
    background-color: aqua;
    grid-area: footer;
  }
</style>


// 第二种 直接使用数字进行划分
<style>
.grid-box {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-auto-rows: 80px 1fr 100px;
  height: 480px;
  border: 1px solid;

  .grid-item {
    border: 1px solid;
    background-color: goldenrod;
  }
  .header {
    /* 使用 数字+/ 划分区域 */
    grid-area: 1/1/1/4;
    background-color: skyblue;
  }
  .footer {
    background-color: aqua;
    grid-area: 3/1/3/4;
  }
}
</style>