GFC?一篇管饱(display:grid)

最新推荐文章于 2024-05-17 10:13:22 发布

enter键上的妹妹

最新推荐文章于 2024-05-17 10:13:22 发布

阅读量2.9k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_47883103/article/details/107979690

版权

笔记专栏收录该内容

38 篇文章 1 订阅

订阅专栏

GFC

GFC全称是**gridLavoutformatting context.**他就是网格布局格式上下文，是用于布局网格容器的一-块渲染区域。

其实把display设置为grid后，这个盒子就成了grid布局

div{
	display:grid;
}

flex布局好用吧？这个grid布局可是flex Plus ！！！
赶紧来试试

用grid实现9宫格

<html>
<head>
<style>
  .box{
    display:grid;
    grid-template-columns: auto auto auto;
    grid-template-rows:auto auto auto;
    grid-gap:10px;
    height:800px;
    background-color:#00ffff;
  }
  .a{
    background-color:yellow;
  }
</style>
<head>
<body>
  <div class='box'>
    <div class='a'>1</div> /*  来9个 */
  </div>
<body>
</html>

在这里插入图片描述

grid布局常用属性

grid: 1fr 1fr 1fr/1fr 1fr 1fr ; 高度高度高度/(一)列 (二)列 (三) 列

grid: 100px 200px 100px /1fr 1fr 1fr;
// 等同于
grid-template-rows: 100px 200px 100px; 
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: none; 
grid-auto-flow: initial;
grid-auto-rows: initial;
grid-auto-columns: initial;

grid-template-columns: 100px 100px; //有几列，每列有多大

grid-template-rows :100px 100px; //有几行，每行有多大

grid-template: [] '1 1 1' 100px [] /auto 50px auto;
//[名称] '几列' 这行的高度 [名称] /三列对应的三个宽度
//（名称可为空 '1 1 1' 就是均分三列）

grid-gap: 10px 20px ;//上下间隔10px，左右间隔20px

grid-gap: 10px；//上下左右间隔10px

grid-column-gap：10px; // 上下间隔10px

grid-row-gap：10px； // 左右间隔10px

属性： justify-items

justify-items:start; // 将内容对齐到网格区域(grid area)的左侧

justify-items:end; // 将内容对齐到网格区域的右侧

justify-items:center; // 将内容对齐到网格区域的中间（水平居中）

justify-items:stretch; // 填满网格区域宽度（默认值）

属性： align-items：

justify-items:start; // 将内容对齐到网格区域(grid area)的顶部

justify-items:end; // 将内容对齐到网格区域的底部

justify-items:center; // 将内容对齐到网格区域的中间（垂直居中）

justify-items:stretch; // 填满网格区域高度（默认值）

属性：justify-content：

justify-content:start; // 将网格对齐到 网格容器(grid container) 的顶部

justify-content:end; // 将网格对齐到 网格容器 的底部

justify-content:center; // 将网格对齐到 网格容器 的中间（垂直居中）

justify-content:stretch; // 调整 网格项(grid items) 的高度，允许该网格填充满整个 网格容器 的高度

justify-content:space-around; // 在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间

justify-content:space-between; // 在每个网格项之间放置一个均匀的空间，左右两端没有空间

justify-content:space-evenly; // 在每个栅格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间

属性align-content

align-content：start; // 将网格对齐到 网格容器(grid container) 的顶部

align-content:end; // 将网格对齐到 网格容器 的底部

align-content:center; // 将网格对齐到 网格容器 的中间（垂直居中）

align-content:stretch; // 调整 网格项(grid items) 的高度，允许该网格填充满整个 网格容器 的高度

align-content:space-around; // 在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间

align-content:space-between; // 在每个网格项之间放置一个均匀的空间，上下两端没有空间

align-content:space-evenly; // 在每个栅格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间

再来看一下MDN网站的一个案例

<style>
  #page {
    display: grid;
    width: 100%;
    height: 200px;
    grid-template: [header-left] "head head"30px [header-right] [main-left] "nav  main"1fr [main-right] [footer-left] "nav  foot"30px [footer-right] / 120px 1fr;
  }

  header {
    background-color: lime;
    grid-area: head;
  }

  nav {
    background-color: lightblue;
    grid-area: nav;
    
  }

  main {
    background-color: yellow;
    grid-area: main;
  }

  footer {
    background-color: red;
    grid-column: foot;
  }
</style>

<body>
  <section id="page">
    <header>Header</header>
    <nav>Navigation</nav>
    <main>Main area</main>
    <footer>Footer</footer>
  </section>
</body>

在这里插入图片描述

enter键上的妹妹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
GFC?一篇管饱(display:grid)

GFCGFC全称是**gridLavoutformatting context.**他就是网格布局格式上下文，是用于布局网格容器的一-块渲染区域。其实把display设置为grid后，这个盒子就成了grid布局div{ display:grid;}flex布局好用吧？这个grid布局可是flex Plus ！！！赶紧来试试用grid实现9宫格<html><head><style> .box{ display:grid; grid
复制链接

扫一扫