Flex Grid System

The framework includes a lightweight flexbox grid system in css/flexgridsystem.css. It uses two core classes — row and column — to create responsive multi-column layouts that automatically stack on small screens.

---

Core Concept

Wrap columns in a row, and each child with column. Columns divide the available width equally by default and collapse to full width on screens narrower than 1000px.

<div class="row">
    <div class="column">First</div>
    <div class="column">Second</div>
    <div class="column">Third</div>
</div>

---

Auto-Dividing Columns

Add as many column divs as you need. The grid divides the space evenly.

1 column

2 columns

3 columns

4 columns

---

Fixed-Width Column Classes (col-1 to col-6)

Use col-X classes to pin one column to an exact fraction of 12, letting the remaining column fill the rest of the space.

col-1 + auto

col-2 + auto

col-3 + auto

col-4 + auto

col-5 + auto

col-6 + auto

---

Flex-Basis Utility Classes

For layouts where you want columns to have a minimum width before wrapping (rather than a strict fractional size), use the flex-basis-* classes. These set a flex-basis value in pixels, allowing columns to wrap to the next line when the container gets too narrow.

Class	flex-basis value	Typical use
flex-basis-600	600px	Wide content blocks
flex-basis-500	500px	Medium-wide content
flex-basis-400	400px	Standard content blocks
flex-basis-300	300px	Sidebar / footer columns
flex-basis-150	150px	Small tiles or icons
flex-basis-auto	auto	Let content determine width

The footer column system uses flex-basis-300 by default.

---

Responsive Behaviour

At screen widths below 1000px, all column elements switch to min-width: 100%, stacking vertically. No extra classes are needed — this is the default behaviour for every column.

---

Class Reference

Class	Description
row	Flex container. Wraps columns. Apply to the parent div.
column	Flex child. Grows and shrinks equally with siblings.
col-1 – col-6	Pins a column to 1–6 twelfths of the row width.
flex-basis-150	Sets flex-basis to 150px.
flex-basis-300	Sets flex-basis to 300px.
flex-basis-400	Sets flex-basis to 400px.
flex-basis-500	Sets flex-basis to 500px.
flex-basis-600	Sets flex-basis to 600px.
flex-basis-auto	Sets flex-basis to auto.