grid布局快速入门

mist14 发布于2019-08-02 11:08 / 1686人阅读

摘要：布局快速入门常用布局属性介绍下面从一个简单布局例子说起。布局由两个核心组成部分是父元素和子元素。是实际的网格，是网格内的内容。让我们创建列和行。的个值表示三列，相应的数值表示列宽即都为。

Grid布局快速入门 常用Grid布局属性介绍

下面从一个简单Grid布局例子说起。
CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。

下面是一个 wrapper 元素，内部包含6个 items ：

要把 wrapper 元素变成一个 grid(网格)，只要简单地把其 display 属性设置为 grid 即可

.wrapper {
    display: grid;
}

Columns(列) 和 rows(行)

为了使其成为二维的网格容器，我们需要定义列和行。让我们创建3列和2行。我们将使用grid-template-row和grid-template-column属性。

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

grid-template-columns的3个值表示三列，相应的数值表示列宽即都为100px。
grid-template-rows的2个值表示两行，相应的数值表示行高即都为50px

得到的结果如下：

我们可以变化一下行高跟列宽的值看下效果，代码：

.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 100px 50px;
}

效果图：

持续更新，欢迎大家指导！

云服务器 GPU云服务器布局入门前端快速入门云计算快速入门 css快速入门

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

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

grid布局快速入门

摘要：布局快速入门常用布局属性介绍下面从一个简单布局例子说起。布局由两个核心组成部分是父元素和子元素。是实际的网格，是网格内的内容。让我们创建列和行。的个值表示三列，相应的数值表示列宽即都为。 Grid布局快速入门常用Grid布局属性介绍下面从一个简单Grid布局例子说起。CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实...

silvertheo 2019-08-29 16:16 评论0 收藏0
翻译 | CSS网格（CSS Grid）布局入门

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

Ashin 2019-08-29 13:18 评论0 收藏0
前端入门24-响应式布局（BootStrap）

摘要：声明声明本篇内容摘抄自以下两个来源中文网感谢大佬们的分享。版本是全球最受欢迎的前端组件库，用于开发响应式布局移动设备优先的项目。官方示例官方示例版本，官方还没有中文教程，的中文教程倒是很齐全了。声明本篇内容摘抄自以下两个来源： BootStrap中文网感谢大佬们的分享。正文-响应式布局（BootStrap）这次想来讲讲一个前端开发框架：BootStrap BootStrap 目前...

lunaticf 2019-04-23 13:06 评论0 收藏0
css grid布局入门

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

wzyplus 2019-08-29 17:06 评论0 收藏0