A Foundation-like grid system based on the flex display property.
| Name | Description | Link |
|---|---|---|
| Default | Includes all features and most column variations. | Try it on CodePen |
We recommend installing basicGrid using npm or yarn.
npm install basicgridyarn add basicgridInclude the CSS files in the head tag …
<link rel="stylesheet" href="dist/basicGrid.min.css">… or use basicGrid via jsDelivr CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basicgrid@3/dist/basicGrid.min.css">- basicGrid is mobile first. Smaller breakpoints will automatically apply on all larger sizes.
- The outermost row has a
max-width. - A nested row removes the left gutter of the first column and the right gutter of the last column inside the row.
- Classes are generated from the names and sizes in the
$sizesmap. - You can fill a row with up to twelve columns. Columns without a specified size will fill an entire row.
- Each column has a gutter on the left and right side.
- Columns have the same height when not specified otherwise.
- Columns wrap when they don't fit into one row.
Specify the widths of each column with small-, medium-, and large- or use -auto to fill the available space. Defaults to small-12.
<div class="row">
<div class="column small-6 medium-6 large-4"></div>
<div class="column small-3 medium-auto large-4"></div>
<div class="column small-3 medium-auto large-4"></div>
</div>left-on-, center-on- and right-on- change the horizontal alignment of all columns in a row. around-on- and between-on- allow you to distribute the columns. Defaults to left-on-.
<div class="row left-on-small center-on-medium right-on-large">
<div class="column small-6"></div>
</div><div class="row around-on-small between-on-large">
<div class="column small-4"></div>
<div class="column small-4"></div>
</div>top-on-, middle-on- and bottom-on- change the vertical alignment of all columns in a row. Defaults to stretch-on-, which gives each column the same height.
<div class="row top-on-small middle-on-medium bottom-on-large">
<div class="column small-6"></div>
<div class="column small-6"></div>
</div>Define the direction columns are placed in a row using ltr-on- and rtl-on-. Defaults to ltr-on-.
<div class="row ltr-on-small rtl-on-medium">
<div class="column small-6"></div>
<div class="column small-6"></div>
</div>Reorder columns with first-on-, last-on- and origin-on-. Defaults to origin-on-, which keeps the order as specified in the HTML.
<div class="row">
<div class="column small-4 last-on-small"></div>
<div class="column small-4"></div>
<div class="column small-4 first-on-small origin-on-medium"></div>
</div>Use offset classes to move columns to the right.
<div class="row">
<div class="column small-2 small-offset-2"></div>
<div class="column small-2 small-offset-4"></div>
<div class="column small-2"></div>
</div>Shift columns around between breakpoints using -push- and -pull-. Especially helpful if you want to modify the order of columns based on the size of the screen.
<div class="row">
<div class="column small-10 small-push-2"></div>
<div class="column small-2 small-pull-10"></div>
</div>show-on- and hide-on- allow you to show and hide rows or individual columns.
<div class="row hide-on-small show-on-large">
<div class="column"></div>
</div><div class="row">
<div class="column hide-on-medium show-on-large"></div>
<div class="column show-on-medium hide-on-large"></div>
</div>Import src/styles/main.scss directly to customize the grid:
$basicGrid__columns: 12; // Number of columns
$basicGrid__width: 1280px; // Maximum width of a row
$basicGrid__outer: 0; // Gutter of the outermost row
$basicGrid__gutter: 1.8rem; // Gutter size between columns
// Column-Breakpoints
$basicGrid__sizes: (
'small': 0,
'medium': 640px,
'large': 1024px
);
@import 'src/styles/main';Overwrite the SASS options with CSS variables to adjust the grid on the client:
html {
--basicGrid-width: 1200px;
--basicGrid-outer: 0;
--basicGrid-gutter: 1.8rem;
}