grid布局学习案例

最新推荐文章于 2024-07-17 15:20:08 发布
最新推荐文章于 2024-07-17 15:20:08 发布
阅读量477 收藏
点赞数
分类专栏： css布局 文章标签： grid布局
原文链接：http://www.voidcn.com/article/p-yemyzqru-byz.html
版权

参考链接
http://www.voidcn.com/article/p-yemyzqru-byz.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.wrapper {
				width:100%;
				background: #f3f3f3;
				text-align: center;
				display: grid;
				/*grid-template-columns: repeat(auto-fill, 100px);
                grid-template-rows: repeat(auto-fill, 100px)*/
               
                grid-template-columns: 1fr 2fr 3fr;
                grid-template-rows: 150px 150px 150px;
                
                grid-row-gap: 10px;
                grid-column-gap: 10px;
                
                /*grid-auto-flow:column;*/
               
                /*justify-items:center;
                align-items:center;*/
                
                justify-content:center;
                align-content:center;
                
            }
			
			.item {
				text-align: center;
				border: 1px solid #fff;
				color: #fff;
				font-weight: bold;
				/*height: 50px;*/
			}
			.item:nth-of-type(4){
				/*grid-column-start: 1;
                grid-column-end: 3;
                grid-row-start:2;
                grid-row-end:4;*/
               
                /*grid-column-start: span 2;
                grid-row-start:span 2;*/
               
               grid-column:1 / 3;
               grid-row:2 / 4;
			}
			
			.item:nth-of-type(2n+1) {
				background: #ef342a
			}
			
			.item:nth-of-type(2n) {
				background: #00a0a0;
			}
			
		</style>
	</head>

	<body>
		<h6>
			Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。<br/>
			Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。<br/>
			Grid 布局远比 Flex 布局强大。
		</h6>
		<ul>
			<h4>容器属性</h4>
			<li>
				<ol>
					<li>display:grid指定一个容器为网格布局</li>
					<li>display：inline-grid指定一个窗口为行内容器</li>
				</ol>
			</li>
			<hr />
			<li>
				<ol>
					<li>grid-template-columns：用来指定行的宽度</li>
					<li>grid-template-rows：用来指定行的高度</li>
				</ol>
			</li>
			<hr />
			<li>
				<ol>
					<li>grid-row-gap：设置行与行之间的间隔</li>
					<li>grid-colunm-gap：设置列于列之间的间隔</li>
					<li>grid-row-gap和grid-colunms-gap合并简写的话,格式为grid-gap</li>
				</ol>
			</li>
			<hr />
			<li>
				grid-auto-flow,划分网格，容器的子元素默认排序是按照“先行后列”来排的，
				可通过该属性我们可以自定义排列的顺序为“先列后行”
			</li>
			<hr />
			<li>
				<ol>
					<li>justify-items属性设置单元格内容的水平位置，</li>
					<li>align-items设置单元格内容的垂直位置</li>
					<li>place-item是两者的合并写法</li>
				</ol>
			</li>
			<hr />
			<li>
				<ol>
					<li>justify-content属性是整个内容区域在容器里面的水平位置，</li>
					<li>align-content属性是整个内容区域在容器里面的垂直位置</li>
					<li>place-content是两者的合并写法</li>
				</ol>
			</li>
			<hr />
			<h4>项目属性</h4>
			<li>
				<ol>
					<li>
						grid-column-start属性：左边框所在的垂直网格线
						grid-column-end属性：右边框所在的垂直网格线
						grid-row-start属性：上边框所在的水平网格线
						grid-row-end属性：下边框所在的水平网格线
					</li>
					<li>
						grid -column属性是grid-column-start和grid-column-end的合并写法，grid-row是grid-row-start和grid-row-end的合并写法
					</li>
				</ol>
			</li>
		</ul>
        
        <span>foo</span>
		<div class="wrapper">
			<div class="item"><span>1</span></div>
			<div class="item"><span>2</span></div>
			<div class="item"><span>3</span></div>
			<div class="item"><span>4</span></div>
			<div class="item"><span>5</span></div>
			<div class="item"><span>6</span></div>
		</div>
		<span>bar</span>
	</body>

