css 中的grid布局基础
CSS Grid Layout为CSS引入了一个二维网格系统。网格可用于布局主要页面区域或小型用户界面元素。
网格是一组交叉的水平和垂直线 - 一组定义列，其他行。元素可以放在网格上，以行或者列为标准。
grid布局的优点：
1：固定和灵活的轨道尺寸
2：可以使用行号，名称或通过定位网格区域将项目放置在网格上的精确位置。网格还包含一种算法，用于控制未在网格上显示位置的项目的放置。
3：在需要时添加其他行和列
4：网格包含对齐功能，以便我们可以控制项目放置到网格区域后的对齐方式，以及整个网格的对齐方式。
5：可以将多个项目放入网格单元格或区域中，它们可以彼此部分重叠。然后可以用z-index属性控制该分层。
父元素必须设置display为grid或inline-grid
父元素grid属性：
- grid-template-columns（row）：设置网格的列(行)，每一个值就代表创建那行（列）的列（行）宽
- fr：代表容器的可用空间，等份的分成对应份数。
- minmax()：设置创建网格的最大值或最小值，此函数接受两个参数，第一个参数定义最小值，第二个值为最大值，auto值允许尺寸拉伸，
- repeat()：创建重复的轨道，此函数接受两个参数，第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。
- grid-column（row）-gap：设置列与列(行与行)之间的间距
grid子元素的属性：
- grid-column-start/grid-column-end：设置列线的开始和结束位置
- grid-row：是grid-row-start和grid-row-end的简写，当设置为一个值时，代表列的开始位置，
- grid-column：当设置为一个值时，代表行的开始位置，
- span：span后面紧随数字，表示合并多少个列或行
- grid-area：四个值，第一个值对应grid-row-start，第二个值对应grid-column-start，第三个值对应grid-row-end，第四个值对应grid-column-end 分别代表行列开始，行列结束。
<!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>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.wrapper div{
background-color: aquamarine;
}
.one {
grid-column: 1 / 3;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}
</style>
<body>
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</body>
</html>
css 中的grid布局基础的更多相关文章
- 图文详解前端CSS中的Grid布局，你真的可以5分钟掌握
前言 网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式. 今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式. CSS 第一个Grid布局 首先我们看看 ...
- CSS中常见的布局
一.css中常见的布局有哪些? (1)两列布局 (2)三列布局 (3)弹性布局 (4)圣杯布局 (5)双飞翼布局 二.具体实现 (1)两列布局 https://www.cnblogs.com/qin ...
- css中的那些布局
因为最近心血来潮,就总结了一下css中的几种常见的多列布局. 两列自适应布局 两列自适应布局算是css布局里面最基础的一种布局了,不少网站在使用. 这种布局通常是左侧固定,右边自适应,当然也有反过来的 ...
- wpf后置代码中的Grid布局以及图片路径的设置
之前用Grid练习连连看布局时,遇到了几个困惑.此次就把当时的一些收获写出来,供以后翻看. 图片路径可能比较常用,所以就写在第一个了. 在xaml中,设置图片非常简单,只要把图片拷贝到资源目录(这里假 ...
- 从实例中学习grid布局
对于Web开发者来说,网页布局一直是个比较重要的问题. Web 布局主要经历了以下四个阶段: 1.table表格布局: 2.float浮动及position定位布局: 3.flex弹性盒模型布局,革命 ...
- css 中 stick footer 布局实现
做项目中,我们在写弹框的时候,不管弹框的内容多或者少,可能需要一些内容需要固定在框底部,比如关闭按钮.stick footer 就是让 footer 元素固定在底部 当内容不足满屏时,footer 紧 ...
- css中的圣杯布局和双飞翼布局
圣杯布局 布局要求: 三列布局,中间自适应,两边定宽 中间栏要在浏览器优先渲染 允许任意列的高度最高 用最简单的CSS.最少的HACK语句 解释说明: 1.min-width:700px是为了当页面缩 ...
- 使用css中的flex布局弹性手风琴效果
不多说,直接上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- CSS中的圣杯布局与双飞翼布局
一,圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局 2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左.中.右): 2. ...
随机推荐
- Spring 的@@Autowired 和 @Qualifier注释
@Autowired spring2.1中允许用户通过@Autowired注解对Bean的属性变量.属性Setter方法以及构造方法进行标注,配合AutowiredAnnotationBeanProc ...
- 力扣（LeetCode） 27. 移除元素
给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...
- jGrid + echart 后台管理
用来初始化表的大小: $(select_dom).jqGrid( 'setGridWidth', parent_column.width() ); 表的大小随着页面的宽度变化: $(window).o ...
- lua --- Module
首先需要明白,一般情况下,我们的定义的lua模块的文件与模块名(其实就是table的名字)是一致的,当然,不一致代码也是可以编译的(亲测),之所以这样,本人认为是为了实际项目中管理的方便.以下是定义模 ...
- 梯度消失 / 梯度爆炸以及Xavier初始化
2018-12-06 16:25:08 首先我们先来看一下求解梯度的公式,以下面三层的网络为例: 如果w初始化为大于1的数字,在深层神经网络计算梯度的时候就会出现梯度爆炸的现象: 如果w初始化为小于1 ...
- 当实体类中entity/DTO/VO等类中，有枚举值，应该怎么输出？
当实体类中entity/DTO/VO等类中,有枚举值,应该怎么输出? 问题: orderStatus 和 payStatus都是枚举类,并且枚举的个数达地10来个,我们不可能在模板页面(jsp/ftl ...
- tomcat ----> 源码关联/编译/....
今天在搞Servlet时想看下tomcat Servlet-API.jar的源码,按照惯性思维用以往关联SSH2框架的源码的方式去做但是结果没有成功,尝试过换不同的文件夹,起初怀疑可能是路径太深关联不 ...
- English trip M1 - AC11 I Dreamed a Dream? 我做了一个梦 Teacher:Lamb
In this lesson you will learn to describe an experience. 这节课你讲学习到描述经历 课上内容(Lesson) 词汇(Key Word ) 句型 ...
- IntelliJ IDEA的这些配置，你值得拥有
一.自动编译开关 二.忽略大小写开关 IDEA默认是匹配大小写,此开关如果未关.你输入字符一定要符合大小写.比如你敲string是不会出现代码提示或智能补充.但是,如果你开了这个开关,你无论输入Str ...
- 关于Handler中Message的创建问题
Message用来定义一个包含任意数据的消息对象,这个消息对象是可以被发送给Handler处理的. 我们最好通过Message.obtain()和Handler.obtatinMessage()来得到 ...