AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSS Grid布局入门

2018-08-16 1176
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 相信大家都比较熟悉flex布局了，最近有空研究了波grid布局，感觉虽然兼容性还不是太高，应用不是太普遍，但是功能非常强大。未来应该是grid+flex为主流，grid是二维布局，很灵活，适合整体构架，而flex是一维布局，适合处理局部细节。

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

介绍

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

  • 兼容性目前不是太友好
    1.png

  • 和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;
    }

2.png

    .grid_box {
      background: #054154;
      display: grid;    //块级网络，将span挤入下一行
    }

    .grid_item {
      background: #0490db;
      border: 1px solid #fff;
    }

3.png

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的行）平分剩余高度

4.png

  • 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，第三列第四列平分剩余宽度（和行高不同的是列宽是你设置了多少就会有多少列，列数量和你设置的是相同的）

5.png

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;
    }

6.png

一些语法糖

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的位置，是不是很强大，太叼了这个

7.png

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

8.png

命名

  • 在我看来，命名是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;
    }

9.png

是不是很强大

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

    测试

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

  • 小测试

最后

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

文章标签：
前端开发
容器
JavaScript
程序员
小程序
关键词：
CSS布局
CSS grid
CSS grid布局
CSS入门
CSS布局入门
taoland
目录
相关文章
二二*一一
|
8天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
26 1
我是快乐的嘟嘟
|
20天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
我是快乐的嘟嘟
92 34
小徐在进步
|
2月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性：继承性、层叠性和优先级，并深入讲解了背景图的相关属性，包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中，继承性指子元素自动继承父元素的文字控制属性；层叠性指相同属性后定义覆盖前定义，不同属性可叠加；优先级涉及选择器权重，包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
小徐在进步
256 91
大树营养快线
|
13天前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
大树营养快线
23 0
九月天空
|
1月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
九月天空
49 4
有路有乔-六月
|
1月前
|
前端开发 容器
前端技术分享：利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享：利用CSS Grid布局实现响应式设计
有路有乔-六月
50 3
G0518
|
1月前
|
前端开发 UED 容器
前端技术分享：利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享：利用 CSS Grid 实现响应式布局
G0518
51 2
小徐在进步
|
2月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性，通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性，并提供了实用的代码示例。此外，还简要介绍了调试工具中的一些细节，如错误属性标识和属性生效状态的控制。
小徐在进步
66 28
杀死一只知更鸟debug
|
2月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记，详细介绍了flex容器和元素的相关属性，包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等，解释了这些属性在弹性盒子布局中的作用和用法。
杀死一只知更鸟debug
52 2
小徐在进步
|
2月前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式，包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外，还深入解析了不同种类的选择器：标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景，并提供了实例帮助理解。最后，通过具体的新属性示例，指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
小徐在进步
49 15