Grid布局 - 一键布局尝试总结~

2019-05-15 admin

Gird布局是什么?

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

Gird布局 撸完后是什么样子?

此处输入图片的描述

进入你的第一个Grid布局

HTML 代码: box父元素,内部包含6个子元素 items

<div class="box">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
</div>

要把box变成 grid(网格),只简单地把display 属性设置为 grid 即可:

.box{
    display:grid;
}

此处输入图片的描述 当然现在的上图和grid没什么关系,但是请记住“她”最后的样子~~


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

CSS代码 ->

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

grid-template-columns 创建列;创建几列就在后面写几个值; grid-template-rows 创建行;创建几行就在后面写几个值; 结果: 此处输入图片的描述

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

CSS代码

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

请尝试理解上面的代码,思考一下以上代码会产生怎样的布局。

这是上面代码的布局的结果: 此处输入图片的描述 是不是非常好理解,使用起来也非常简单是不是?

深入探究推荐参考:

[转载]原文链接:https://segmentfault.com/a/1190000019192944

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65036.html

文章标题:Grid布局 - 一键布局尝试总结~

相关文章
jQuery的一些技巧大放送
1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与d...
2015-11-11
JS生成一维码(条形码)功能示例
本文实例讲述了JS生成一维码(条形码)功能的方法。分享给大家供大家参考,具体如下: 1、js代码: (function() { if (!exports) var exports = window; var BARS = [212...
2017-03-01
Bootstrap table简单使用总结
最近接触一个很棒的插件,Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真的很实用。 构造方式 1 、HTML &lt;div clas...
2017-03-17
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
js获取数组的最后一个元素
在js里面如何获取一个数组的最后一个元素呢?这里总结了两种方法,有需要的朋友可以看看。 (1)js内置pop方法 pop() 方法用于删除并返回数组的最后一个元素,注意这里在获取了数组的最后一个元素的同时也将原数组的最后一个元素给删除了。如...
2017-03-22
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
JavaScript获取本周周一,周末及获取任意时间的周一周末功能示例
本文实例讲述了JS获取本周周一,周末及获取任意时间的周一周末功能。分享给大家供大家参考,具体如下: 项目需要获取本周及任意一天的周一及周末 需格式化,示例代码如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F...
2017-03-17
javascript 中的try catch应用总结
&lt;script language=&quot;javascript&quot;&gt; try { throw new Error(10,&quot;asdasdasd&quot;) } catch (e) { alert(e.mes...
2017-04-05
回到顶部