Current Release: Version 2.1.0
Check out Current Release Info for more details.
Column/Gutter Widths and Break Points
|Breakpoint Name||Phone Portrait||Phone Landscape||Tablet Portrait||Tablet Landscape||Desktop|
First Thing’s First
You gotta link the Flexr Grid CSS before your CSS.
<head> ... <link href=".../flexr.min.css" rel="stylesheet"> <link href=".../your.css" rel="stylesheet"> ... </head>
Here’s the basic structure:
<container> <row> <column(s)> your stuff! </column(s)> </row> </container>
A container can be practically anything: a
nav, etc., even the
body; just something to contain your rows and columns. It doesn’t even need a special class.
Rows and columns can also be practically anything: you can have a
ul as a row, and its
li elements as columns.
One Class Will Do
Creating a column requires only one class
col- defined by its size
[1–12] with no need for any offset columns.
<div class="row"> <div class="col-6">...</div> <div class="col-6">...</div> </div>
Flexr is a 12 column grid.
If you’d like to use a column with a width that you define (i.e. for a logo), simply give the column the class
col-x and define the width in your css.
Shrinking Columns is the default type.
To define Expanding Columns, all you need to do is add the expanding class
expand in the parent row:
<div class="row expand"> <div class="col-3">...</div> <div class="col-3">...</div> <div class="col-3">...</div> <div class="col-3">...</div> </div>
The only canidates for Expanding Columns are the one, two, and three columns. When the screen reduces to the size of tablet portrait, these columns will expand automatically for smaller screens. This will only work if the row is evenly populated with these columns.
To create Stretching Columns, just add the stretching class
stretch in the parent row. Stretching Columns make their parent row full width to its parent, and divide the space between themselves equally with no gutters.
See the difference in behavior on the Flexr Grid Page.
Switching Column Sizes
Sometimes at certain screen sizes you’d like the column to be specifically bigger or smaller. Flexr has four special prefixes for switching that you can use. All you need to do is attach the prefix that matches the breakpoint where you want to change with the new column size:
- Tablet Landscape
- Tablet Portrait
- Phone Landscape
- Phone Portrait
[col] follows the same column class name structure.
<div class="row"> <div class="col-5 tp-col-6">...</div> <div class="col-7 tp-col-6">...</div> </div>
Switching column sizes implies that you don’t want expanding to happen automatically, so adding the
expand class to the parent would not work.
The default justification of how the columns populate is centered. To change the justifaction, just add the class
left for left-justification or
right for right-justification to the parent row. For example, left-justification:
<div class="row left"> <div class="col-4">...</div> </div>
If you’d like to indicate on your site that you’re using Flexr, here are some badges you can link to:
https://flexrgrid.com/host/flexr-logo-use.svg https://flexrgrid.com/host/flexr-logo-use-black.svg https://flexrgrid.com/host/flexr-logo-use-white.svg
Current Release Info
Notes: Adds classes ‘left’ and ‘right’.
File Size: 3.1KB
Future Release Update(s): Flexr 3 coming soon! MAJOR changes. Stay-tuned.
Deprecation Warning(s): Class names ‘exp’, ‘fill’, ‘jus-l’, and ‘jus-r’ will be deprecated by Version 3; please use ‘expand’, ‘stretch’, ‘left’, and ‘right’, respectively, instead.
If you have any questions or issues, please ask/report using GitHub Issues.