CSS - 响应式网格视图

网格视图是一种布局系统，它以网格结构组织网页上的内容。响应式形式的网格可适应不同的屏幕尺寸和设备。

网格视图涉及将网页划分为一系列列和行。网格的每个部分都可以包含不同的元素，例如图像、文本和任何其他内容。典型的网格视图可能有 12 列，总宽度为 100%。网格将随着浏览器大小的变化而缩小和扩展。

CSS RWD 网格视图 - 构建

为了构建网格视图，必须确保所有 HTML 元素都将 box-sizing 属性设置为 border-box。设置此属性可使填充和边框包含在元素的总宽度和高度中。使用以下代码片段设置框大小适当：


* {
	 	 box-sizing: border-box;
}

将上述语法添加到您的 CSS 中。

CSS RWD 网格视图 - 示例

请参阅以下示例，该示例在网格视图中演示了具有 2 列的响应式网页：


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	* {
	 	 	 box-sizing: border-box;
	 	}

	 	.title {
	 	 	 border: 2px solid black;
	 	 	 padding: 10px;
	 	 	 background-color: blanchedalmond;
	 	}

	 	.grid-one {
	 	 	 width: 60%;
	 	 	 float: left;
	 	 	 padding: 10px;
	 	 	 border: 2px solid black;
	 	 	 background-color: darkseagreen;
	 	}

	 	.grid-two {
	 	 	 width: 40%;
	 	 	 float: left;
	 	 	 padding: 15px;
	 	 	 border: 2px solid black;
	 	 	 background-color: lightgreen;
	 	}
</style>
</head>
<body>
	 	<div class="title">
	 	<h1>Responsive Web Design</h1>
	 	</div>

	 	<div class="grid-two">
	 	<ul>
	 	 	 <li>Viewport</li>
	 	 	 <li>Grid view</li>
	 	 	 <li>Media queries</li>
	 	 	 <li>Images</li>
	 	 	 <li>Videos</li>
	 	 	 <li>Frameworks</li>
	 	</ul>
	 	</div>

	 	<div class="grid-one">
	 	<h3>Grid view</h3>
	 	<p>A grid view</b> is a layout system that organizes content on a webpage in a grid structure. The grid in its responsive form adapts to different screen sizes and devices.</p>
	 	<p>Resize the browser window to see how the content gets responsive to the resizing.</p>
	 	</div>
</body>
</html>

打印本页