Grid布局

levy9527 发布于2019-08-02 15:10 / 2690人阅读

摘要：布局是什么网格布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格能够将网页分成具有简单属性的行和列来完成我们需要的网格布局。布局由两个核心组成部分是父元素和子元素。是实际的网格，是网格内的内容。

Gird布局是什么？

Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格 ; 能够将网页分成具有简单属性的行和列来完成我们需要的网格布局。

CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。

下面是一个父元素，内部包含6个子元素：

为了使其成为二维的网格容器，我们需要定义列和行：
创建3行(columns)2列(rows)

 .box{           
            display: grid;
            grid-template-columns: 50px 50px 50px;
            grid-template-rows: 50px 50px;
        }

grid-template-columns 创建列；创建几列就在后面写几个值；
grid-template-rows 创建行；创建几行就在后面写几个值；

效果图为：

为了确保能正确理解这些值与网格外观之间的关系，请看一下这个例子。

CSS代码

.box{
          display: grid;
          grid-template-columns: 300px 150px 50px;
          grid-template-rows: 150px 50px;
        }

效果为：

是不是非常好理解，使用起来也非常简单是不是？

觉得对您有帮助，麻烦您点个关注，如有不足，请多指教！

idc机房托管服务器托管 Grid extjs grid grid++主子报表 Grid组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53950.html

翻译 | CSS网格（CSS Grid）布局入门

摘要：浏览器兼容性网格布局从开始收到支持，微软在会更新对网格布局的支持。微软的浏览器和有一种比较旧的实现，所以有不少限制，我们会简单介绍新的实现方式和老的实现方式之间的区别，这样你能知道如何规避他们。原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 译者：华翔校对者：珂珂、干干翻译 | CSS网格（CSS Grid）布局入...

Ashin 2019-08-29 13:18 评论0 收藏0
Grid布局——页面布局如此简单

摘要：网格单元格被划分之后每一个格子就是单元格，也是布局的最小单位。网格区域若干个单元格拼接而成的区域。网格间隙单元格与单元格之间的距离，可以垂直也可以水平。前言 CSS网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。像表格一样，网格布局让我们能够按行或列来对齐元素。但是，使用CSS网格可能还是比CSS表格更容易布局。例如，网格容器的子元素可...

Scorpion 2019-08-30 15:55 评论0 收藏0
css grid布局入门

摘要：简介网格布局又称网格，是一种二维网格布局系统。在处理网页布局方面一直做的不是很好。网格容器中的所有子元素就会自动变成网格项目网格线组成网格线的分界线。简介 CSS网格布局（又称网格），是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table（表格）布局，然后用float(浮动)，position（定位）和inline-block（行内块）布局，但是...

wzyplus 2019-08-29 17:06 评论0 收藏0
CSS Grid 读书笔记

摘要：和绝对定位和绝对定位如果父容器有定位标识等，那么下面的子会根据原始它们应该布局的位置定位，反之如果父容器没有定位标识，那么应用了会脱离布局，并且按照传统的方式布局。基本概念 MDN上的解释是这样的 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in term...

liuhh 2019-04-23 13:22 评论0 收藏0
如何使用Flexbox和CSS Grid，实现高效布局

摘要：代码如下页面内容样式接下来，将侧边栏和主内容区域使用一个包含起来。列和行布局部分横跨所有的列。也可以使用简写，起始值和结束值位于同一行上，并用斜杠分隔。设计方法总结以上的布局设计中，使用了来进行整体布局以及设计中的非线性部分。 CSS 浮动属性一直是网站上排列元素的主要方法之一，但是当实现复杂布局时，这种方法不总是那么理想。幸运的是，在现代网页设计时代，使用 Flexbox 和 CSS...

eternalshallow 2019-08-29 13:29 评论0 收藏0
CSS Grid布局：网格单元格布局

摘要：基于网格线的占位区网格中的单元格是有网格线划分出来的，那么在网格布局中，同样可以使用网格线来给子元素设置占位区域。也就是说这四条网格线间的区域是一个单元格。 CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局：什么是网格布局》和《[CSS Grid布局：浏览器开启CSS Grid Layout]ht...

maxmin 2019-08-28 18:03 评论0 收藏0