Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工具。

轻松使用 Grid 布局提高开发效率,对复杂的网页结构布局更加灵活。

一、概述

Grid 将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。网格是一组相交的水平线和垂直线,它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。

我们比较熟悉的比如说坐标轴,坐标点;如果你看到上面这样一个网格首先想到是这不就是被淘汰的表格吗,表格之所以被淘汰最主要在性能方面,然而我们不得不承认表格对于整个网页的布局来说有一定的便利性。那么现在的网格布局就可以把表格里面的一些较好的方便的东西抽出来,然后把性能方面较差的地方去掉,所以说网格布局会成为将来互联网企业的一个热潮是有原因的。

网格布局的优势

固定的位置和弹性的轨道的大小

你可以使用固定的轨道尺寸创建网格,比如使用像素单位。你也可以使用比如百分比或者专门为此目的创建的新单位 fr来创建有弹性尺寸的网格。

元素位置

你可以使用行号、行名或者标定一个网格区域来精确定位元素。网格同时还使用一种算法来控制未给出明确网格位置的元素。

创建额外的轨道来包含元素

可以使用网格布局定义一个显式网格,但是根据规范它会处理你加在网格外面的内容,当必要时它会自动增加行和列,它会尽可能多的容纳所有的列。

对齐控制

网格

java中GRID_size的作用_Grid布局简介相关推荐

  1. Java中static的作用

    Java中static的作用 请先看下面这段程序: public class Hello{ public static void main(String[] args){ //(1) System.o ...

  2. 第64节:Java中的Spring Boot 2.0简介笔记

    Java中的Spring Boot 2.0简介笔记 spring boot简介 依赖java8的运行环境 多模块项目 打包和运行 spring boot是由spring framework构建的,sp ...

  3. Java中接口的作用,为什么要写接口?

    ** Java中接口的作用 转载于:https://www.zhihu.com/question/20111251 ** **困惑:**例如我定义了一个接口,但是我在继承这个接口的类中还要写接口的实现 ...

  4. Java中重载的作用?

    Java中重载的作用? 重载定义:一个类中如果有多个同名方法但带有不同的参数列表,称为方法重载(Overload). 重载方法的参数列表不同是指参数的数据类型或个数或次序不同. 重载方法之间必须以参数 ...

  5. Java中System.exit()方法的功能简介说明

    转自: Java中System.exit()方法的功能简介说明 下文笔者讲述java代码中System.exit()方法的功能简介说明,如下所示: Java中System.exit()方法功能:此方法 ...

  6. java中*和**的作用 以及 /和/*和/**的区别

    一.java中*和**的作用 "*"就表示了所有的文件,但是"*"并不包括子目录下的文件: "**"匹配包含任意级子目录中所有的文件: 二. ...

  7. 记录一下Java中final的作用

    记录一下Java中final的作用   final关键字可以修饰类.成员变量.方法.以及方法中的局部变量. 1.final修饰类   可以使用final将类声明为final类.final类不能被继承, ...

  8. java中的静态变量的作用域_详解JAVA中static的作用

    1.深度总结 引用一位网友的话,说的非常好,如果别人问你static的作用:如果你说静态修饰 类的属性 和 类的方法 别人认为你是合格的:如果是说 可以构成 静态代码块,那别人认为你还可以: 如果你说 ...

  9. java中包装类的作用

    Java中包装类的作用 一.包装类是什么 包装类就是解决java的八种基本数据类型不面向对象的缺陷,而设计出来的一个个与每一个与基本类型相对应的类,这八种基本数据类型对应的类统称包装类(Wrapper ...

最新文章

  1. 【洛谷p1313】计算系数
  2. 前百度面试官整理的——Java后端面试题(一)
  3. MongoDB:快速入门,掌握这些刚刚好!
  4. Netty方法误解ChannelHandlerContext.writeAndFlush(Object msg)
  5. 【Linux网络编程】并发服务器之多线程模型
  6. C# WPF:初识布局容器
  7. oracle云数据库 免费的吗,使用免费的Oracle云服务-创建ATP数据库
  8. 宋体配置JAVA j2ee (一) 轻松入门
  9. LeetCode 1566. 重复至少 K 次且长度为 M 的模式
  10. html 点击隐藏特效代码,vueJS简单的点击显示与隐藏的效果(实现代码)
  11. 中介者模式php,PHP设计模式之中介者模式
  12. selenium安装包_??《手把手教你》系列基础篇之1-python+ selenium自动化测试-环境搭建(详细)...
  13. 读书笔记 摘自:《斯坦福极简经济学》
  14. 微信小程序:酒桌扑克娱乐喝酒小游戏
  15. win10家庭版设置本地策略组
  16. java的pdf转永中_永中PDF转Word,你值得拥有!
  17. Git git update-index --assume-unchanged
  18. python 基础代谢率计算_基于python实现计算且附带进度条代码实例
  19. Distantly Supervised Named Entity Recognition using Positive-Unlabeled Learning(DS——NER识别(减少人工参与))
  20. qq家园文字版二战风云的建筑类型

热门文章

  1. 【Java-数据类型】
  2. unity中禁用或启用游戏对象
  3. 北美哪些跨境电商平台十大排行榜
  4. OllyDbg 官网及下载地址
  5. 选择语句switch和循环语句while
  6. Linux0.11 execve函数(六)
  7. Spring 学习笔记----->AOP
  8. 移动互联网时代 移动生活的碎片化解决方案
  9. 算法基础: 什么是红黑树?
  10. 一分钟搞懂中小型企业网络架构