✨ Quick Start
Download flexboxgrid.css and load the stylesheet
Link import
<link rel="stylesheet" href="flexboxgrid.css">
CSS import
@import url("flexboxgrid.css");
JSX import
import './flexboxgrid.css';
For more examples check: https://bulma.io/documentation/columns/
Key Features
- Reusable Columns- Reusable columns to divide your web application
- Sizes - Change the size per column
- Responsiveness - Handle different column layouts for each breakpoint
- Nesting - A simple way to build responsive columns
- Gap - Customize the gap between the columns
- Multiline - Make the columns multiline except for one row
- Centering columns - Instead of using empty columns you can use
.is-centered
on the parent.columns
element
⚙️ Usage
To split the view into columns, you just have to do two things:
- Add a
columns
container 2. Add as manycolumn
elements as you want
For example:
<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>
Column sizes
You can define the size of each column individually.
If you want to change the size of a single column, you can use one of the following classes:
-
is-three-quarters
-
is-two-thirds
-
is-half
-
is-one-third
-
is-one-quarter
-
is-full
-
is-four-fifths
-
is-three-fifths
-
is-two-fifths
-
is-one-fifth
The other columns will fill up the remaining space automatically.
12 columns system
As the grid can be divided into 12 columns, there are size classes for each division:
-
is-1
-
is-2
-
is-3
-
is-4
-
is-5
-
is-6
-
is-7
-
is-8
-
is-9
-
is-10
-
is-11
-
is-12
📱 Mobile columns
By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile.
If you want columns to work on mobile too, just add the is-mobile
modifier on the columns
container:
<div class="columns is-mobile">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
If you only want columns on desktop upwards, just use the is-desktop
modifier on the columns
container:
<div class="columns is-desktop">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
Multiline
Whenever you want to start a new line, you can close a columns
container and start a new one. But you can also add the is-multiline
modifier and add more column elements than would fit in a single row.
<div class="columns is-multiline is-mobile">
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-half">
<code>is-half</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column">
Auto
</div>
</div>
PurgeCSS
I recommend to use PurgeCSS by using the Flexbox Grid. The .css
file flexboxgrid.css
has a lot of css classes. PurgeCSS is a tool to remove unused CSS. So you optimize your application by purging (deleting) the classes you don't use.
You may also like...
- React SPA Boilerplate - A boilerplate for single page applications based on the React.js Library
- Nuxt SPA Boilerplate - A boilerplate for single page applications based on the Vue.js Framework, Nuxt.js
- Nuxt SSG Boilerplate - A boilerplate for static site generation based on the Vue.js Framework, Nuxt.js
If you're looking for other reusable tools, check my repository Development Utilities. It's a collection of my favorite development utilities for (progressive) web and hybdrid apps.
Top comments (0)