对于Web开发者来说，网页布局一直是个比较重要的问题。 Web 布局主要经历了以下四个阶段：

　　1、table表格布局；

　　2、float浮动及position定位布局；

　　3、flex弹性盒模型布局，革命性的突破，解决传统布局方案上的三大痛点 “排列方向”、“对齐方式”，“自适应尺寸”。是目前最为成熟和强大的布局方案；

　　4、grid栅格布局，二维布局模块，具有强大的内容尺寸和定位能力，适合需要在两个维度上对齐内容的布局。随着 CSS Grid 的出现，网格变得更加简单。我们不再需要担心网格中遇到的复杂计算。

下面我们通过几个实例来讲述它的使用方法：

1.实现4列固定宽度的栅格布局，只要在 grid-template-columns 声明中写四次 100px 即可：

  1. .grid {
  2.   display: grid;
  3.   grid-template-columns: 100px 100px 100px 100px;
  4.   grid-column-gap: 20px;
  5. }

2.响应式网格

——方法1：使用fr为单位

  1. .grid-fr {
  2.     display: grid;
  3.     grid-template-columns: 1fr 1fr 1fr 1fr;
  4.     grid-column-gap: 20px;
  5.     min-height: 70px;
  6.     margin-top: 20px;
  7. }

希望 fr 单位每次都创建等宽列，则需要使用 minmax(0, 1fr) 去强制指定它。

  1. .grid-fr_same {
  2.     grid-template-columns: repeat(4, minmax(0, 1fr));
  3. }

——方法2：媒体查询

  1. @media (max-width: 960px) {
  2.     .grid-fr_media {
  3.         grid-template-columns: repeat(2, 1fr);
  4.     }
  5. }

3.基于高度的网格：通过grid + calc 搭配使用

  1. .grid-fr_height {
  2.     height: 500px;
  3.     display: grid;
  4.     grid-template-rows: repeat(4, 1fr);
  5.     grid-auto-columns: calc((500px - 3em) / 4);
  6.     grid-auto-flow: column;
  7.     grid-gap: 1em;
  8. }
  9.  
  10. .grid-fr_height .grid-item:nth-child(3n) {
  11.     background-color: red;
  12. }
  13.  
  14. .grid-fr_height .grid-item:nth-child(3n + 2) {
  15.     background-color: orange;
  16. }

4.网格项的放置：

关键字：grid-row（grid-row-star和grid-row-end的缩写），

grid-column（grid-column-star和grid-column-end的缩写）

通过 span 关键字告诉网格项应该占用多少列。

  1. .grid-fr_select .grid-item {
  2.     /* 放在第二列，跨越 2 列 */
  3.     grid-column: 2 / span 2;
  4.     background-color: red;
  5. }