</html>
一月清辉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Grid网格布局+案例
GLINLIND的博客
02-29 1054
Grid网格布局 Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。 作用在容器上的： display : grid grid-template-columns : 设置列数 grid-template-rows : 设置行数 fr单位 repeat()方法 注：网格中提供了一个新的单位：fr ( 比例单位 ) ...
Grid布局方法案例
m0_74118186的博客
04-16 280
Grid 布局方法
CSS3----grid布局实例
weixin_34092455的博客
04-26 172
<html> <head> <meta charset="utf-8"> <title>CSS3----grid布局实例</title> <meta name="keyword" content="CSS3----grid布局实例"> <meta name="discri...
WHAT - Tailwind CSS 的灵活布局（Flex & Grid）
最新发布
weixin_58540586的博客
07-17 1073
- 子元素 --> </ div >-- 子元素 --> </ div >-- 子元素 --> </ div ></-- 子元素 --> </ div >：定义列数，例如。：定义行数。属性FlexGrid启用布局flexgrid方向flex-rowflex-col对齐justify-*items-*justify-*items-*间隔gap-*包裹flex-wrap这两种布局各有优缺点，选择合适的布局方式可以帮助你更好地实现设计需求。
Grid网格布局实例
weixin___sjk6070的博客
10-16 228
马上都 2020 年了，你还没有使用网格布局吗？虽然这些年 js 发展的势头正劲，盖过了 css 的发展风头，但是 css 也是有很大进步的。弹性布局、网格布局相继被各大主流浏览器支持，大大方便了我们切图仔，再也不需要用 bootstrap 的栅格系统了，网格布局原生支持！SO EASY ~ 本文重在介绍网格布局的应用实例，所以简介部分只是做了一些属性的简单整理介绍（主要方便自己查询使用），详细介...
Grid布局练习案例
weixin_43311355的博客
03-07 575
简单用grid布局练手
Grid布局综合Demo案例
05-27
本综合Demo案例将深入探讨如何利用Grid布局来实现各种复杂的网页设计需求。 首先，我们需要了解Grid布局的基本概念。Grid容器是布局的核心，它可以包含多个Grid项（或称为子元素）。通过设置`display: grid`，我们...
Grid简单入门布局.pptx
02-25
【CSS Grid布局】是Web开发中的二维布局系统，主要用于网页设计和前端开发，它使得创建复杂的、响应式的、均匀分布的布局变得更加简单。在【Grid简单入门布局.pptx】的技术分享中，主要介绍了Grid布局的基本概念、与...
grid.rar_grid布局
09-20
综上所述，这个"grid.rar_grid布局"示例旨在教授开发者如何使用CSS Grid创建简单的网格系统，并通过实际案例帮助理解Grid布局的基本概念和用法。通过查看grid.html文件和1.jpg图片，我们可以更深入地学习和实践这一...
Python Grid使用和布局详解
01-20
本文实例为大家分享了Python Grid使用和布局的具体代码，供大家参考，具体内容如下 #!/usr/bin/env python import vtk # 这个示例主要用于将不同的图像对象显示到指定的Grid中 def main(): colors = vtk....
CSS+DIV布局赏析案例.zip_CSS+DIV布局赏析案例
09-22
综上所述，“CSS+DIV布局赏析案例”是一个综合性的学习资源，涵盖了从基础到高级的CSS布局技巧。通过研究这个案例，开发者可以提升自己在网页布局设计方面的能力，更好地理解和应用CSS与DIV的组合。
grid布局demo.html
02-02
grid布局demo.html
在echarts中图例legend和坐标系grid实现左右布局实例
09-16
主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Grid布局综合案例
加强前端基础
05-27 377
CSS3 Grid布局综合案例 - 使用vue布局键盘案例
grid简单布局案例
TianZhengg的博客
04-10 675
代码的实现
Grid布局练习案例一
weixin_43311355的博客
03-03 439
Grid布局练习
grid网格布局实例
WU567_的博客
03-07 526
grid网格布局实例 一起来学习一下grid网格布局的一个小案例 eg：百度风云榜 上代码： （1）划分区域 按照图示首先划分七个区域： 结构： 样式： 1.划分为3列4行 （2）加上网格的间距： （3）找到网格指定的区域： 先加上红色的背景色看一下运行效果： （4）分别给每块加上颜色 此时每块的背景色就完成了： （5）给对应的块加上文字，再加上样式就完成这个简单的网格布局了 ...
grid网格布局经典案例——纯干货，不加鸡汤
weixin_34406796的博客
04-03 1071
grid网格布局使用指南 在线demo 访问github 网格布局父元素的属性使用 grid-template-rows 定义网格布局的行; 将高度(注意:要设置height)平分三份 .container{ grid-template-rows:1fr 1fr 1fr; // } 复制代码 将高度设置为固定值 .container{ grid-template-rows...
css grid案例
06-06
CSS Grid布局提供了一种强大的方式来创建复杂的网格布局。下面是一个简单的CSS Grid示例，它创建了一个两列三行的网格： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); /* 两列，每列占据1/2的可用空间 */ grid-template-rows: auto; /* 自动填充行高 */ gap: 10px; /* 行与行之间的间隔 */ padding: 10px; } .grid-item { background-color: #f2f2f2; padding: 20px; border: 1px solid rgba(0, 0, 0, 0.1); font-size: 30px; text-align: center; } </style> </head> <body> <div class="grid-container"> <div class="grid-item">Item 1</div> <div class="grid-item">Item 2</div> <div class="grid-item">Item 3</div> <div class="grid-item">Item 4</div> <div class="grid-item">Item 5</div> </div> </body> </html> ``` 在这个例子中，`.grid-container`是网格容器，`.grid-item`是网格单元格。每个`.grid-item`都会自动适应其列宽，并且按照列的顺序排列。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值