search

博客列表 >CSS3：grid布局基础知识

CSS3：grid布局基础知识

楷
楷原创
2020年04月15日 23:28:12649浏览

Grid 栅格布局基础

1. 基本术语

  • 容器: 使用网格布局的元素
  • 项目: 容器中的子元素
  • 网格线: 将容器划分为行与列的直线
  • 显式网络: 由用户根据项目数量指示容器生成的网格
  • 隐式网格: 由容器根据项目数量自动生成的网格
  • 单元格: 项目放置的具体空间
  • 网格区域: 一个以上的单元格组成的矩形区域

网格布局的基本步骤: 1. 生成网格; 2. 放置项目

2. 创建 Grid 容器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>创建容器和设置单元格的数量与大小</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  13.         /* 创建grid容器 */
  14.         display: grid;
  16.         /* 固定值 */
  17.         /* grid-template-columns: 100px 100px 100px; */
  18.         /* grid-template-rows: 100px 100px 100px; */
  20.         /* 百分比 */
  21.         /* grid-template-columns: 25% 25% 25%; */
  22.         /* grid-template-rows: 25% 25% 25%; */
  24.         /* 比例 */
  25.        /* grid-template-columns: 1fr 1fr 1fr; */
  26.        /* grid-template-rows: 1fr 1fr 1fr; */
  28.         /* 重复设置 */
  29.        /* grid-template-columns: repeat(3,50px); */
  30.        /* grid-template-rows: repeat(3,50px); */
  32.         /* 按分组来设置: (50px-100px) */
  33.         /* 50px 100px 50px 100px */
  34.         /* grid-template-columns: repeat(2,50px 100px); */
  35.         /* grid-template-rows: repeat(2,50px 100px); */
  38.        /* 弹性 */
  39.        /* grid-template-columns: repeat(3, minmax(50px, 100px)); */
  40.         /* grid-template-rows: repeat(3, minmax(100px, 1fr)); */
  42.         /* 自动填充 */
  43.         grid-template-columns: repeat(auto-fill, 100px);
  44.         grid-template-rows: repeat(auto-fill, 100px);
  45.       }
  47.       .item {
  48.         background-color: lightblue;
  49.         font-size: 2rem;
  50.       }
  51.     </style>
  52.   </head>
  53.   <body>
  54.     <div class="container">
  55.       <div class="item item1">1</div>
  56.       <div class="item item2">2</div>
  57.       <div class="item item3">3</div>
  58.       <div class="item item4">4</div>
  59.       <div class="item item5">5</div>
  60.       <div class="item item6">6</div>
  61.       <div class="item item7">7</div>
  62.       <div class="item item8">8</div>
  63.       <div class="item item9">9</div>
  64.     </div>
  65.   </body>
  66. </html>

效果图

3. 设置单元格数量与尺寸

  • 固定宽度px: 固定大小
  • 百分比%: 以容器大小为依据来计算
  • 自动计算auto: 由浏览器决定长度
  • 比例fr: 将容器空间按比例分配给每一个单元格
  • 区间minmax(min,max): 设置单元格尺寸变化范围
  • 重复生成repeat(): 快速生成相同大小单元格的
  • 自动填充auto-fill: 单元格固定,但容器不确定时,可以让一行/列容纳尽可能多的项目

4. 将项目填充到指定单元格中

4.1 使用默认网格线划分单元格

  • 默认从左上角开始,从左到右,从上到下,依次从 1 开始编号
  • 如果从右下角开始,由下向上,由右向左,依次由从-1 开始编号
  • 根据数字网格线,可以将项目放到网格线形成的封闭矩形区域中
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>使用默认的网格线来划分单元格</title>
  7.     <style>
  8.       .container{
  9.         width: 400px;
  10.         height: 400px;
  11.         background-color: aqua;
  12.         display: grid;
  13.         grid-template-columns: repeat(4,1fr);
  14.         grid-template-rows: repeat(4,1fr);
  15.       }
  16.       .item{
  17.         font-size: 2rem;
  18.       }
  19.       .item.item1{
  20.         background-color: lightcoral;
  21.         grid-row-start: 1;
  22.         grid-row-end: 3;
  23.         grid-column-start: 1;
  24.         grid-column-end: 3;
  25.       }
  26.       .item.item2{
  27.         grid-row-start: 1;
  28.         grid-row-end: 3;
  29.         grid-column-start: 3;
  30.         grid-column-end: 5;
  31.         background-color: lightgoldenrodyellow;
  32.       }
  33.       .item.item3{
  34.         background-color:limegreen;
  35.         grid-row-start: 3;
  36.         grid-row-end: 5;
  37.         grid-column-start: 1;
  38.         grid-column-end: 3;
  39.       }
  40.       .item.item4{
  41.         background-color: yellow;
  42.         grid-row-start: 3;
  43.         grid-row-end: 5;
  44.         grid-column-start: 3;
  45.         grid-column-start: 3;
  46.         grid-column-end: 5;
  47.       }
  48.     </style>
  49.   </head>
  50.   <body>
  51.     <div class="container">
  52.       <div class="item item1">1</div>
  53.       <div class="item item2">2</div>
  54.       <div class="item item3">3</div>
  55.       <div class="item item4">4</div>
  56.     </div>
  57.   </body>
  58. </html>