上面所有例子的代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>CSS-grid</title>
  6.         <style>
  7.  
  8.             .grid {
  9.                 display: grid;
  10.                 grid-template-columns: 100px 100px 100px 100px;
  11.                 grid-column-gap: 20px;
  12.                 min-height: 70px;
  13.             }
  14.  
  15.             .grid-item {
  16.                 background-color: #f2f2f2;
  17.                 padding: 15px;
  18.             }
  19.  
  20.             .grid-fr {
  21.                 display: grid;
  22.                 grid-template-columns: 1fr 1fr 1fr 1fr;
  23.                 grid-column-gap: 20px;
  24.                 min-height: 70px;
  25.                 margin-top: 20px;
  26.             }
  27.  
  28.             .grid-fr_same {
  29.                 grid-template-columns: repeat(4, minmax(0, 1fr));
  30.             }
  31.  
  32.             .grid-fr_same img {
  33.                 max-width: 100%;
  34.             }
  35.  
  36.             .grid-fr_different {
  37.                 grid-template-columns: 1fr 1.618fr 2.618fr;
  38.             }
  39.  
  40.             @media (max-width: 960px) {
  41.                 .grid-fr_media {
  42.                     grid-template-columns: repeat(2, 1fr);
  43.                 }
  44.             }
  45.  
  46.             .grid-fr_height {
  47.                 height: 500px;
  48.                 display: grid;
  49.                 grid-template-rows: repeat(4, 1fr);
  50.                 grid-auto-columns: calc((500px - 3em) / 4);
  51.                 grid-auto-flow: column;
  52.                 grid-gap: 1em;
  53.             }
  54.  
  55.             .grid-fr_height .grid-item:nth-child(3n) {
  56.                 background-color: red;
  57.             }
  58.  
  59.             .grid-fr_height .grid-item:nth-child(3n + 2) {
  60.                 background-color: orange;
  61.             }
  62.  
  63.             .grid-fr_select .grid-item {
  64.                 /* 放在第二列，跨越 2 列 */
  65.                 grid-column: 2 / span 2;
  66.                 background-color: red;
  67.             }
  68.         </style>
  69.     </head>
  70.     <body>
  71.         <h3>固定宽网格</h3>
  72.         <div class="grid">
  73.             <div class="grid-item">每列的宽度为100px</div>
  74.             <div class="grid-item">每列的宽度为100px</div>
  75.             <div class="grid-item">每列的宽度为100px</div>
  76.             <div class="grid-item">每列的宽度为100px</div>
  77.         </div>
  78.         <h3>响应式网格：方法1：使用fr为单位</h3>
  79.         <div class="grid-fr">
  80.             <div class="grid-item">fr 是代表一个片段的灵活长度单位。</div>
  81.             <div class="grid-item">当你使用 fr 单位时，浏览器会分割开放空间并根据 fr 倍数将区域分配给列。</div>
  82.             <div class="grid-item">使用fr为单位</div>
  83.             <div class="grid-item">使用fr为单位</div>
  84.         </div>
  85.         <h3>使用 fr 单元创建的网格并不总是相等的！</h3>
  86.         <div class="grid-fr">
  87.             <div class="grid-item">
  88.                 <img src="img/2.jpg"/>
  89.             </div>
  90.             <div class="grid-item">每个 fr 单位是可用（或剩余）空间的一个小片段。</div>
  91.             <div class="grid-item">如果你的元素比使用 fr 单位创建的任何列都要宽，则需要以不同的方式进行计算。</div>
  92.             <div class="grid-item"></div>
  93.         </div>
  94.         <h3>希望 fr 单位每次都创建等宽列，则需要使用 minmax(0, 1fr) 去强制指定它。</h3>
  95.         <div class="grid-fr grid-fr_same">
  96.             <div class="grid-item">
  97.                 <img src="img/2.jpg"/>
  98.             </div>
  99.             <div class="grid-item">通过minmax()函数来创建网格轨道的最小或最大尺寸</div>
  100.             <div class="grid-item">minmax()函数接受两个参数：第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。</div>
  101.             <div class="grid-item">可以接受任何长度值，也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压。</div>
  102.         </div>
  103.         <h3>不等宽网格</h3>
  104.         <div class="grid-fr grid-fr_different">
  105.             <div class="grid-item">只需更改 fr 倍数，就可以创建宽度不等的网格。</div>
  106.             <div class="grid-item">比如：grid-template-columns: 1fr 1.618fr 2.618fr;</div>
  107.             <div class="grid-item">表示：第二列是第一列的 1.618 倍，第三列是第二列的 1.618 倍。</div>
  108.         </div>
  109.         <h3>repeat()</h3>
  110.         <div class="grid-fr">
  111.             <div class="grid-item">repeat()可以创建重复的网格轨道。</div>
  112.             <div class="grid-item">适用于创建相等尺寸的网格项目和多个网格项目。</div>
  113.             <div class="grid-item">repeat()接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。</div>
  114.             <div class="grid-item">比如这个例子就可以写成 grid-template-columns: repeat(4,1fr)</div>
  115.         </div>
  116.         <h3>响应式网格：方法2：媒体查询</h3>
  117.         <div class="grid-fr grid-fr_media">
  118.             <div class="grid-item">使用 @media (min-width: ***) {} 进行断点</div>
  119.             <div class="grid-item">当你使用 fr 单位时，浏览器会分割开放空间并根据 fr 倍数将区域分配给列。</div>
  120.             <div class="grid-item">使用fr为单位</div>
  121.             <div class="grid-item">使用fr为单位</div>
  122.         </div>
  123.         <h3>基于高度的网格</h3>
  124.         <div class="grid-fr_height">
  125.             <div class="grid-item"></div>
  126.             <div class="grid-item"></div>
  127.             <div class="grid-item"></div>
  128.             <div class="grid-item"></div>
  129.             <div class="grid-item"></div>
  130.             <div class="grid-item"></div>
  131.             <div class="grid-item"></div>
  132.             <div class="grid-item"></div>
  133.             <div class="grid-item"></div>
  134.             <div class="grid-item"></div>
  135.             <div class="grid-item"></div>
  136.             <div class="grid-item"></div>
  137.             <div class="grid-item"></div>
  138.             <div class="grid-item"></div>
  139.             <div class="grid-item"></div>
  140.             <div class="grid-item"></div>
  141.         </div>
  142.         <h3>网格项的放置</h3>
  143.         <div class="grid-fr grid-fr_select">
  144.             <div class="grid-item">可以通过 span 关键字告诉网格项应该占用多少列。</div>
  145.             <div class="grid-item">可以通过 span 关键字告诉网格项应该占用多少列。</div>
  146.             <div class="grid-item">可以通过 span 关键字告诉网格项应该占用多少列。</div>
  147.         </div>
  148.     </body>
  149. </html>

