相信大家都比较熟悉flex布局了,最近有空研究了波grid布局,感觉虽然兼容性还不是太高,应用不是太普遍,但是功能非常强大。未来应该是grid+flex为主流,grid是二维布局,很灵活,适合整体构架,而flex是一维布局,适合处理局部细节。

介绍

  • CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统。

  • 兼容性目前不是太友好

  • 和felx类似,grid有容器项目

    • Grid容器 属性列表

      • Grid Container 的全部属性
      • display
      • grid-template-columns
      • grid-template-rows
      • grid-template-areas
      • grid-template
      • grid-column-gap
      • grid-row-gap
      • grid-gap
      • justify-items
      • align-items
      • justify-content
      • align-content
      • grid-auto-columns
      • grid-auto-rows
      • grid-auto-flow
      • grid
    • Grid项目 的全部属性

      • grid-column-start
      • grid-column-end
      • grid-row-start
      • grid-row-end
      • grid-column
      • grid-row
      • grid-area
      • justify-self
      • align-self
  • 被吓到了吗,反正第一次我看是被吓到了,不过没事,下面只会讲解其中常用的

  • 下面栗子均用.grid_box.grid_item分别指代容器项目,并使用以下html结构

  <div class="grid_box">
<div class="grid_item">1</div>
<div class="grid_item">2</div>
<div class="grid_item" id="item3">3</div>
<div class="grid_item" id="item4">4</div>
<div class="grid_item">5</div>
<div class="grid_item">6</div>
<div class="grid_item">7</div>
<div class="grid_item">8</div>
<div class="grid_item">9</div>
<div class="grid_item">10</div>
<div class="grid_item">11</div>
</div>
<span>邻居元素</span>

容器属性

display

  • grid - 生成一个块级(block-level)网格
  • inline-grid - 生成一个行级(inline-level)网格
  • subgrid - 如果容器本身就是一个项目,就可以使用这个属性来表示你想从它的父节点获取它的行/列的大小,而不是指定它自己的大小。
    .grid_box {
background: #054154;
display: inline-grid; //行级网络,和span处于一行
} .grid_item {
background: #0490db;
border: 1px solid #fff;
}

    .grid_box {
background: #054154;
display: grid; //块级网络,将span挤入下一行
} .grid_item {
background: #0490db;
border: 1px solid #fff;
}

grid-template-columns / grid-template-rows

  • grid-template-rows是行高
    .grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
} .grid_item {
background: #0490db;
border: 1px solid #fff;
}

代表第一行高60px,第三行高40px,其他的所有行(不设置或者auto的行)平分剩余高度

  • grid-template-columns是列宽
    .grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
grid-template-columns: 30px 20px auto auto;
} .grid_item {
background: #0490db;
border: 1px solid #fff;
}

和行高类似,这个代表第一列宽30px,第二列宽20px,第三列第四列平分剩余宽度(和行高不同的是列宽是你设置了多少就会有多少列,列数量和你设置的是相同的)

grid-gap

  • 【grid-gap】默认值为0,两个属性的缩写,第一个grid-row-gap(行与行之间的间距),第二个grid-column-gap(列与列之间的间距),只设置了一个值,表示行和列的间距相等*/
    .grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
grid-template-columns: 30px 20px repeat(2,1fr);
grid-gap: 2px 4px; //行间距2px,列间距4px
} .grid_item {
background: #0490db;
border: 1px solid #fff;
}

一些语法糖

repeat

  • 你可能会问如果中间有很多列/行,每个都写岂不是很麻烦,因此提供了repeat语法糖来简化写法
.grid_box {
grid-template-columns: 30px 20px auto auto;
grid-template-columns: 30px 20px repeat(2,auto);//等价于
}

fr

  • 另外,类似flex的1,grid里面也有类似的'份数单位'---fr.
.grid_box {
grid-template-columns: 30px 20px auto auto;
grid-template-columns: 30px 20px 1fr 1fr;//等价于
grid-template-columns: 30px 20px repeat(2,1fr);//也等价于
}

minmax

  • 最大值最小值

    grid-template-rows: minmax(auto, 30%) 1fr 1fr;表示第一行高最小auto,最大30%

项目属性

grid-area

  • 单体操作,控制个体的位置,凌驾于整体规则,4个属性分别是 grid-row-start(开始行线), grid-column-start(开始列线), grid-row-end(结束行线),grid-column-end(结束列线)
  • 比如下面用item3来单独操作
    .grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
grid-template-columns: 30px 20px repeat(2,1fr);
grid-gap: 2px 4px;
} .grid_item {
background: #0490db;
border: 1px solid #fff;
}
#item3{
grid-area: 1 /1/ 2/ 4;
}

grid-area: 1 /1/ 2/ 4;代表item3的位置是,行线1到2,列线1到4,这四条线组成的区域即是item3的位置,是不是很强大,太叼了这个

span,负数

  • 你可能会问如果中间有很多列/行,那还要去数是第几列线岂不是很麻烦,因此又有了优化
  • 和js里的slice类似,负数表示倒数
  • 而span表示合并
  • 因此本例中,以下都是等价的
    #item3{
