简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >传说中的布局神器grid

传说中的布局神器grid

培(信仰)
培(信仰)原创
2020年12月29日 23:59:24573浏览

grid 布局

通过设置CSS属性 display: grid; 可以定义一个 CSS 网格。接着可以使用 grid-template-rows 和 grid-template-columns 属性定义网格的列属性(columns)和行属性(rows)。

使用这些属性定义的网格被称为 显式网格 (explicit grid)

一些直白的概念

  1. 网格容器：由若干个矩形网格单元构成
  2. 网格项目：网格容器的子元素，必须放在网格单元中
  3. 网格单元：有“单元格”和“网格区域”两种表现形式；由一个或多个单元格组成
  4. 网格轨道：由多个网格单元组成，根据排列方向有“行轨”和“列轨”
  5. 轨道间距：容器中轨道之间的间距，有“行轨间距”和“列轨间距”

简而言之使用grid容器的三大步
第一：申明容器
第二：设置行轨和列轨
第三：设置轨道间距

  1. <body>
  2.     <div class="container">
  3.         <span class="item">item1</span>
  4.         <span class="item">item2</span>
  5.         <span class="item">item3</span>
  6.         <span class="item">item4</span>
  7.         <span class="item">item5</span>
  8.         <span class="item">item6</span>
  9.     </div>
  10. </body>
  1.     <style>
  2.         .container {
  3.             border: 1px solid #000;
  4.             padding:0.5em;
  5.             /* flex中子元素默认为inline元素，grid中子元素默认block */
  6.             display: grid;
  7.             /* 1. 设置轨道的列宽 */
  8.             /* 设置一个3列2行的布局空间 */
  9.             grid-template-columns:10em 10em 10em;
  11.             /* 设置的轨道行高 */
  12.             grid-template-rows: 5em 5em;
  14.             /* 设置轨道的间距 */
  15.             /* gap:水平方向  垂直方向 */
  16.             gap:0.5em 1em;
  17.             /* 如果两个值一样，可以简写，只写一个 */
  18.             gap:0.5em;
  19.         }
  20.         /* 网格项目：网格容器中的“子元素”，与flex 一样 */
  21.         .container > .item {
  22.             /* 默认项目生成一列n行的容器（n就是项目的数量） */
  23.             background-color: skyblue;
  24.             border: 1px solid #000;
  25.             padding: 0.5em;
  26.         }
  27.     </style>

两个重要的函数 repeat() minmax()

repeat() 指重复：第一个参数，重复的次数，第二个参数重复的内容可以是多个值

  1.     <style>
  2.         .container {
  3.             border: 1px solid #000;
  4.             padding:0.5em;
  5.             display: grid;
  6.             /* grid-template-columns: repeat(3,10em);  */
  7.             grid-template-columns: repeat(3,10em 2em); 
  8.             grid-template-rows: 5em 5em;
  9.             gap: 0.5em;
  11.         }
  13.         .container>.item {
  14.             background-color: skyblue;
  15.             border: 1px solid #000;
  16.         }      
  17.     </style>

mimmax() 设置最小最大值

  1.     <style>
  2.         .container {
  3.             border: 1px solid #000;
  4.             padding:0.5em;
  5.             display: grid;
  6.             /* 中间列最小宽度20em，最大是左右的2倍 */
  7.             grid-template-columns: 1fr minmax(20em,2fr) 1fr; 
  8.             grid-template-rows: 5em 5em;
  9.             gap: 0.5em;
  11.         }
  13.         .container>.item {
  14.             background-color: skyblue;
  15.             border: 1px solid #000;
  16.         }      
  17.     </style>

网格单元的排列方式

行优先

列优先

