Css 简明教程

CSS RWD Grid view

grid view 是一个布局系统，以网格结构组织网页上的内容。以其响应式形式存在的网格，适用于不同屏幕大小和设备。

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

CSS RWD Grid view - Building

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

* {
    box-sizing: border-box;
}

在您的 CSS 中添加上述语法。

CSS RWD Grid view - Example

请参阅下面演示网格视图中具有 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>