03栅格系统

本宝宝不开心

于 2021-06-28 22:51:03 发布

阅读量81

点赞数

分类专栏： Layui快速学习

本文链接：https://blog.csdn.net/zh_cn1/article/details/118314149

版权

Layui快速学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

03栅格系统

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>栅格系统</title>
	<link rel="stylesheet" type="text/css" href="layui-v2.6.8/layui/css/layui.css">
</head>
<body>
	<!-- 布局容器 -->
	<div class="layui-container">
		<!-- 栅格系统
		1.列最多为12列，超出会换行layui-col-md*
		2.响应式layui-col-[xs、sm、md、lg]
		3.裂边距为layui-col-space*

		-->
		<!-- 定义行 -->
		<div class="layui-row">
			<!-- 定义列-->
			<div class="layui-col-md5" style="background-color: deepskyblue;">
				内容5/12
			</div>
			<div class="layui-col-md7" style="background-color: grey;">
				内容7/12
			</div>
		</div>

		<!-- 定义行 -->
		<div class="layui-row">
			<!-- 定以列 -->
			<div class="layui-col-md4" style="background-color: green;">
				内容4/12
			</div>
			<div class="layui-col-md4" style="background-color: greenyellow;">
				内容4/12
			</div>
		</div>

		<!--列响应 -->
		<!-- 定义行 -->
		<div class="layui-row">
			<!-- 定以列 -->
			<div class="layui-col-sm4 layui-col-md7 " style="background-color: green;">
				平板、桌面端
			</div>
			<div class="layui-col-sm4 layui-col-md5" style="background-color: greenyellow;">
				平板、桌面端
			</div>
		</div>


	</div>
 <hr>
 <!-- 列边距-->
 <div class="layui-row layui-col-space2">
			<!-- 定以列 -->
			<div class="layui-col-md6">
				<div style="background-color: green;">桌面端</div>
			</div>
			<div class="layui-col-md6">
				<div style="background-color: green;">桌面端</div>
			</div>
</div>
<hr>

<!--列偏移 -->
 <div class="layui-row">
			<!-- 定以列 -->
			<div class="layui-col-md4">
				<div style="background-color: green;">桌面端0</div>
			</div>
			<div class="layui-col-md4 layui-col-md-offset4">
				<div style="background-color: green;">桌面端1</div>
			</div>
</div>

<hr>

<!--列嵌套 -->
 <div class="layui-row">
			<!-- 定以列 -->
			<div class="layui-col-md6">
				<div class="layui-row">
					<div class="layui-col-md3" style="background-color: green;">3</div>
					<div class="layui-col-md4" style="background-color: blue;">4</div>
					<div class="layui-col-md5" style="background-color: yellow;">5</div>
				</div>
			</div>
</div>

</body>
</html>