--- title: Grid Cells layout: docs theme: library doc-library: true doc-tab: grid breadcrumb: - home - documentation - grid - grid-cells --- {% capture markdown %} Each Bulma grid is comprised of several **cells**. You can adjust the width and height of each of these cells individually, and for each separate breakpoint. {% endcapture %} {% include markdown.html content=markdown %}
Description Class Example
Which column the cell starts at is-col-start {% highlight html %}
{% endhighlight %}
Which column the cell ends at, counting from the end is-col-from-end {% highlight html %}
{% endhighlight %}
How many columns the cell will span is-col-span {% highlight html %}
{% endhighlight %}
Which row the cell starts at is-row-start {% highlight html %}
{% endhighlight %}
Which row the cell ends at, counting from the end is-row-from-end {% highlight html %}
{% endhighlight %}
How many rows the cell will span is-row-span {% highlight html %}
{% endhighlight %}
{% comment %} -- {% endcomment %} {% include docs/elements/anchor.html name="Column Start" %} {% capture col_start_code %}
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
{% endcapture %} {% capture col_start %}
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
{% endcapture %} {% capture markdown %} Change which column a cell starts at. {% endcapture %} {% include markdown.html content=markdown %} {{ col_start }} {% include docs/elements/snippet.html content=col_start_code no_example=true more=true fullwidth=true horizontal=true %} {% comment %} -- {% endcomment %} {% include docs/elements/anchor.html name="Column From End" %} {% capture col_end_code %}
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
{% endcapture %} {% capture col_end %}
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
{% endcapture %} {% capture markdown %} Change which column a cell ends at, counting from the end. {% endcapture %} {% include markdown.html content=markdown %} {{ col_end }} {% include docs/elements/snippet.html content=col_end_code no_example=true more=true fullwidth=true horizontal=true %} {% comment %} -- {% endcomment %} {% include docs/elements/anchor.html name="Column Span" %} {% capture col_span_code %}
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
{% endcapture %} {% capture col_span %}
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
{% endcapture %} {% capture markdown %} Change how many columns a cell spans. {% endcapture %} {% include markdown.html content=markdown %} {{ col_span }} {% include docs/elements/snippet.html content=col_span_code no_example=true more=true fullwidth=true horizontal=true %} {% comment %} -- {% endcomment %} {% include docs/elements/anchor.html name="Row Start" %} {% capture row_start_code %}
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
{% endcapture %} {% capture row_start %}
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
{% endcapture %} {% capture markdown %} Change which row a cell starts at. {% endcapture %} {% include markdown.html content=markdown %} {{ row_start }} {% include docs/elements/snippet.html content=row_start_code no_example=true more=true fullwidth=true horizontal=true %} {% comment %} -- {% endcomment %} {% include docs/elements/anchor.html name="Row From End" %} {% capture row_end_code %}
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
{% endcapture %} {% capture row_end %}
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
{% endcapture %} {% capture markdown %} Change which row a cell ends at, counting from the end. {% endcapture %} {% include markdown.html content=markdown %} {{ row_end }} {% include docs/elements/snippet.html content=row_end_code no_example=true more=true fullwidth=true horizontal=true %} {% comment %} -- {% endcomment %} {% include docs/elements/anchor.html name="Row Span" %} {% capture row_span_code %}
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
{% endcapture %} {% capture row_span %}
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
{% endcapture %} {% capture markdown %} Change how many rows a cell spans. {% endcapture %} {% include markdown.html content=markdown %} {{ row_span }} {% include docs/elements/snippet.html content=row_span_code no_example=true more=true fullwidth=true horizontal=true %}