总结：3个属性的应用

  1. 排列方式：grid-auto-flow
  2. 隐式轨道的行高：grid-auto-rows
  3. 隐式轨道的列宽：grid-auto-columns
  1.     <div class="container">
  2.         <span class="item">item1</span>
  3.         <span class="item">item2</span>
  4.         <span class="item">item3</span>
  5.         <span class="item">item4</span>
  6.         <span class="item">item5</span>
  7.         <span class="item">item6</span>
  8.         <span class="item">item7</span>
  9.         <span class="item">item8</span>
  10.         <span class="item">item9</span>
  11.     </div>
  1.         .container {
  2.             border: 1px solid #000;
  3.             padding: 1em;
  4.             display: grid;
  5.             grid-template-columns: repeat(3,1fr);
  6.             grid-template-rows: 5em 5em;
  7.             /* 此时声明的网格单元数量已经不够存入所有的网格项目了 */
  8.             /* 多出的三个项目会自动放入自动生成的网格空间中了 */
  9.             /* 这时，原来声明的网格单元叫：显示轨道 */
  10.             /* 新项目显示的轨道称为：隐式轨道 */
  11.             /* 自动生成的隐式轨道的高度时自动的  */
  12.             /* 默认项目在容器中按 先行后列的顺序排列 也叫“行优先” */
  13.             /* grid-auto-flow: row; */
  14.             /* 可以通过 grid-auto-rows:属性设置 */
  15.             /* 行优先时要设置行高 */
  16.             grid-auto-rows: 5em;
  18.             /* 列优先 */
  19.             /* grid-auto-flow: column; */
  20.             /* 列优先时要设置隐式轨道的列宽 */
  21.             /* grid-auto-columns: 1fr; */
  22.             /* 实际的应用中通常多用行优先 */
  23.             gap: 0.5em;
  25.         }
  27.         .container>.item {
  28.             background-color: skyblue;
  29.             border: 1px solid #000;
  30.         }

自定义项目在容器的显示位置

项目默认按照源码的书写顺序显示
编号从左上角开始（行号，列号）并递增（方向）。
每条线叫基线或者网格线
反方向标注也可以。依次递减

grid-area:设置任何一个项目所在的网格单元的区域
grid-area: 行起始编号 / 列起始编号 / 行结束编号 / 列结束编号

  1.         /* 以第五个项目举例 */
  3.         .container > .item:nth-of-type(5){
  4.             background-color: wheat;
  5.             /* grid-area:1 / 1 / 2 / 2; */
  6.             /* 默认项目是跨越一行一列 */
  7.             /* 可简写 */
  8.             /* grid-area:1 / 1； */
  9.             /* 但是，如果要跨越1行以上或者1列以上就不能省 */
  10.             /* 跨多个单元格  */
  11.             /* grid-area:1 / 1 / 3 / 4; */
  13.             /* 通常只关心跨几行或者几列，并不关心结束的编号 */
  14.             grid-area:1 / 1 / span 2 /span 3;
  17.         }
  19.         /* 简化语法 */
  21.         .container > .item:first-of-type{
  22.             background-color: red;
  23.             /* grid-area:3 / 1 / span 1 / span 3; */
  24.             /* 因为3 / 1 是当前位置，所以可以省略 */
  25.             grid-area:span 1 / span 3;
  26.             /* 默认跨一行一列 可是使用auto站位（感觉效果不是我想要的）*/
  27.             /* grid-area: auto / shanp 3; */
  29.             /* grid-area:2 / 2 / 4; */
  30.         }

总结
grid-area: 参数数量不同，意义不同

  1. 值中只有span
    1.1 单值：跨的行数
    1.2 双值：跨的行与列数，如果只想设置列数，就必须设置行数
  2. 值中有span和编号
    2.1 双值：没有span，默认跨1行1列，grid-area:2 / 3;
    2.2 三值：省略了列结束编号或者跨的数量，此时前面的值可使用auto
    2.3 四值：完美语法。
上一条：js常量|js常量声明与赋值|js变量|js变量声明与赋值|js常用数据类型下一条：CSS的引入方式和选择器使用方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多