css之grid layout代码解释
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);/*grid-template-columns CSS属性定义了网格列的行名称和跟踪大小调整函数。*/
grid-gap: 10px;/*gap CSS属性指定行和列之间的间隙(水槽)。这是行间隔和列间隔的简写。*/
grid-auto-rows: minmax(100px, auto);/*grid-auto-rows CSS属性指定隐含创建的网格行跟踪的大小。*/ /*repeat() CSS函数表示跟踪列表的重复片段,允许以更紧凑的形式编写大量显示重复模式的列或行。此函数可用于CSS网格属性网格模板列和网格模板行。*/
/*fr 单位是一个自适应单位,fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。*/
/*px是像素单位*/
color:red;
border: black;
/* style */
border: solid; /* width | style */
border: 2px dotted; /* style | color */
border: outset #f33; /* width | style | color */
border: medium dashed green; /* Global values */
border: inherit;
border: initial;
border: unset;
}
.one {
grid-column: 1 / 3;/*grid-column CSS属性是grid-column-start和grid-column-end的简写属性,用于指定网格项的大小和在网格列中的位置,
方法是为其网格位置提供一行、一个span或什么(自动)内容,从而指定网格区域的内联-start和内联-end边缘*/
grid-row:;;/*grid-row CSS属性是网格-行-开始和网格-行-结束指定网格项的大小和位置的简写属性,通过为其网格位置提供一行、一个span或什么(自动),
从而指定其网格区域的内联-开始和内联-结束边缘*/
}
.two { grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three { grid-column:;
grid-row: 2 / 5;
}
.four { grid-column:;
grid-row:;
}
.five { grid-column:;
grid-row:;
}
.six { grid-column:;
grid-row:; }
css之grid layout代码解释的更多相关文章
- css之Grid Layout详解
css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
- Gird Layout代码解释
<div class="wrapper"> <!--定义一个类名为wrapper的div盒子--> <div class="one" ...
- CSS中的 position与Grid Layout
[1]CSS之Position(定位布局): 现css常用的属性有5种: 1.static 2.absolute 3.fixed 4.relative 5.sticky. 1.static 表示元素的 ...
- CSS 对于grid布局的理解,举例代码及解释
网格布局介绍: CSS Grid(网格) 布局(又称为 “Grid(网格)” ),是一个二维的基于网格的布局系统它的目标是完全改变我们基于网格的用户界面的布局方式.CSS 一直用来布局我们的网页,但一 ...
- CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003
Title/ CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003 序 : 写完这篇文章后,我准备一直做下去了,包括flight的各个分区,也看到前方的路. ...
- CSS: Grid Layout Module
Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...
- [CSS] Get up and running with CSS Grid Layout
We’ll discuss the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid. Then ...
- CSS Grid Layout In Action
CSS Grid Layout In Action CSS 异形网格布局实战 refs https://static-nginx-online.fbcontent.cn/tutor/tutor-ybc ...
- css grid layout in practice
css grid layout in practice https://caniuse.com/#search=grid subgrid https://caniuse.com/#search=cal ...
随机推荐
- importlib模块与__import__详解
importlib模块与__import__都可以通过过字符串来导入另外一个模块,但在用法上和本质上都有很大的不同. 通过下面示例说明,有如下一个工程目录: name = 'test' def get ...
- uchome 常用函数示例
一.inserttable //添加数据 //前3个参数 $tablename插入的表名称 $insertsqlarr数据数组 $returnid是否返回插入ID function inserttab ...
- python高级之Flask框架
目录: Flask基本使用 Flask配置文件 Flask路由系统 Flask模版 Flask请求与响应 Flask之Session Flask之蓝图 Flask之message 中间件 Flask插 ...
- 5.7 Components — Sending Actions From Components to Your Application
一.概述 1. 当一个组件在模板中被使用时,它具有发送action到这个模板的controller和routes的能力.当重大事件发生的时候,这些允许组件通知application,比如点击组件一个特 ...
- cocos代码研究(17)Widget子类RadioButtonGroup学习笔记
理论基础 RadioButtonGroup可以把指定的单选按钮组织起来, 形成一个组, 使它们彼此交互. 在一个RadioButtonGroup, 有且只有一个或者没有RadioButton可以处于被 ...
- CSS样式有哪些常用的属性?
一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border CSS样式有哪些常 ...
- VS2010/MFC编程入门之二十四(常用控件:列表框控件ListBox)
前面两节讲了比较常用的按钮控件,并通过按钮控件实例说明了具体用法.本文要讲的是列表框控件(ListBox)及其使用实例. 列表框控件简介 列表框给出了一个选项清单,允许用户从中进行单项或多项选择,被选 ...
- python webdriver 报错WebDriverException: Message: can't access dead object的原因(pycharm中)
PyCharm中运行firefox webdriver访问邮箱添加通讯录的时候报错-WebDriverException: Message: can't access dead object 调了半天 ...
- centos6.5/6.6配置java环境以及数据库
配置java环境 一.解压jdk 二.配置环境变量 1.修改修改/etc/profile文件(推荐开发环境使用,因为所有用户shell都有权使用这些环境变量,可能带来环境问题) 在profile末尾加 ...
- 从e.getMessage()为null看Java异常机制
问题:自定义异常触发了,但是自定义的提示信息RuntimeException却没有带过来. throw new RuntimeException("不允许插入报价主项和报价子项同时重复的记录 ...