Bulma是基于Flexbox的现代CSS框架，其内置的网格系统通过行和列的组合，配合预设的断点规则，可以快速实现适配手机、平板、桌面等不同屏幕尺寸的响应式布局，不需要开发者手动编写大量媒体查询代码。
Bulma网格布局的基础结构
Bulma的网格布局核心由columns容器和column子项组成，columns作为行容器，内部的column会自动按照Flexbox规则排列，默认情况下所有列会平分容器的宽度。
基础的使用示例如下：
<div class="columns"> <div class="column">第一列</div> <div class="column">第二列</div> <div class="column">第三列</div> </div>
上述代码会生成三个等宽的列，在任意屏幕尺寸下都会横向排列，并且自动占满父容器的宽度。
控制列的宽度比例
Bulma提供了多种控制列宽度的类，开发者可以根据需求设置不同列的宽度占比，不需要手动计算百分比。
固定比例宽度
可以通过is-three-quarters、is-half、is-one-third等类设置列的宽度，这些类基于12栅格系统实现，比如is-half对应6/12的宽度，is-one-third对应4/12的宽度。
<div class="columns"> <div class="column is-half">占50%宽度</div> <div class="column is-one-quarter">占25%宽度</div> <div class="column is-one-quarter">占25%宽度</div> </div>
自定义栅格宽度
如果需要更精细的宽度控制，可以使用is-1到is-12的类，直接指定列占据的栅格数，12为满宽。
<div class="columns"> <div class="column is-3">占3/12宽度</div> <div class="column is-6">占6/12宽度</div> <div class="column is-3">占3/12宽度</div> </div>
实现响应式适配
Bulma的响应式能力基于预设的断点，不同断点对应不同的屏幕尺寸，开发者可以为列添加不同断点下的宽度类，实现不同屏幕下的布局变化。
Bulma预设断点
Bulma的默认断点规则如下：
| 断点名称 | 对应屏幕尺寸 | 前缀 |
|---|---|---|
| mobile | 小于768px | 无（默认） |
| tablet | 大于等于768px | is-tablet- |
| desktop | 大于等于1024px | is-desktop- |
| widescreen | 大于等于1216px | is-widescreen- |
| fullhd | 大于等于1408px | is-fullhd- |
响应式列宽设置示例
假设需要实现手机端列纵向堆叠，平板端两列并排，桌面端四列并排的效果，可以这样编写代码：
<div class="columns">
<div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
内容块1
</div>
<div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
内容块2
</div>
<div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
内容块3
</div>
<div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
内容块4
</div>
</div>
上述代码中，is-full-mobile表示在手机端列占满宽度，会自动换行堆叠；is-half-tablet表示平板端占一半宽度，两列并排；is-one-quarter-desktop表示桌面端占四分之一宽度，四列并排。
常用辅助类
Bulma还提供了一些辅助类来调整网格的显示效果，满足更多布局需求。
is-multiline：添加到columns容器上，允许列换行，当列的总宽度超过12栅格时会自动折行is-centered：添加到columns容器上，让列水平居中is-vcentered：添加到columns容器上，让列垂直居中is-gapless：添加到columns容器上，去除列之间的间距
比如需要实现一个换行且居中的网格布局，可以这样写：
<div class="columns is-multiline is-centered"> <div class="column is-3">内容1</div> <div class="column is-3">内容2</div> <div class="column is-3">内容3</div> <div class="column is-3">内容4</div> <div class="column is-3">内容5</div> </div>
完整示例
下面是一个完整的响应式卡片网格示例，适配三种不同屏幕尺寸：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulma响应式网格示例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
<div class="container">
<h1 class="title">产品列表</h1>
<div class="columns is-multiline">
<div class="column is-full-mobile is-half-tablet is-one-third-desktop">
<div class="card">
<div class="card-content">
<p class="title">产品1</p>
<p>产品描述内容</p>
</div>
</div>
</div>
<div class="column is-full-mobile is-half-tablet is-one-third-desktop">
<div class="card">
<div class="card-content">
<p class="title">产品2</p>
<p>产品描述内容</p>
</div>
</div>
</div>
<div class="column is-full-mobile is-half-tablet is-one-third-desktop">
<div class="card">
<div class="card-content">
<p class="title">产品3</p>
<p>产品描述内容</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
这个示例中，手机端每个产品卡片占满整行，平板端每行显示两个卡片，桌面端每行显示三个卡片，完全不需要手动编写媒体查询代码，仅通过Bulma的预设类就可以实现完整的响应式效果。