Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid的基础知识
Blogger Information
Blog 45
fans 0
comment 0
visits 34518
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
grid的基础知识
咸鱼老爷
Original
926 people have browsed it

什么是Grid

基于行与列的二维空间布局

网格容器

由若干个矩形网格单元构成；
使用了属性display: grid就是网格容器；
默认是块元素；

网格单元

单元格|网格区域

网格项目

网格容器中的子元素就是网格项目；
默认生成1行N列的容器（N就是项目的数量）

网格轨道

由多个网格单元组成
轨道就是行和列
设置列 grid-template-columns :
设置轨道的行高 grid-template-rows :

轨道间距

容器中轨道之间的间距；
轨道间距 gap ： 水平 垂直；

实现一个简单俩列三行

  1.     <style>
  2.         .container {
  3.             display: grid;
  4.             border: 1px solid #ccc;
  5.             grid-template-columns: 10em 10em;
  6.             grid-template-rows: 2em 2em 2em;
  7.         }
  8.         .item {
  9.             background-color: aquamarine;
  10.             border: 1px solid #ccc;
  11.         }
  12.     </style>
  13. <body>
  14.     <div class="container">
  15.         <span class="item">1</span>
  16.         <span class="item">2</span>
  17.         <span class="item">3</span>
  18.         <span class="item">4</span>
  19.         <span class="item">5</span>
  20.     </div>
  21. </body>

效果图

网格单元尺寸单位：fr

设置轨道列宽的可以使用fr 响应式

fr与auto的区别

auto默认是适应，fr可以实现对应的倍数等
比如3行2列时 中间一列是左右俩列的2倍宽，auto就无法实现，fr可以实现：grid-template-columns: 1fr 2fr 1fr;

fr和%的区别

%无法计算列边距，会出现内容超出，如果使用%,则需要关闭gap间距；
%可以与fr共存，计算方式：总宽度-%的宽度，将剩下的分配给fr

总结：auto 、fr 、%都是相对单位，都可以触发自动计算，尽量不要同时出现。

fr与其他单位混合：em、px等

px、em是固定值，计算时要减去固定值，将剩下的空间在fr之间分配；
grid-template-columns: 1em 2fr 3fr;

设置网格单元尺寸的常用函数

repeat()
重复：grid-template-columns: 1em 1em 1em;可以写成grid-template-columns: repeat(3,1em);
混合使用grid-template-columns: repeat(3,1fr) 2fr; 1fr 1fr 1fr 2fr;
minmax()最大最小值，grid-template-columns: 1fr minmax(5em,10fr) 1fr;
适用于局部响应式；

隐式轨道

声明的网格单元数量与网格项目不匹配时，多余的网格单元称为隐式轨道
隐式轨道也是可以控制的；
控制排列方式：grid-auto-flow: row|columns;
行优先时使用grid-auto-rows设置行高
列优先时使用grid-auto-columns设置列宽

网格项目的显示顺序

默认是按照书写顺序排列，可以自定义排序；
行号，列号：从左上角开始(1,1)递增；
属性grid-area: 行起始编号 / 列起始编号 /行结束编号 /列结束编号；
grid-area 参数不同意义不同
1、值中有span
单值：跨越的行数
双值：跨的行与列数，如果只想设置列数，就必须设置行数（auto）；
2、值中有span和编号
双值：没有span 默认跨一行一列，
三值：省略了列结束编号或跨的数量，此时前面的值可以使用auto

  1.  <style>
  2.         .container {
  3.             display: grid;
  4.             border: 1px solid #ccc;
  5.             /* 轨道列宽 */
  6.             grid-template-columns: repeat(3, 1fr);
  7.             /* 行高 */
  8.             grid-template-rows: 2em 2em;
  9.             /* 间距 */
  10.             gap: .2em;
  11.         }
  12.         .item {
  13.             background-color: aquamarine;
  14.             border: 1px solid #ccc;
  15.         }
  16.         .item:nth-of-type(5) {
  17.             background-color: bisque;
  18.             grid-area: 1 / 1 / 2 / 2;
  19.             /* 跨一行时可以简写 */
  20.             grid-area: 1 / 1;
  21.         }
  23.         .item:first-of-type {
  24.             background-color: brown;
  25.             grid-area: span 1 /span 3;
  26.         }
  27.     </style>
  29. <body>
  30.     <div class="container">
  31.         <span class="item">1</span>
  32.         <span class="item">2</span>
  33.         <span class="item">3</span>
  34.         <span class="item">4</span>
  35.         <span class="item">5</span>
  36.         <span class="item">6</span>
  37.     </div>
  38. </body>

效果图

grid快速实现圣杯布局

  1. <!-- 优先主体内容 -->
  2.     <style>
  3.         body {
  4.             display: grid;
  5.             grid-template-columns: 15em minmax(50vh, auto) 15em;
  6.             grid-template-rows: 3em minmax(80vh, auto) 3em;
  7.             gap: .5em;
  8.         }
  9.         body * {
  10.             border: 1px solid #ccc;
  11.         }
  12.         footer,
  13.         header {
  14.             grid-area: span 1 /span 3;
  15.         }
  16.         main {
  17.             grid-area: 2 / 2;
  18.         }
  19.     </style>
  21. <body>
  22.     <header>header</header>
  23.     <main>main</main>
  24.     <aside class="left">left</aside>
  25.     <aside class="right">right</aside>
  26.     <footer>footer</footer>
  27. </body>

效果图

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post