本篇文章是基于 新的 CSS 特性正在改变网页设计 做的一个简单笔记。更多详细内容可阅读原文。

阅读此文适用于对grid有个初步了解。想要更深入的，可访问 grid栅格布局。

从实例中学习grid布局的更多相关文章

  1. wpf后置代码中的Grid布局以及图片路径的设置

    之前用Grid练习连连看布局时,遇到了几个困惑.此次就把当时的一些收获写出来,供以后翻看. 图片路径可能比较常用,所以就写在第一个了. 在xaml中,设置图片非常简单,只要把图片拷贝到资源目录(这里假 ...

  2. 图文详解前端CSS中的Grid布局，你真的可以5分钟掌握

    前言 网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式. 今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式. CSS 第一个Grid布局 首先我们看看 ...

  3. css 中的grid布局基础

    CSS Grid Layout为CSS引入了一个二维网格系统.网格可用于布局主要页面区域或小型用户界面元素. 网格是一组交叉的水平和垂直线 - 一组定义列,其他行.元素可以放在网格上,以行或者列为标准 ...

  4. web前端——实例中学习css,javascript

    最近闲暇时候在研究前端的样式和js,以前都是从w3school上看看那些选择器和DOM操作方法很少去实际做demo来研究,做的过程当中才真切感觉到纸上得来终觉浅,看得懂跟能做出东西完全两码事,尤其在定 ...

  5. 在微信小程序中学习flex布局

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就 ...

  6. Android布局管理器-从实例入手学习相对布局管理器的使用

    场景 AndroidStudio跑起来第一个App时新手遇到的那些坑: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103797 ...

  7. 手把手教你grid布局

    概述 目前css布局方案中,网格布局可以算得上是最强大的布局方案了.它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局. 基本概念 在学习grid布局之前,我们需要了解一些基本概念 1 ...

  8. 轻轻松松学CSS:Grid布局

    网页布局总的来说经历了以下四个阶段: 1.古老的table表格布局,现在基本已被淘汰. 2.float浮动布局(或者position定位布局),借助float.position 等属性等进行布局,这种 ...

  9. 学习ExtJS的grid布局

    这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容.之后会发一个最近写的结合MVC项目的grid布局的案例. 上一篇关于ExtJS的学习资料什么的都已经更在上一篇了,这里只是对一些代码的记录. ...

随机推荐

  1. 正确关闭Redis

    1.首先关闭单机版 我的单机版 是放在redis文件夹下面的 首先你要启动你的单机版redis 直接shutdown quit 退出去 ps aux|grep redis  查看运行的redis 关闭 ...

  2. .net mvc前台如何接收和解析后台的字典类型的数据 二分搜索算法 window.onunload中使用HTTP请求 网页关闭 OpenCvSharp尝试 简单爬虫

    .net mvc前台如何接收和解析后台的字典类型的数据   很久没有写博客了,最近做了一个公司门户网站的小项目,其中接触到了一些我不会的知识点,今日事情少,便记录一下,当时想在网上搜索相关的内容,但是 ...

  3. JMeter分布式配置

    搭建进行分布式平台测试前提: 1 所有的防火墙应该关闭 2 所有的客户端应该都是在同一个子网中. 3 确保jMeter可以访问这个服务器 4 确保各个客户端的jMeter的版本都是一致的,不同版本的J ...

  4. js中window.location.search的用法和作用。

    用该属性获取页面 URL 地址: window.location 对象所包含的属性 属性 描述 hash 从井号 (#) 开始的 URL(锚) host 主机名和当前 URL 的端口号 hostnam ...

  5. MySQL Proxy 实现 MySQL 读写分离提高并发负载

    还在学习,学完了在写笔记 (这个先安装lua:https://www.cnblogs.com/fps2tao/p/9163959.html ) 工作拓扑: MySQL Proxy有一项强大功能是实现“ ...

  6. Java简单验证码的识别

    1. 需求 因为项目需要,需要多次登录某网站抓取信息.所以学习了验证码的一些小知识.文章参考http://blog.csdn.net/problc/article/details/5794460的部分 ...

  7. git的全局变量

    git的全局变量可以用在命令行设置: git config --global user.name "litifeng" git config --global user.email ...

  8. 【Android】7.1 布局控件常用的公共属性

    分类:C#.Android.VS2015: 创建日期:2016-02-10 一.简介 Android应用程序中的布局控件都是容器控件,用于控制子元素的排列和放置方式.Android提供的布局控件有: ...

  9. hdu 1532 最大流

    #include <cstdio> #include <iostream> #include <algorithm> #include <queue> ...

  10. MySql 触发器同步备份数据表记录

    添加记录到新记录表 DELIMITER $$ USE `DB_Test`$$ CREATE /*!50017 DEFINER = 'root'@'%' */ TRIGGER `InsertOPM_Al ...