html中怎么设置栅格,[CSS] 栅格化布局
栅格化布局帮助你更容易构建复杂的网页设计。它会将HTML元素转换为网格的容器(有行有列)。你可以在网格里面添加你想要的子元素。
grid 初始化元素为栅格化
将一个HTML元素转换为网格的容器,只需要对其设置display: grid即可。display: grid告诉我们,可以使用CSS Grid的相关属性了。
- item1
- item2
- item3
- item4
- item5
- item6
复制代码
.container{
display: grid;
}
复制代码
⚠ 在CSS栅格布局中,父元素就是栅格容器(这里是class="container"的dl元素),其下的子元素为我们称为项目items
grid-template-columns 设置列数
上面我们已设定容器container为珊格化了,那么我们还得为这块圈起来的元素设置模版列数,表明列的区域。
.container{
min-width: 200px;
display: grid;
grid-template-columns: 100px 100px auto;
}
复制代码
grid-template-columns的属性值100px 100px auto的意思是将区域划分为三列,第一列和第二列的宽度都为100px,第三列的宽度为自适应。
grid-template-rows 设置行数
上面我们设置了列数,那么对应的,就有行数,我们来设置下模版行数。
.container{
min-height: 200px;
display: grid;
grid-template-rows: 60px auto;
}
复制代码
grid-template-rows的属性值60px auto的意思是将区域分为两行,第一行的高度固定为60px,而第二行的高度自适应。
单位的设置可以有px, auto, %, fr。这里的fr是fraction的缩写,表示某物的部分。比如下面的例子:
grid-template-rows: auto 10% 2fr 1fr,表示的意思是将栅格化的区域分为4行:第一行是根据内容自适应,第二行为区域的10%,最后剩余的区域分成三部分,2fr表示占其2/3,1fr表示占其1/3。
grid-column-grap 设置列间距
有必要对列与列之间设置间距,你可以理解为margin-left和margin-right的应用:
.container{
display: grid;
grid-template-columns: 100px 100px auto;
grid-column-gap: 10px;
}
复制代码
grid-column-gap表示列之间相隔10px,对左边界区域左间隔不影响,对右边界区域右间隔不影响。
grid-row-gap 设置行间距
像上面设置列边距一样,有必要设置列与列的间距,对应的 - 你可以理解为margin-top和margin-bottom的应用:
.container{
display: grid;
grid-template-rows: 60px auto;
grid-row-gap: 10px;
}
复制代码
grid-row-gap表示行之间相隔10px,对上边界区域顶部间隔不影响,对下边界区域底部间隔不影响。
grid-gap 简写
像margin一样,我们可以对margin-top, margin-right, margin-bottom, margin-left进行简写。grid-gap可以对grid-row-gap, grid-column-gap进行简写。
但是,grid-gap的值又不像margin一样可以写四个,它只有两个:
.container{
display: grid;
grid-template-columns: 100px 100px auto;
grid-template-rows: 60px auto;
grid-gap: 10px 20px;
}
复制代码
grid-gap: 10px 20px表示行间隔为10px,列间隔为20px。
到目前为止,我们讲的是栅格布局容器的拆分,下面我们来讲其子元素的布局。
子元素 grid-column
grid-column表示列跨度,比如:
.container{
display: grid;
grid-template-columns: 100px 100px auto;
.item5{
grid-column: 1 / 3
}
}
复制代码
grid-column上面的列跨度,表示类名为item5元素横跨第一列到第三列。
子元素 grid-row
对应的,grid-row表示行跨度,比如:
.container{
display: grid;
grid-template-rows: 50px 50px auto;
.item3{
grid-row: 2 / 4
}
}
复制代码
grid-row上面的行跨度,表示类名为item3元素横跨第二行到第四行。
子元素 justify-self
justify-self更改元素宽度和排列的位置,有值如下:
stretch: 默认值,拉伸内容的宽度为预设的宽度
start: 宽度为内容宽度,内容在左侧展示
center: 宽度为内容宽度,内容在居中展示
end: 宽度为内容宽度,内容在右侧展示
子元素 align-self
align-self更改元素高度和排列的位置,有值如下:
stretch: 默认值,拉伸内容的高度为预设的高度
start: 宽度为内容高度,内容在上侧展示
center: 宽度为内容高度,内容在居中展示
end: 宽度为内容高度,内容在下侧展示
justify-items
我们想对所有子元素内容进行水平方向的排列,那么需要在设定的容器中使用justify-items属性,而不是一个个子元素进行设置justify-self属性。justify-items属性值同justify-self。
.container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
justify-items: center;
}
复制代码
align-items
同理的,我们想对所有子元素内容进行垂直方向的排列,那么需要在设定的容器中使用align-items属性,而不是一个个子元素进行设置align-self属性。align-items属性值同align-self。
.container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
align-items: center;
}
复制代码
grid-template-areas
通过grid-template-areas为每个栅格单元命名。
.container{
display: grid;
grid-template-columns: 100px 100px auto;
grid-template-rows: 50px 50px auto;
grid-template-areas:
"header header header"
". content content"
"footer footer footer";
}
复制代码
注意: ⚠ .表示表格中的空单元格
子元素 grid-area关联预设名称
grid-template-areas已经为元素划分好了单元格并命名了,接下来可以通过grid-area在其子元素中关联上。
.container{
display: grid;
grid-template-columns: 100px 100px auto;
grid-template-rows: 50px 50px auto;
grid-template-areas:
"header header header"
". content content"
"footer footer footer";
.item6{
grid-area: footer;
}
}
复制代码
当然,我们可以仅仅使用grid-area实现上面需要grid-template-area和grid-area才能实现的效果。如下
.container{
display: grid;
grid-template-columns: 100px 100px auto;
grid-template-rows: 50px 50px auto;
.item6{
grid-area: 3 / 1 / 4 / 4;
}
}
复制代码
grid-area简写的语法是:
grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
复制代码
使用函数repeat简化
使用grid-template-columns和grid-template-rows定义栅格的行列结构。上面我们是一个个定义的。我们也可以使用repeat()函数简化操作。
比如分为四列,第一列和第二列是100px,第三列为1fr,最后一列是2fr。
.container{
display: grid;
grid-template-columns: repeat(2, 100px) 1fr 2fr;
}
复制代码
函数minmax限定最小最大值
在我们布局空间有限的情况下,我们需要对布局的元素设置其最小值和最大值,通过minmax()函数可以轻松做到。
.container{
display: grid;
grid-template-columns: repeat(2, 100px) minmax(60px, 1fr) 2fr;
}
复制代码
上面的属性在实际的开发中已经够用。如果你还想了解其他的属性等,你可以点击下面的参考链接进行学习。grid的兼容性还是杠杆的,除了Opera Mini和Baidu Browser不支持外,其他的都支持~
参考
html中怎么设置栅格,[CSS] 栅格化布局相关推荐
- html语言中如何设置字体,css中如何设置字体样式?
CSS设置字体 DIV内文字字体样式如何设置,怎么设置对象内文字字体样式,比如黑体.宋体.微软雅黑.英文字体等字体如何设置? css可以通过font-family属性来设置字体样式,font-fami ...
- css宋体代码_html布局中统一设置文字字体样式
html组织中对立设置装备摆设笔墨字体名堂后,结构部份时候须要变幻从新设置装备摆设一种字体若何完成呢? 贪图门径: 结构时先一般会抗衡设置装备摆设整个网页字体,预防差距浏览器显露不同默认字体,而设置装 ...
- css网页布局中文字排版的属性和用法
前段时间,学习了几个大的网站的图文混排的方法.今天总结下, css网页布局中文字排版的相关属性以及用法 .包括:设定字体.颜色.大小.段落空白,首字下沉.首行缩进.中文字的截断.固定宽度词内折行(wo ...
- css中如何实现帧布局_浅谈web前端中的表格布局与CSS盒子布局
在web前端设计排版时我们可能会用到表格布局和div+CSS布局,但现在主要使用后者,为何?今天我们来谈一谈两者之间的发展和原理. 话不多说下面来干货 发展过程 上个世纪Web开发人员流行使用表格进行 ...
- css grid随页面大小_前端开发中各种设置CSS间距的优点缺点及实例「实践」
前言 如果两个或多个元素很接近,那么用户就会认为它们以某种方式属于彼此.当对多个设计元素进行分组时,用户可以根据它们之间的空间大小来决定它们之间的关系.没有间距,用户将很难浏览页面并知道哪些内容相关而 ...
- html中 导航条置顶的代码,一个DIV+CSS代码布局的简单导航条
一个蓝色主题的导航条结构案例,本CSS小实例,采取DIV CSS实现.同时不必图片做靠山,直接运用布景致完成,鼠标经由过程悬停对应栏目称说是对应背景蓝色变深. 导航条一小块成就截图 通常导航条接纳ul ...
- grid布局浏览器兼容_使用 CSS Grid:以兼容不支持栅格化布局的浏览器
摘要 当使用任何 CSS 的新特性的时候,浏览器的兼容问题都必须去解决.与 Flexbox 和 CSS Grid 一样,在使用 CSS 新特性布局时,兼容性比性能增强更值得考虑. 在这篇文章中,我将探 ...
- html语言字体间距怎么设,css中如何设置字/行间距?
css中如何设置字/行间距?下面本篇文章给大家介绍一下使用css设置字间距和行间距的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 使用css设置字间距 letter-spac ...
- Python绘图之matplotlib基础教程:matplotlib库图表绘制中常规设置大全(交互模式、清除原有图像、设置横坐标显示文字/旋转角度、添加图例、绘图布局自动调整、图像显示、图像暂停)
Python绘图之matplotlib基础教程:matplotlib库图表绘制中常规设置大全(交互模式.清除原有图像.设置横坐标显示文字/旋转角度.添加图例.绘图布局自动调整.图像显示.图像暂停) 目 ...
- css中如何设置hr的样式?css hr标签多种样式(图文)
在对html网页进行美化的时候,肯定少不了要用的hr标签进行修饰页面,但默认的hr标签样式对页面的修饰起不到什么好的作用,有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作.那么如 ...
最新文章
- JDBC Driver常用连接方法列表
- java 全局变量_Java语言与C语言、C++语言有何差异以及优劣势
- 加载部分神经网络预训练参数后改写网络的方法
- WebForms 开发基础
- 美团和饿了么刷屏背后,支撑算法的技术你了解多少?
- 保姆级的HTML零基础教程少见吧?这是第一节(1)
- mysql的考试范围_数据库考试范围整理
- Centos 推荐使用xtrabackup备份数据库
- OpenMV(三)--实时获取摄像头图片
- JS函数,数组,日期
- Lumia 800 7.10.8783.12
- linux jdk环境变量配置不生效_Linux服务器JDK环境变量配置
- 使用Unity3D的50个技巧:Unity3D最佳实践
- python验证码登录代码_Python模拟登录验证码(代码简单)
- RS485模块的介绍及引脚连线说明
- 常见的网络命令--ping.hostname
- 使用 OpenSSL 创建ssl证书
- HTB-Antique
- 冒险岛linux_062服务端,支持arm64_armhf_amd_i386
- 理解es6中的暂时性死区
热门文章
- 《高绩效成果教练》课程笔记及思考
- 软件测试的概念与过程
- Unity3D游戏制作学习记录03——丛林战争
- 广工Libero SoC安装教程
- cf----2019-10-28(Sad powers,Zebras,Not simply beatiful strings)
- python爬去新浪微博_GitHub - dataabc/weiboSpider: 新浪微博爬虫,用python爬取新浪微博数据...
- 看病(版权所有翻版必究)
- 【c语言】复习无止境,day4--堆内存宏函数篇
- Prokka:从安装到使用的那些坑!!!
- ※前端面试--知识总结