自从用习惯flex布局我基本已经不怎么使用float了。
现在又出现了grid布局，就像flex的升级版，布局上十分强大。
主要属性：
grid-template-columns：//竖向排列
grid-template-rows：//横向排列
首先比较一下flex和grid实现自适应九宫格，高度800px，宽度适应：

flex

超过一层后样式就复杂了，特别是边框的处理有点复杂。(方法很多，不一一去展示了)。

<html>

<head>

  <style type="text/css">

   .box {

      padding: 10px;

      padding-bottom: 0;

      padding-right: 0;

      display: flex;

      flex-direction: column;

      height: 800px;

      width: calc(100vw - 20px);

      background-color: #000;

    }

    .content {

      display: flex;

      margin-bottom: 10px;

      flex: 1

    }

    .b {

      flex: 1;

      margin-right: 10px;

      background-color: yellow;

    }

  </style>

</head>

<body>

  <div class="box">

    <div class="content">

      <div class="b">1</div>

      <div class="b">2</div>

      <div class="b">3</div>

    </div>

    <div class="content">

      <div class="b">4</div>

      <div class="b">5</div>

      <div class="b">6</div>

    </div>

    <div class="content">

      <div class="b">7</div>

      <div class="b">8</div>

      <div class="b">9</div>

    </div>

  <div>

</body>

</html>

 

 
flex

grid

真的好用！方法也可以有很多，相对flex而言写起来简单多了哈

<html>

<head>

  <style type="text/css">

    .content {

      padding: 10;

      display: grid;

      grid-template-columns: auto auto auto;

      grid-template-rows: auto auto auto;

      height: 780px;   //padding 有个20的宽度

      background-color: #000;

      grid-gap: 10px;

    }

    .b {

      background-color: yellow;

    }

  </style>

</head>

<body>

  <div class="content">

    <div class="b">1</div>

    <div class="b">2</div>

    <div class="b">3</div>

    <div class="b">4</div>

    <div class="b">5</div>

    <div class="b">6</div>

    <div class="b">7</div>

    <div class="b">8</div>

    <div class="b">9</div>

  </div>

</body>

</html>

效果图：

 
grid
接下来就只讲grid了。

常用属性，属性很多，主要练习下常用的一些属性：

  • grid: 1fr 1fr 1fr/1fr 1fr 1fr ; 高度 高度 高度/(一)列 (二)列 (三) 列
grid: 100px 200px 100px /1fr 1fr 1fr;

等于：

grid-template-rows: 100px 200px 100px;

grid-template-columns: 1fr 1fr 1fr;

grid-template-areas: none;

grid-auto-flow: initial;

grid-auto-rows: initial;

grid-auto-columns: initial;

  • grid-template-columns: 100px 100px; //有几列，每列有多大

  • grid-template-rows :100px 100px; //有几行，每行有多大

  • grid-template: [] '1 1 1' 100px [] /auto 50px auto;
    //[名称] '几列' 这行的高度 [名称] /三列对应的三个宽度
    //（名称可为空 '1 1 1' 就是均分三列）

  • grid-gap: 10px 20px ;//上下间隔10px，左右间隔20px

  • grid-gap: 10px；//上下左右间隔10px

  • grid-column-gap

  • grid-row-gap

  • justify-items：
    start：将内容对齐到网格区域(grid area)的左侧
    end：将内容对齐到网格区域的右侧
    center：将内容对齐到网格区域的中间（水平居中）
    stretch：填满网格区域宽度（默认值）

  • align-items：
    start：将内容对齐到网格区域(grid area)的顶部
    end：将内容对齐到网格区域的底部
    center：将内容对齐到网格区域的中间（垂直居中）
    stretch：填满网格区域高度（默认值）

  • justify-items：
    start：将网格对齐到 网格容器(grid container) 的左边
    end：将网格对齐到 网格容器 的右边
    center：将网格对齐到 网格容器 的中间（水平居中）
    stretch：调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度
    space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
    space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
    space-evenly：在每个栅格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间

  • align-content：
    start：将网格对齐到 网格容器(grid container) 的顶部
    end：将网格对齐到 网格容器 的底部
    center：将网格对齐到 网格容器 的中间（垂直居中）
    stretch：调整 网格项(grid items) 的高度，允许该网格填充满整个 网格容器 的高度
    space-around：在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间
    space-between：在每个网格项之间放置一个均匀的空间，上下两端没有空间
    space-evenly：在每个栅格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间

