css 布局之 display:grid

一种新的自适应布局方式 display:grid

分享一种新的布局方式，display: grid，用来解决一些卡片统计等布局问题，例如

达成这种卡片布局的效果，使用grid布局只要三行代码就能搞定
上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>display: grid 的使用</title><style>.box {width: 1600px;margin: 50px auto;height: 100px;display: grid;grid-template-columns: repeat(4,1fr);grid-column-gap: 80px;}.box div {border-radius: 4px;box-shadow: 2px 2px 5px #ccc;background: orange;}</style>
</head>
<body><div class="box"><div></div><div></div><div></div><div></div></div>
</body>
</html>

效果图（复制代码可查看）

而实现这种效果只需要三行主要代码

display: grid;
grid-template-columns: repeat(4,1fr);
grid-column-gap: 80px;

grid 主要属性：

属性	作用	参数
grid-template-columns	给grid元素内的子元素设置每行的限制和样式	像素 / fr / repeat
grid-template-rows	给grid元素内的子元素设置每列的限制和样式	像素 / fr / repeat
grid-row-gap	给grid元素内的子元素设置行间距	像素 / 百分比
grid-column-gap	给grid元素内的子元素设置列间距	像素 / 百分比
grid-gap	grid-column-gap和grid-row-gap的合并简写形式	grid-gap: grid-row-gap grid-column-gap
justify-items	子元素单元格内容的水平位置	start（左） / end（右） / center（中） / stretch（拉伸）
align-items	子元素单元格内容的垂直位置	start（上） / end（下） / center（中） / stretch（拉伸）
place-items	align-items属性和justify-items属性的合并简写形式	place-items: align-items justify-items

1.fr：将子元素平均分成一样的长度或宽度，比如两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
2.repeat：是一个函数，接受两个参数，第一个参数是重复的次数（本例中是4），第二个参数是所要重复的值，重复某种模式也是可以的
　　　　　比如：repeat(2, 1fr 2fr 1fr)

在本例中只使用了 grid-template-columns 和 grid-column-gap，定义了一行展示4个子元素，每个子元素长度平均分，间距80px
还有一些特殊属性表格中没有列出，只要掌握表格中的属性就可以简单的搭建出一些样式，就这样吧

css 布局之 display:grid相关推荐

CSS布局 ——从display，position， float属性谈起
页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...
前端学习——CSS布局
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.正常布局流 `display`属性弹性盒子(Flexbox) Grid布局浮动定位技术前言提示:这里可以 ...
【CSS布局】gird布局和flex布局
今天主要回顾一下CSS布局相关的问题 CSS CSS 是用来指定文档如何展示给用户的一门语言--如网页的样式.布局.等等. CSS布局正常布局流正常布局流 (normal flow) 是指在不对页 ...
GFC?一篇管饱(display:grid)
GFC GFC全称是**gridLavoutformatting context.**他就是网格布局格式上下文,是用于布局网格容器的一-块渲染区域. 其实把display设置为grid后,这个盒子就成 ...
css Table布局：基于display:table的CSS布局
两种类型的表格布局你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
css grid 自动高度_前端面试题：关于CSS布局
金三银四求职季各位同学面试是否顺利呢? 在这关键时刻小狮送上前端面试题一份有用就赶紧收藏起来吧!!! 1 Q:三栏布局,高度已知,左右两栏固定,中间自适应的三栏布局有几种实现方式,各自的优缺点是 ...
html中grid布局,CSS：玩转grid布局
grid介绍针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法.不管以前的采用什么布局方法都可以说是一维的布局方式,而Grid最大的特色,是一个基于 ...
display:grid 布局实现两行两列
display:grid 布局实现两行两列,如图效果: 下面展示一些内联代码片. // A code block div容器部分 // An highlighted block<div cla ...
CSS布局—网格布局Grid（一）
CSS网格可以定义由行和列组成的二维布局,然后将元素放置到网格中.有些元素可能只占据网格的一个单元,另一些元素则可能占据多行或多列.网格的大小既可以精确定义,也可以根据自身内容自动计算.你既可以将元素 ...

css 布局之 display:grid

一种新的自适应布局方式 display:grid

css 布局之 display:grid相关推荐

最新文章

热门文章