grid布局基础 - 作业 - php中文网博客

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > grid布局基础

博主信息

博文 17

粉丝 0

访问量 17489

专题推荐

更多>

创建grid容器`display: grid`

1.设置填充方式

默认行/列优先 grid-auto-flow : row / column /
显式的划分行与列：
- grid-template-columns：
- grid-template-rows

对于放不下的项目，会隐式的生成单元格

<style>
      .container {
          background: lightcyan;
          width: 400px;
          height: 400px;
          display: grid;
          /* 按列布局 */
          grid-auto-flow: column;
          grid-template-rows: 100px 100px 100px;
      }
      .items {
          background: lightblue;
      }
  </style>

2.设置单元格的大小与数量

属性：
- grid-template-columns：
- grid-template-rows
值：以三行三列为例
- 固定值 100px 100px 100px
- 百分比 20% 30% auto
- 比例 1fr auto 2fr
- 重复设置 repeat(3,100px)
- 按分组设置 repeat(2,50px,100px)
- 弹性设置 repeat(2,minmax(50px , 100px))
- 自动填充 repeat(auto-fill ,100px)

举例：自动填充

<style>
      .container {
          background: lightcyan;
          width: 400px;
          height: 400px;
          display: grid;
          /* 自动填充 */
          grid-template-columns: repeat(auto-fill, 100px);
          grid-template-rows: repeat(auto-fill, 100px);
      }     
      .items {
          background: lightblue;
      }
  </style>

3.根据默认的网格线划分

属性
- grid-row-start
- grid-row-end
- grid-column-start
- grid-column-end
值
- 从左往右，从上往下，对线编号：1 —— n 或者 -n —— -1
简写
- 属性 grid-row: 1/3 ; grid-column: 3 / 5 ;
- 偏移量来简化 grid-row: 1/span 2;

举例：

  <style>
      .container {
          background: lightcyan;
          width: 400px;
          height: 400px;
          display: grid;
          /* 重复设置 */
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: repeat(4, 1fr);
      }
            .items {
          background: lightblue;
      }
      /* 第三行开始占2行，从第一条列线到第二条，占一列 */  
      .items.item3 {
          background-color: aqua;
          grid-row: 3/ span2;
          grid-column: 1 / 2;
      }
  </style>

4.使用命名网格线划分单元格

属性 grid-template-columns:/grid-template-columns:
值：[c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end]
同样可以参照网格线进行简写

5.默认网格区域

属性： grid-area
常规4值使用线标或者线名 1 / 1/ 2/ 5;
从当前位置填充 grid-area: span 1 / span 4;

举例

  <style>
      .container {
          background: lightcyan;
          width: 400px;
          height: 400px;
          display: grid;
          /* 重复*/
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: repeat(4, 1fr);
      }  
      .items {
          background: lightblue;
      }
      /* 第三格子从第一条行线到第4条，占2行，从第二列线，到第四列线，占2列 */   
      .items.item3 {
          background-color: aqua;
          grid-area: 2/2/4/4;
      }
  </style>

6.命名网格区域

属性：grid-template-areas:,相同名称区域会合并

值：以三行三列举例

  <style>
      .container {
          background: lightcyan;
          width: 400px;
          height: 400px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: 40px 1fr 40px;
          grid-template-areas: 
          "header header header" 
          "left main right" 
          "footer  footer footer";
      }     
      .items {
          background: lightblue;
      }
      /* 第三格子设置到left命名区域 */    
      .items.item3 {
          background-color: aqua;
          grid-area: left;
      }
      /* 将第五格子设置为footer区域，同名区域合并 */     
      .items.item5 {
          background-color: red;
          grid-area: footer;
      }
  </style>

7.网格区域占位符

使用 . 来占一格位置

8.网格区域线的默认名称

配合网格命名，命名之后的，根据命名格的起始，来设置指定单元格位置

  <style>
      .container {
          background: lightcyan;
          width: 400px;
          height: 400px;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: 40px 1fr 40px;
          grid-template-areas: "header  header" ". ." "footer  footer";
      }     
      .items {
          background: lightblue;
      }
      /* 第1格子设置通过hearder区域线名 */       
      .items.item1 {
          background-color: aqua;
          /*起始行/起始列/结束行/结束列*/
          grid-area: header-start / header-start / header-end /header-end;
      }
      /* 将第4格子设置为footer区域，同名区域合并 */       
      .items.item4 {
          background-color: red;
          grid-area: footer-start /footer-start /footer-end/footer-end;
      }
  </style>

9.设置单元格在容器中的对齐方式

水平对其 justify-content:
垂直对其 align-content:
简写：place-content:垂直值水平值；
属性默认值：拉伸stretch
其他值：start/end/center/space-bwteen/space-around/space-evenly

 <style>
        .container {
            background: lightcyan;
            width: 500px;
            height: 500px;
            display: grid;
            grid-template-columns: repeat(3, 50px);
            grid-template-rows: 50px 50px 50px;
            /* 水平均匀分布 */
            /* justify-content: space-evenly;
            /* 垂直2端对齐 */
            /* align-content: space-between; */
            /*值顺序是水平对其/垂直对齐*/
            place-content: space-between space-evenly;
            }  
        .items {
            background: lightblue;
        }
    </style>

10.设置项目在单元格中的对齐方式

属性：justify-items/align-items
简写：place-items

值：默认stretch, start,end,center

 <style>
      .container {
          background: lightcyan;
          width: 500px;
          height: 500px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(3, 1fr);
          /* 水平处于下方 */
          /* justify-items: end;
          /* 垂直居中 */
          /* align-items: center; */
          /*值顺序是水平/垂直*/
          place-items: end center;
      }
      .items {
          background: lightblue;
          width: 50px;
          height: 50px;
      }
  </style>

11.设置某个项目在单元格中的对齐方式

属性：justify-self/align-self
简写：place-self
值： start,end,center

举例：基于第10点项目样式，再来设置具体一格的属性，例如设置第5个项目居中。

.items.item5 {
          background: yellow;
          place-self:center center;
      }

12.设置单元格间距

属性：row-gap/column-gap
简写：gap: 行间距/列间距

不能使用padding，margin,因为会导致2格之间间距相加

  <style>
      .container {
          background: lightcyan;
          width: 500px;
          height: 500px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(3, 1fr);
          /*值顺序是行/列*/
          gap: 10px 15px;
      }    
      .items {
          background: lightblue;
      }
  </style>

总结

学习grid布局的单元格数量设置，网格的命名以及单元格和元素的对齐
对齐方式与flex类似，特别注意xx-content,xx-items,xx-self的不同含义，content是设置单元格对齐，items是设置项目在单元格的对齐，这2个属性设置都是在是在上层容器中设置。self是单独针对某一个项目设置在对应单元格中的对齐，属性设置位置是在自身单元格中设置。
gap属性设置单元格间距，与padding和margin区别。

批改老师：