简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > gird 属性与属性值应用
Blogger Information
Blog 19
fans 0
comment 1
visits 13859
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
gird 属性与属性值应用
心
Original
854 people have browsed it

grid 网格容器/网格项目/网格轨道/网格间距

  • 网格容器 :

    • 由若干个矩形网格单元组成
      • flex 中子元素默认为inline元素，grid中子元素默认为bliock元素
      • display:grid;

  • 网格项目：

    • 网格容器的子元素，必须放在网格单元中
    • 网格容器中的“子元素”，与flex是一样的. 默认生成一列N行的容器（N就是项目的数量)

  • 网格单元：

    • 有“单元格”和“网格区域” 两种表现形式

  • 网格轨道

    • 由多个网格单元组成吗，根据排列方向有“行轨”和“列轨”之分

    • grid-template-rows 设置轨道的行高

    • grid-template-columns 设置轨道的列宽、

  • 网格间距

    • 容器中轨道之间的间距，有“行轨间距”和“列轨间距”组成
    • gap 设置轨道间距 第一个参数是行高 第二个参数是列宽
    • gap 参数一样可以只写一个值

轨道间距

  • 隐式轨道:
    • 排列方式 grid-auto-flow
    • 自动生成的隐式轨道的高度时自动的,默认项目中在容器中按：先行后列 “行优先”，行优先时要设置行高
      • grid-auto-rows
    • 列优先
      • grid-auto-cloumns
序号 属性 描述
1 grid-template-columns 设置列的宽 可直接写N个值 可使用repeat()
2 grid-template-rows 设置行高 可直接写N个值 可使用repeat()
3 grid-template-columns:minmax(最小宽度, 最大宽度) minmax 可以设置最小值和最大值
grid-template-rows:minmax(最小宽度, 最大宽度) minmax 可以设置最小值和最大值
5 gap 设置轨道的间距，两个参数 第一个是水平方向的行高 第二高列方向的列宽
  • grid-template-columns:repeat(N列，列宽);

  • grid-template-rows：repeat(N行，行高)；

  • grid-template-columns:repeat(N列，列宽) 最后一列的宽度；

    • 最后一列是后加的一列
  • grid-template-rows：repeat(N行，行高） 最后一行的行高；
    • 最后一行是后加的一行

示列 minmax()

  1. /*最小宽和最大宽度*/
  2. grid-template-colums:1fr minmax(20em,2fr) 1fr;

示列 repeat()

  1. /*设置三列两行*/
  2. grid-template-columns:repeat（2，10em）5em;
  3. grid-template-rows：repeat(1,5em) 4em;

两行三列

示列

  1. /*轨道间距 行间距0.5em,列间距1em*/
  2. gap:0.5em 1em;

轨道间距

  • 设置轨道宽度时可以使用一个新的单位：fr(fraction),类似flex的伸缩因子
    • % 与 fr 共存，计算方式是：总宽度减去百分比的宽度，将剩下的全部分配给fr
    • auto,fr,% 都是相对单位，都可以触发自动计算机制，尽可能不同时使用
    • fr 与其他单位单位混合，如rm,px
      • px 和rm 是固定值，计算时要总宽度减去固定值吗，剩下分配给fr
    • grid-template-columns:1fr 2fr 1fr;

示列

  1. /*使用fr 中间的始终是两边的两倍*/
  2.  grid-template-columns:1fr 2fr 1fr;

fr

  • grid-area : 设置任何一个项目所在的网格单元的区域
    • grid-area:行起始编号 / 列起始编号 / 行结束编号 / 列结束编号
    • 通常值关心跨几行或几列吗，并不关心结束的编号
      • grid-area: span 2 / span 3;
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>grid</title>
  8.     <style>
  9.         .container {
  10.             padding: 1em;
  11.             margin: 1em;
  12.             border: 1px solid #000;
  13.             display: grid;
  14.             /*设置一个两行三列*/
  15.             grid-template-columns:10em 10em 10em;
  16.             grid-template-rows:5em 5em;
  18.             /*两行三列 可简写为*/
  19.             grid-template-colums:repeat(3,10em);
  20.             grid-tempate-rows:repeat(2,5em);
  21.             /*设置最小宽和最大宽*/
  22.             grid-template-colums:1fr minmax(20em,2fr) 1fr;
  23.             /*轨道间距*/
  24.             gap:0.5em;
  25.         }
  27.         .container>.items {
  28.             border: 1px solid #000;
  29.             background-color: aqua;
  30.             padding: 0.5em;
  31.         }
  32.     </style>
  33. </head>
  35. <body>
  36.     <div class="container">
  37.         <div class="items">1</div>
  38.         <div class="items">2</div>
  39.         <div class="items">3</div>
  40.         <div class="items">4</div>
  41.         <div class="items">5</div>
  42.         <div class="items">6</div>
  43.     </div>
  44. </body>
  46. </html>
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！