grid网格的流动grid-auto-flow属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
background: orange;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 3em;
margin-right:15px;
}
.box:nth-child(even) {
background: green;
}
.wrapper {
width: 560px;
border: 1px solid orange;
padding: 15px;
display: grid;
grid-template-columns: repeat(5, 115px);
/*第一行高115px,第二行高100px*/
grid-template-rows: repeat(1, 115px);
/*默认是:row*/
grid-auto-flow:column;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
</div>
</body>
</html>
grid网格的流动grid-auto-flow属性的更多相关文章
- grid网格的流动一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- grid网格的流动定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS Grid 网格布局全解析
介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...
- grid - 网格项目对齐方式（Box Alignment）
CSS的Box Alignment Module补充了网格项目沿着网格行或列轴对齐方式. <view class="grid"> <view class='ite ...
- Grid 网格布局
CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统. 你可以通过将CSS规则应用于父元素 ...
- CSS Grid网格布局全攻略
CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
- CSS 之Grid网格大致知识梳理1
CSS所提供的关于网格Grid属性让我们可以更方便编写页面以及布局,而它的一些主要应用属性如下: 1.将父容器的display属性值设置为grid 即可将其转换为网格容器: 2.在网格容器中添加列的属 ...
- CSS Grid 网格布局教程
一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
- 【CSS】343- CSS Grid 网格布局入门
CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...
随机推荐
- springboot读取resource下的文本文件
https://blog.csdn.net/programmeryu/article/details/58002218 文本所在位置: 获取ZH.txt: File file = ResourceUt ...
- etl的表输入时精度问题
SELECT RecipeID, IngredientID as ingre_id, ROUND(Quantity, 5) Quantity, Preparation, RecipeIngredien ...
- 使用JS和JQuery 阻止表单提交的两种方法
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- .net操作oracle，一定要用管理员身份运行 visual studio 啊，切记切记，免得报奇怪的错误。
.net操作oracle,一定要用管理员身份运行 visual studio 啊,切记切记,免得报奇怪的错误.
- 安卓程序代写 网上程序代写[原]ViewGroup(容器组件)详解(API解析)
一. ViewGroup简介 1.View和ViewGroup关系 UI组件在Android中的位置 : Android中的UI组件大部分都放在android.widget 或者 android.vi ...
- 【5】JVM-垃圾收集器
通过学习了解到现在商用的JVM中的垃圾收集采用的是分代收集算法,即针对不同年代采用不同的收集算法.在JVM中,GC主要作用于堆内存中,堆内存又被划分为新生代和老年代,由于新生代对象绝大多数是朝生夕死, ...
- Idea maven项目不能新建package和class的解决
如图,新建的maven项目不能新建package 这是因为Java是普通的文件夹,要设置为 现在就可以了
- mysql小题趣事
题一 答案: case when +条件 +then 显示什么 +else+显示另外什么+end
- SAP财务供应链与金库管理的联系与区别
SAP Treasure Module & Cash Fund , Risk Management 本文简要阐述一下什么是财务供应链管理(FSCM),什么是金库管理(Treasury Ma ...
- 解决git pull 每一次都需要输入密码的问题
方法1: 当我们配置好我们的git以后呢,我们可以在配置文件~/.gitconfig 或 ~/.config/git/config 文件里加入这么两行: [credential] helper = s ...