• CSS栅格布局（Grid）

            今天写页面布局，突然想到了栅格布局，以往习惯了弹性布局，然后发现栅格布局有点香，然后就简单的整理了一下，用于学习与分享。

    一、什么是栅格布局

            可以理解为将一个元素分成行列，然后可以设置对应的大小、布局、位置。

    二、栅格布局的基本语法

    声明栅格

    1. display: grid;
    2. display: inline-grid;

    划分行列

    • 使用 grid-template-columns 划分列数

    • 使用 grid-template-rows 划分行数

    代码展示及说明

    假定一个需求，在一个容器内，左右列表，默认展示4列2行。（画的有点丑，哈哈哈哈）

    通过栅格布局进行页面的绘制。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <div class="content">
    13.     <div class="item">1div>
    14.     <div class="item">2div>
    15.     <div class="item">3div>
    16.     <div class="item">4div>
    17.     <div class="item">5div>
    18.     <div class="item">6div>
    19.     <div class="item">7div>
    20.     <div class="item">8div>
    21.     <div class="item">9div>
    22.     <div class="item">10div>
    23.     <div class="item">11div>
    24.  
    25.   div>
    26. body>
    27.  
    28. html>
    29. <style>
    30.   .content {
    31.     width: 300px;
    32.     height: 200px;
    33.     background: #fff;
    34.     border: 3px solid #F2F30E;
    35.     display: grid;
    36.     grid-template-columns: 50% 50%;
    37.     grid-template-rows: 25% 25% 25% 25%;
    38.     justify-content: center;
    39.   }
    40.   .item{
    41.     border-bottom:1px solid red  ;
    42.   }
    43. style>

    上面代码发现，页面超出部分，高度不是25%了，那是因为容器外的没有设置到25%这个属性，解决方法：设置其余的行大小。

      grid-auto-rows:25% ;

    补充

    根据px设置大小、auto为自动填充（也可以使用百分比）

    1. div {
    2.   grid-template-rows: 100px 100px;
    3.   grid-template-columns: 100px 100px 100px;
    4. }

    通过repeat设置统一值

    1. div {
    2.   grid-template-rows: repeat(2, 50%);
    3.   grid-template-columns: repeat(2, 50%);
    4. }

    通过auto-fill自动填充

    1. div {
    2.   width: 300px;
    3.   height: 200px;
    4.   display: grid;
    5.   grid-template-rows: repeat(auto-fill, 100px);
    6.   grid-template-columns: repeat(auto-fill, 100px);
    7.   /* 两行三列 （300/100,200/100） */
    8. }

    使用fr设置比例

    1. div {
    2.   width: 300px;
    3.   height: 100px;
    4.   display: grid;
    5.   grid-template-rows: repeat(2, 1fr);
    6.   grid-template-columns: repeat(2, 1fr 2fr);
    7. }

    简写形式

    1. /** 简写形式 */
    2. grid-template: 10vh 20vh 10vh/ 30vw 1fr;
    3. grid-template: repeat(3, 100px) / repeat(3, 100px);

    行列间距

    • row-gap 行间距
    • coliumn-gap 列间距
    • gap 组合定义
    1. row-gap: 30px;
    2. column-gap: 20px;
    3. gap: 20px 10px;
    4. gap: 20px;/*行列间距都为20px*/

    元素定位

    样式属性说明
    grid-row-start行开始栅格线
    grid-row-end行结束栅格线
    grid-column-start列开始栅格线
    grid-column-end列结束栅格线
    1. grid-row-start/grid-column-start/grid-row-end/grid-column-end
    2.  
    3. grid-area: 2/2/4/4;/* 2行2列开始，4行4列结束*/

    栅格对齐

    1.  
    2. justify-content    所有栅格在容器中的水平对齐方式，容器有额外空间时    栅格容器
    3. align-content    所有栅格在容器中的垂直对齐方式，容器有额外空间时    栅格容器
    4. align-items    栅格内所有元素的垂直排列方式    栅格容器
    5. justify-items    栅格内所有元素的横向排列方式    栅格容器

    三、扩展

            有不懂的可以相互交流，或者查看官网，本文更适用于作者本人记录总结。

  • 相关阅读:
    Java8 新写法:优雅处理空值,告别冗长的 if-else!
    lock_icon_container LockIconContainer的显示
    Redis安装，性能优化
    每日leetcode[删除排序链表中的重复元素]
    优先级队列(priority_queue)
    一文讲透为Power Automate for Desktop (PAD) 实现自定义模块 - 附完整代码
    Vue框架总结（四、CLI编程组件通信）
    hot100- 最小栈
    微服务集成Spring Cloud Alibaba Seata（一）Seata服务搭建
    DBCO-PEG-carboxyl COOH-PEG-DBCO 二苯并环辛炔-聚乙二醇-羧酸 羧酸修饰PEG二苯并环辛炔
  • 原文地址：https://blog.csdn.net/ct5211314/article/details/128192336