1. Home
2. Layout
3. grid()

grid()

Use grid to build layouts of all shapes.

grid_open( [ array $col_sizes = [100], array $options = [] ] ) : string

Parameters

$col_sizes array Optional Column sizes.

$options array Optional Additional options.

Available options

Basic Usage

echo grid_open(); // 100% column width
// ...
echo grid_close();

HTML output:

<div class="col-xs-12">
</div>

Column sizes

Depending on the framework, multiple values can be added. However, the recommended maximum is four values.

In the example below, the output will be 100% width on mobile, 50% on a larger screen.

echo grid_open([100, 50]);
// ...
echo grid_close();

HTML output:

<div class="col-xs-12 col-sm-6">
</div>

It is also possible to specify a value for a specific framework. In this case, the first and second values are ignored.

echo grid_open([100, 50, ['bootstrap5' => 'col-6',],]);
// ...
echo grid_close();

HTML output:

<div class="col-6">
</div>

The same column width

Not recommended for layouts that must support multiple css frameworks. Since not every framework supports this.

However, in case the css framework does not support it, fallback values can be set ['auto', 100, '1/2'].

echo grid_open(['auto']);
// ...
echo grid_close();

HTML output:

<div class="col">
</div>

Fractions

A more convenient way is to use fractions instead of writing percentages directly.

Note: Percentages and fractions can be used together. An under-the-hood system converts fractions to percentages.

echo grid_open(['1/1', '1/2']); // is the same as [100, 50]
// ...
echo grid_close();

HTML output:

<div class="col-xs-12 col-sm-6">
</div>