效果图

4.2 使用命名网格线划分单元格

  • 使用语义化的名称替代容器自动生成的数字网线线编号

  • 同一条网络线可以有多个别名

    <!DOCTYPE html>

    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用命名网格线来划分单元格</title>
    <style>
    .container{
    width: 300px;
    height: 300px;
    background-color: lightskyblue;
    display: grid;
    grid-template-columns:[c1-start] 100px [c1-end c2-start] 100px [c2-start c3-start] 100px [c3-end];
    grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-start r3-start] 100px [r3-end];
    }
    .item{
    font-size: 2rem;
    }
    .item.item4{
    background-color: lightgreen;
    grid-row-start: r1-start;
    grid-column-start: c1-start;
    grid-column-end: c3-end；
    }
    .item.item3{
    background-color: lightgoldenrodyellow;
    grid-row-start: r2-start;
    grid-row-end: r3-end;
    grid-column-start: c3-start;
    grid-column-end: c3-end;
    }
    .item.item2{
    grid-row-start: r3-start;
    grid-row-end: r3-end;
    grid-column-start: c1-start;
    grid-column-end: c2-end;
    background-color: lightsalmon;
    }
    .item.item1{
    background-color: yellow;
    grid-row-start: r2-start;
    grid-row-end: r2-end;
    grid-column-start: c1-start;
    grid-column-end: c1-end;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    </div>
    </body>
    </html>

效果图

5. 将项目填充到网格区域中

5.1 默认网格区域

  • 设置项目属性grid-area: 将项目填充到指定容器的区域中

  • 语法: grid-area: 起始行 / 起始列 / 结束行 / 结束列

    <!DOCTYPE html>

    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>默认网格区域</title>
    <style>
    .container {
    / 容器大小 /
    width: 400px;
    height: 400px;
    background-color: wheat;

    / 创建grid容器 /
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    }

    .item {
    font-size: 2rem;
    }
    .item.item1 {
    background-color: lightgreen;
    / grid-area: 1 / 1 / 2 / 5; /
    / 用偏移量进行简化 /
    / grid-area: 1 / 1 / span 1 / span 4; /
    / 是从当前位置开始的填充 /
    grid-area: span 1 / span 4;
    }

    / 简写 /
    .item.item2 {
    background-color: lightpink;

    / grid-area: 2 / 1 / 4 / 2; /
    / grid-area: span 2 / span 1; /
    / 默认就是偏移一行/一列 /
    grid-area: span 2;
    }

    / 使用偏移量来简化, 将第三个移动到左下角 /
    .item.item3 {
    background-color: yellow;
    }

    .item.item4 {
    background-color: lightgrey;
    / grid-area: row-start / col-start / row-end / col-end; /
    }
    .item.item5 {
    background-color: violet;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    </div>
    </body>
    </html>

效果图

5.2 命名网格区域

  • 可以为每一个网格区域设置一个语义化的名称
  • 具有名称的网络区域称之为命名区域
  • 名称相同的网格区域会合并, 形成更大的区域空间

  • 项目设置的区域名称后,会自动填充到容器中应对的命名区域中

    <!DOCTYPE html>

    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>命名网格区域</title>
    <style>
    .container{
    width: 400px;
    height: 400px;
    background-color: wheat;
    display: grid;
    grid-template-columns: 80px 1fr 80px;
    grid-template-rows: 40px 1fr 40px;
    font-size: 2rem;
    grid-template-areas:
    “header header header”
    “left main right”
    “footer footer footer”;
    }
    .item.item1{
    background-color:black;
    grid-area: header;
    }
    .item.item2{
    grid-area: left;
    background-color: chartreuse;
    }
    .item.item3{
    background-color: coral;
    grid-area: main;
    }
    .item.item4{
    background-color: chartreuse;
    grid-area: right;
    }
    .item.item5{
    background-color: black;
    grid-area: footer;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    </div>
    </body>
    </html>

效果图

5.3 网格区域占位符

  • 当项目默认已到填充到正确的区域中,无需设置时,可使用”.”做为占位符

5.4 命名网格区域线默认名称

  • 区域起始行/列: 区域名称-start, 如header-start / header-start,表示区域起始行/区域起始列
  • 区域结束行/列: 区域名称-end,如header-end / header-end,表示区域结束行/区域结束列

6. 设置所有项目在容器中的对齐方式

  • justify-content: 设置所有项目在容器中水平方向的对齐方式
  • align-content: 设置所有项目在容器中垂直方向的对齐方式
  • place-content: 上面二个属性的简写, place-content: 垂直对齐方式 水平对齐方式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>设置单元格在容器中的对齐方式</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: repeat(3, 50px);
  17.         grid-template-rows: repeat(3, 50px);
  19.         justify-content: end;
  20.         align-content: end;
  22.         justify-content: center;
  23.         align-content: center;
  25.         justify-content: space-between;
  26.         justify-content: space-around;
  27.         justify-content: space-evenly;
  29.         align-content: space-between;
  30.         align-content: space-around;
  31.         align-content: space-evenly;
  33.         /* justify-content: stretch;
  34.         grid-template-columns: repeat(3, auto);
  35.         align-content: stretch;
  36.         grid-template-rows: repeat(3, 1fr); */
  38.         /* place-content: 垂直对齐 水平对齐; */
  39.         place-content: center start;
  40.         place-content: center center;
  41.         place-content: center;
  42.       }
  44.       .item {
  45.         background-color: violet;
  46.         font-size: 2rem;
  47.       }
  48.     </style>
  49.   </head>
  50.   <body>
  51.     <div class="container">
  52.       <div class="item item1">1</div>
  53.       <div class="item item2">2</div>
  54.       <div class="item item3">3</div>
  55.       <div class="item item4">4</div>
  56.       <div class="item item1">5</div>
  57.       <div class="item item2">6</div>
  58.       <div class="item item3">7</div>
  59.       <div class="item item4">8</div>
  60.       <div class="item item4">9</div>
  61.     </div>
  62.   </body>
  63. </html>

效果图

7. 设置所有项目在单元格或网格区域内的对齐方式

  • justify-items: 设置所有项目在单元格/网格区域中水平方向的对齐方式
  • align-items: 设置所有项目在单元格/网格区域中垂直方向的对齐方式
  • place-items: 上面二个属性的简写, place-items: 垂直对齐方式 水平对齐方式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>设置项目在单元格中的对齐方式</title>
  7.     <style>
  8.       .container{
  9.         width: 400px;
  10.         height: 400px;
  11.         background-color: cyan;
  12.         display: grid;
  13.         grid-template-columns: repeat(3,1fr);
  14.         grid-template-rows: repeat(3,1fr);
  16.         place-items: center center;
  17.       }
  18.       .item{
  19.         width: 50px;
  20.         height: 50px;
  21.         background-color: darkorange;
  22.         text-align: center;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div class="container">
  28.       <div class="item item1">1</div>
  29.       <div class="item item2">2</div>
  30.       <div class="item item3">3</div>
  31.       <div class="item item4">4</div>
  32.       <div class="item item5">5</div>
  33.       <div class="item item6">6</div>
  34.       <div class="item item7">7</div>
  35.       <div class="item item8">8</div>
  36.       <div class="item item9">9</div>
  37.     </div>
  38.   </body>
  39. </html>

效果图

8. 设置某个项目在单元格或网格区域内的对齐方式

  • justify-self: 设置某个项目在单元格/网格区域中水平方向的对齐方式
  • align-self: 设置某个项目在单元格/网格区域中垂直方向的对齐方式
  • place-self: 上面二个属性的简写, place-self: 垂直对齐方式 水平对齐方式

9. 设置容器中行与列之间的间距/间隙

  • column-gap: 列间距
  • row-gap: 行间距
  • gap: 行间距 列间距: 简写
  • gap: 值: 行与列相等,可只写一个值

总结：
终于写完这些代码，虽然好像是重复输入，但是加强了记忆，充分体现肌肉记忆的作用。我虽然慢，但也一点点进步。
给自己加油！

上一条：4.5前端入门之CSS与文档下一条：实战利用grid响应式布局和12栅格布局模板
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多