Materialize-css 网格

Materialize-css 网格是一种基于栅格系统的网站布局技术，可以很好地实现响应式的设计。Materialize-css 是一个现代化的前端框架，它包括了网格布局、UI 组件、表单控件等等，并且支持移动优先的设计方法，使其在移动设备上展现更好的用户体验。

栅格系统

Materialize-css 的栅格系统包括了 12 个列，可以根据不同的屏幕大小对列进行组合，从而实现不同的布局效果。在实际使用时，我们可以借助预定义的类名来调用对应的栅格效果。

布局分类

• .s：表示小屏幕（mobile-first）
• .m：表示中等屏幕
• .l：表示大屏幕

布局示例

• 基本用法：在栅格列外包裹 .row，然后根据需要在 .row 内定义栅格列（.col）

<div class="row">
  <div class="col s12 m6 l4">栅格1</div>
  <div class="col s12 m6 l4">栅格2</div>
  <div class="col s12 m6 l4">栅格3</div>
</div>

• 响应式布局：针对不同的屏幕大小可定义不同的布局，下面的例子在小屏幕下栅格列占据100%的宽度，在中等屏幕下占据一半宽度，在大屏幕下占据四分之一宽度

<div class="row">
  <div class="col s12 m6 l4">栅格1</div>
  <div class="col s12 m6 l4">栅格2</div>
  <div class="col s12 m6 l4">栅格3</div>
</div>

• 栅格偏移和增量：在某些情况下可以根据需求对栅格列进行偏移和增量。下面的例子在小屏幕下栅格列占据六分之一的宽度，并且偏移了一份，即向右移动了一列；在大屏幕下占据3份的宽度，并且偏移了2份，即向右移动了两列

<div class="row">
  <div class="col s12 m6 l4">栅格1</div>
  <div class="col s12 m6 l4 offset-s1 offset-l2">栅格2</div>
  <div class="col s12 m6 l4">栅格3</div>
</div>

• 栅格排序：可以通过 .push 或 .pull 类来改变列的顺序，下面的例子，中等屏幕下，栅格2 在栅格1 的前面；小屏幕下，栅格1 在栅格3 的后面

<div class="row">
  <div class="col s12 m6 l4 push-m6">栅格1</div>
  <div class="col s12 m6 l4 pull-m6 push-l2">栅格2</div>
  <div class="col s12 m6 l4 pull-s6">栅格3</div>
</div>

以上仅是 Materialize-css 网格的主要用法，更多详细的使用方法请访问 Materialize-css 官网。

UI 组件

Materialize-css 还包括了许多实用的 UI 组件，在程序设计中可以大大简化开发工作。以下列举主要的 UI 组件：

• 按钮：使用 .btn 类可以定义一个按钮，可以使用其他类来设置颜色、大小等样式

• 卡片：使用 .card 类可以定义一个卡片容器，可以在卡片内部放置文本、图片等内容

• 标签页：使用 .tabs 类可以定义一个标签页容器，可以在标签页内部放置多个标签，每个标签对应一个内容区域

• 抽屉菜单：使用 .sidenav 类可以定义一个侧边栏菜单容器，可以随页面滚动而滚动

更多详细的 UI 组件使用方法请访问 Materialize-css 官网。

总结

Materialize-css 网格是一种用于实现响应式布局的常用技术，通过定义栅格列的大小、偏移、增量、排序等属性，可以轻松地实现不同屏幕下的多个布局效果。除此之外，Materialize-css 还包括了许多实用的 UI 组件，可以较大程度地简化程序员的开发工作，并提供更好的用户体验。