这是主体上常用的一些属性了，不想做文档解释了。讲属性的文章挺多的，主要就是练习，多用用。

原文：https://www.jianshu.com/p/41c038baf994

强大的display:grid的更多相关文章

  1. display:grid

    使用grid布局 参考资料http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html flex布局还没完全用利索,但这个grid布 ...

  2. CSS3中的display:grid网格布局介绍

    1.网格布局(grid): 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局; 2.基本概念: 容器和项目,如图所示: <div class="content&qu ...

  3. 前端CSS3布局display:grid用法

    前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...

  4. 关于display：grid layout

    .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: min ...

  5. display：grid

    <!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8" ...

  6. css：display：grid布局

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

  7. [转]使用CSS3 Grid布局实现内容优先

    使用CSS3 Grid布局实现内容优先  http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...

  8. grid栅格布局

    前面的话 Grid布局方式借鉴了平面装帧设计中的格线系统,将格线运用在屏幕上,而不再是单一的静态页面,可以称之为真正的栅格.本文将详细介绍grid布局 引入 对于Web开发者来说,网页布局一直是个比较 ...

  9. CSS Grid基于网格的二维布局系统(详细教程)

    .grid-wrap{ display: inline-flex; padding: 20px; background: #f4f4f4; word-break: initial; } .handle ...

随机推荐

  1. Spark2.x（五十七）：User capacity has reached its maximum limit（用户容量已达到最大限制）

    背景: 目前服务器资源是43个节点,每个节点配置信息如下:24VCores 64G yarn配置情况: yarn.scheduler.minimum-allocation-mb  单个容器可申请的最小 ...

  2. N以内的素数计算(Java代码)

    列出小于N的所有素数 普通计算方式, 校验每个数字 优化的几处: 判断是否整除时, 除数使用小于自身的平方根的素数 大于3的素数, 都在6的整数倍两侧, 即 6m - 1 和 6m + 1 publi ...

  3. PostgreSQL--with子句

    在PostgreSQL中,WITH查询提供了一种编写辅助语句的方法,以便在更大的查询中使用.它有助于将复杂的大型查询分解为更简单的表单,便于阅读.这些语句通常称为公共表表达式(Common Table ...

  4. python的super深入了解（转）

    1.python的继承以及调用父类成员 python子类调用父类成员有2种方法,分别是普通方法和super方法 假设Base是基类 class Base(object): def __init__(s ...

  5. zk单点部署

    一.环境准备 当前环境:centos7.3一台软件版本:zookeeper-3.5.2部署目录:/usr/local/zookeeper启动端口:2181配置文件:/usr/local/zookeep ...

  6. python脚本容器化

    https://blog.csdn.net/zstack_org/article/details/53099919 如何选择 base image: https://blog.csdn.net/nkl ...

  7. [LeetCode] 12. Integer to Roman 整数转为罗马数字

    Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M. Symbol Value I 1 ...

  8. [LeetCode] 244. Shortest Word Distance II 最短单词距离 II

    This is a follow up of Shortest Word Distance. The only difference is now you are given the list of ...

  9. 最新 物易云通java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.物易云通等10家互联网公司的校招Offer,因为某些自身原因最终选择了物易云通.6.7月主要是做系统复习.项目复盘.Leet ...

  10. 启动3ds Max报 d3dx9_43.dll丢失 解决方法

    d3dx9_43.dll文件与Microsoft DirectX关联.负责启动基于Windows的游戏和高级图形程序. 在360安全卫士上搜索了 DirectX 下载了这个修复工具 运行应用 点击修复 ...