grid-area: 1 /1/ 2/ 4;
grid-area: 1 /1/ 2/ span 3;//等价
grid-area: 1 /1/ 2/ -2;//等价
}

order

  • 如果有两个子项目发生了重叠怎么办呢,就需要order来解决层级问题了。
  • 和index类似于z-index,表明叠放顺序,数值越大,越在上。允许负数。
    .grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
grid-template-columns: 30px 20px repeat(2,1fr);
grid-gap: 2px 4px;
} .grid_item {
background: #0490db;
border: 1px solid #fff;
}
#item3{
grid-area: 1 /1/ 2/ 4;
order: 1;
}
#item4{
grid-area: 1 /1/ 2/ 4;
}

因为item3有order,所以item3盖住了item4

命名

  • 在我看来,命名是grid最强大的地方,你可以在容器里面设置命名,然后在子项目里面使用该命名
  • 其中点号 . 代表一个空网格单元
  • 比如我们来个常规的布局
  <div class="grid_box">
<div class="grid_item" id="header">header</div>
<div class="grid_item" id="aside">aside</div>
<div class="grid_item" id="content">content</div>
<div class="grid_item" id="footer">footer</div>
</div>
<span>邻居元素</span>
    .grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
grid-template-columns: 30px 20px repeat(2,1fr);
grid-gap: 2px 4px;
grid-template-areas: "header header header header" "aside . content content" "footer footer footer footer";
} .grid_item {
background: #0490db;
border: 1px solid #fff;
}
#header{
grid-area: header;
}
#aside{
grid-area: aside;
}
#content{
grid-area: content;
}
#footer{
grid-area: footer;
}

是不是很强大

  • 另外,网络线也是可以命名的

测试

  • 以上就是一些常用的,基础的使用方法,更深入的我们以后再来讨论
  • 如果你想检测自己是否基本掌握了grid,可以使用以下的网址测试,是个有趣的小游戏
  • 小测试

最后

大家好,这里是「 TaoLand 」,这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客,希望和大家多多交流,一起成长!文章将会在下列地址同步更新……

个人博客:www.yangyuetao.cn

小程序:TaoLand

CSS Grid布局入门的更多相关文章

  1. 带你入门 CSS Grid 布局

    前言 三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...

  2. CSS Grid布局指南

    简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...

  3. CSS Grid 布局完全指南(图解 Grid 详细教程)

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  4. 快速使用CSS Grid布局,实现响应式设计

    常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...

  5. CSS Grid 布局

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  6. CSS Grid 布局学习笔记

    CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...

  7. 5分钟学会 CSS Grid 布局

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 这是一篇快速介绍网站未来布局的文章. Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工 ...

  8. css Grid布局

    CSS Grid 布局完全指南(图解 Grid 详细教程)https://www.html.cn/archives/8510#prop-grid-gap 5分钟学会 CSS Grid 布局https: ...

  9. 用 CSS Grid 布局制作一个响应式柱状图

    最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...

随机推荐

  1. 如何最大限度提高.NET的性能

    优化 .NET的性能 1)避免使用ArrayList.     因为任何对象添加到ArrayList都要封箱为System.Object类型,从ArrayList取出数据时,要拆箱回实际的类型.建议使 ...

  2. net负载均衡服务器架构网址

    https://blog.csdn.net/orichisonic/article/details/71122291 https://blog.csdn.net/huangxiangec/articl ...

  3. sql 的理解

    sql的作用有: 1.筛选数据,连接表 2.数据的补充,连接表 3.数据的加减乘除的运算,+ - * / 4.数据的逻辑运输,比如case..when...,decode,nvl,ifnull.... ...

  4. LeetCode OJ:Insert Interval

    Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...

  5. 【LeetCode 235_二叉搜索树】Lowest Common Ancestor of a Binary Search Tree

    解法一:递归 TreeNode* lowestCommonAncestor(TreeNode* root, TreeNode* p, TreeNode* q) { if (root == NULL | ...

  6. SQL2012 创建备份计划

    打开数据库,选择 管理 -> 新建维护计划,填写计划名称 修改计划参数 工具箱->备份数据库任务,拖到计划里 编辑任务 拖动清除数据库任务到计划 编辑清除任务 从备份任务到清除任务拖一个箭 ...

  7. Java eclipse Myeclipse tomcat安装及配置

    Java eclipse Myeclipse tomcat安装及配置作者:天涯 来源:中国自学编程网 发布日期:1223857747目前,开发Java网页程序,最流行的就是用Myeclipse来进行编 ...

  8. PyCharm 注释

    1.1 单行注释(行注释) 语法格式: #[空格]说明性文字信息 注:可放一行代码的后面进行说明 添加快捷键:  Ctrl+/ 取消快捷键:  同上 1.2 多行注释(块注释) 语法格式: " ...

  9. Listbox Binding ItemsSource

    把List<CourseItem>绑定到ListBox. 前台绑定: <ListBox x:Name="ItemBox" Grid.Row="1&quo ...

  10. 9.1 UDP协议

    TCP 协议是面向连接的基于流的,可靠的传输服务.UDP是无连接的,基于数据报的,不可靠的传输服务,UDP没有粘包,但是会产生丢包. UDP模型如下: 可以看到,服务器端不用listen,也不用acc ...