CSS Grid(CSS网格)
Grid被设计来做一些Flexbox不能做的事情，所以不是被设计来取代Flexbox的。
flexbox 一维的
Grid 二维的
总结:
Grid Items作用在Grid Container的直接子元素下
下面给出一些示例：
1.html:
2.html:
<style>
.wrapper{
display: grid;
/* grid-template-columns:1fr 1fr 1fr; fr的意思是fraction，就是分数 ，x分之一*/
grid-template-columns: repeat(3,1fr);
/* grid-template-columns: repeat(4,1fr 2fr); */
grid-gap:1em;
grid-auto-rows: 100px; (注意看这个属性)
}
.wrapper>div {
background: #eee;
padding: 1em;
}
.wrapper>div:nth-child(odd) {
background: #ddd;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
Lorem ipsum dolor sit.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam cumque possimus eveniet aliquid. Impedit delectus architecto veritatis? Tempora cupiditate esse odio placeat doloribus nisi quaerat laudantium dolor, illum laborum consequuntur eaque est minus? Ex quae eius expedita dolor ab possimus.
</div>
<div>
Lorem ipsum dolor sit.
</div>
<div>
Lorem ipsum dolor sit.
</div>
<div>
Lorem ipsum dolor sit.
</div>
<div>
Lorem ipsum dolor sit.
</div>
<div>
Lorem ipsum dolor sit.
</div>
</div>
</body>
(grid-auto-rows属性)
.wrapper{
display: grid;
/* grid-template-columns:1fr 1fr 1fr; */
grid-template-columns: repeat(3,1fr);
/* grid-template-columns: repeat(4,1fr 2fr); */
grid-gap:1em;
/* grid-auto-rows: 100px; */
//最小100px 要是多了就拉伸
grid-auto-rows:minmax(100px,auto);
}
(grid-auto-rows:minmax(100px,auto);属性)
2.html完整代码
<style>
*{
margin:0;
padding:0;
}
.wrapper{
display: grid;
/* grid-template-columns:1fr 1fr 1fr; */
grid-template-columns: repeat(3,1fr);
/* grid-template-columns: repeat(4,1fr 2fr); */
grid-gap:1em;
/* grid-auto-rows: 100px; */
grid-auto-rows:minmax(100px,auto);
}
.nested{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-auto-rows:70px;
grid-gap:1em;
}
.wrapper>div {
background: #eee;
padding: 1em;
}
.wrapper>div:nth-child(odd) {
background: #ddd;
}
.nested > div{
border: #333 1px solid;
padding: 1em;
}
</style>
<body>
<div class="wrapper">
<div>
Lorem ipsum dolor sit.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam cumque possimus eveniet aliquid. Impedit delectus architecto veritatis? Tempora cupiditate esse odio placeat doloribus nisi quaerat laudantium dolor, illum laborum consequuntur eaque est minus? Ex quae eius expedita dolor ab possimus.
</div>
<div class="nested">
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
</div>
<div>
Lorem ipsum dolor sit.
</div>
<div>
Lorem ipsum dolor sit.
</div>
<div>
Lorem ipsum dolor sit.
</div>
<div>
Lorem ipsum dolor sit.
</div>
</div>
</body>
3.html:
<style>
*{
margin:0;
padding:0;
}
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-auto-rows: minmax(100px ,auto);
grid-gap:1em;
justify-items: start;(注意看这里)
}
.wrapper>div {
background: #eee;
padding: 1em;
}
.wrapper>div:nth-child(odd) {
background: #ddd;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box1">Box 1</div>
<div class="box box2">Box 4</div>
<div class="box box3">Box 4</div>
<div class="box box4">Box 4</div>
</div>
</body>
(justify-items:center)
(justify-items:end)
(justify-items:stretch) //default
(align-items:start)
(align-items:center)
(align-items:end)
(align-items:stretch) //default
LineNumbers
grid-column:1/3;
(without)
(with)
.box1{
grid-column:1/3;
/* this means 'one' to 'three' */
}
.box1{
/* align-self:start; */
grid-column:1/3;
grid-row: 1/3;
/* this means 'one' to 'three' */
}
.box2{
grid-column: 3;
grid-row: 1/3;
/* align-self: end; */
}
.box3{
grid-column: 2/4;
grid-row: 3;
/* justify-self: end; */
}
.box4{
grid-column: 1;
grid-row: 2/4;
}
(overlap重叠)
CSS Grid(CSS网格)的更多相关文章
- CSS--使用CSS Grid（网格）布局
.一 CSS Grid(网格布局)简介 CSS Grid 布局由两个核心组成部分是父元素和子元素,父元素 是实际的 grid(网格),子元素是 grid(网格) 内的内容.下面是一个父元素和六个子元素 ...
- CSS Grid基于网格的二维布局系统(详细教程)
.grid-wrap{ display: inline-flex; padding: 20px; background: #f4f4f4; word-break: initial; } .handle ...
- CSS Grid 网格布局全解析
介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...
- CSS Grid网格布局全攻略
CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
- CSS Grid 网格布局教程
一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
- 轻松上手CSS Grid网格布局
今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...
- css - Grid网格布局
.wrapper{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 1 ...
- css grid 网格布局
前几天研究了一下这个布局方式,笔记待更新 先放一下学习站点 文档 我应该尝试使用CSS Grid Layout的IE实现吗 https://hacks.mozilla.org/2018/02/css- ...
- CSS Grid layout布局
CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.你只需要定义一个容器元素并设置display:grid,使用gr ...
随机推荐
- Linux-workqueue讲解
============= 参考 ============= 代码:linux-3.10.65/kernel/workqueue.c =============================== ...
- Vue学习之路第十三篇：v-for指令
v-for指令,看名字想必大家也能猜到其作用,没错,就是用来迭代.遍历的. 1.简单数组的遍历 <body> <divi id="app"> <spa ...
- LVS的使用
lvs: Linux Virtual Server l4:四层交换:四层路由: 根据请求报文的目标IP和PORT将其转发至后端主机集群中的某一台主机(根据挑选算法): netfilter: PRERO ...
- nodejs-基础大杂烩（待整理）
优点:安装简易,能自动配置环境变量 缺点:更新和更换版本需重新安装(这个可以用包管理器解决,不是问题) 高手推荐使用开源的NVM包管理器来更新和安装node,可能这个包在linux平台上比较好用吧 g ...
- rabbitMQ学习笔记(三) 消息确认与公平调度消费者
从本节开始称Sender为生产者 , Recv为消费者 一.消息确认 为了确保消息一定被消费者处理,rabbitMQ提供了消息确认功能,就是在消费者处理完任务之后,就给服务器一个回馈,服务器就会将 ...
- 数据库连接池dataesoruce pool深入理解
8.数据库连接池的connection都是长连接的,以方便多次调用,多人连续使用.dataSourcePool9.数据库连接池中的连接,是在你用完之后,返回给数据库连接池的,并不是close()掉,而 ...
- 《编程导论（Java）·7.4.4 String对象问题》
String是Java API中使用频率第一的类,曾经在CSDN论坛上.至少每一个月都有相关的贴子,讨论==和equals(). 本节介绍这一部分的内容,也有一个重要更正. String文字在程序中被 ...
- hibernate 管理 Session(单独使用session，非spring)
Hibernate 自身提供了三种管理 Session 对象的方法 Session 对象的生命周期与本地线程绑定 Session 对象的生命周期与 JTA 事务绑定 Hibernate 托付程序管理 ...
- flume採集数据导入elasticsearch 配置
Flume启动通常会报两种错,一种是log4j没有配置,第二种就是缺少各种jar包.SO: [root@laiym ~]# cp /usr/local/elasticsearch/lib/*/usr/ ...
- 【1】按照Django官网，编写一个web app 创建project/配置数据库
1. Creating a project From the command line, cd into a directory where you'd like to store your code ...