Minimal Flexible CSS Grid Layout – iota.css

iota.css is a lightweight CSS layout library which makes it easier to generate a flexible, responsive grid layout using CSS grid properties.

How to use it:

Install and import the ‘iota.css’ into your project.

# NPM
$ npm install iota-layout-css --save

<link href="iota.css" rel="stylesheet">

Create a basic CSS grid layout.

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  ...
</div>

Use the extra grid classes for different devices.

<div class="grid" style="--cols-xl: 2;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Complex usage:

<div class="grid" style="--cols-xl: 4;">
  <div style="--col-xl: 1; --row-xl: 1;">1</div>
  <div style="--col-xl: 2; --row-xl: 1;">2</div>
  <div style="--col-xl: 3; --row-xl: 1;">3</div>
  <div style="--col-xl: 4; --row-xl: 1;">4</div>
  <div style="--col-xl: 4; --row-xl: 2;">5</div>
  <div style="--col-xl: 4; --row-xl: 3;">6</div>
  <div style="--col-xl: 4; --row-xl: 4;">7</div>
  <div style="--col-xl: 3; --row-xl: 4;">8</div>
  <div style="--col-xl: 2; --row-xl: 4;">9</div>
  <div style="--col-xl: 1; --row-xl: 4;">10</div>
  <div style="--col-xl: 1; --row-xl: 3;">11</div>
  <div style="--col-xl: 1; --row-xl: 2;">12</div>
</div>

Customize the ‘iota.css’ by overriding the default variables in the ‘_variables.css’.

// =============================================================================
// _VARIABLES.SCSS
// -----------------------------------------------------------------------------
// Iota variables.
// =============================================================================
// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Class
//   02. Enable
//   03. Grid Data
// =============================================================================
// Class
// =============================================================================
// Defines the CSS class used for Iota's grid.
$iota_grid_class:    grid;

// Enable
// =============================================================================
// Turn various features on/off as needed.
$iota_enable_grid_column_property:     true;
$iota_enable_grid_row_property:        true;
$iota_enable_justify_self_property:    true;
$iota_enable_align_self_property:      true;

// Grid Data
// =============================================================================
// Defines the number of breakpoints and defaults used for each property at
// that breakpoint. The slug for each breakpoint will be used in the custom
// properties as a responsive reference (e.g. "--gap-xs"). The value of the
// first breakpoint must be set to "0" to assign the mobile-first values.
$iota_grid: (
  "xs": (
    "breakpoint"          : 0,
    "grid_gap"            : 2rem,
    "grid_auto_flow"      : row,
    "grid_auto_columns"   : auto,
    "grid_auto_rows"      : auto,
    "repeat_columns"      : 1,
    "repeat_columns_size" : 1fr,
    "justify_content"     : space-evenly,
    "justify_items"       : stretch,
    "align_content"       : center,
    "align_items"         : stretch,
    "grid_column"         : auto,
    "grid_row"            : auto,
    "justify_self"        : auto,
    "align_self"          : auto,
  ),
  "sm": (
    "breakpoint"          : 640px,
    "grid_gap"            : 2rem,
    "grid_auto_flow"      : row,
    "grid_auto_columns"   : auto,
    "grid_auto_rows"      : auto,
    "repeat_columns"      : 2,
    "repeat_columns_size" : 1fr,
    "justify_content"     : space-evenly,
    "justify_items"       : stretch,
    "align_content"       : center,
    "align_items"         : stretch,
    "grid_column"         : auto,
    "grid_row"            : auto,
    "justify_self"        : auto,
    "align_self"          : auto,
  ),
  "md": (
    "breakpoint"          : 860px,
    "grid_gap"            : 2rem,
    "grid_auto_flow"      : row,
    "grid_auto_columns"   : auto,
    "grid_auto_rows"      : auto,
    "repeat_columns"      : 2,
    "repeat_columns_size" : 1fr,
    "justify_content"     : space-evenly,
    "justify_items"       : stretch,
    "align_content"       : center,
    "align_items"         : stretch,
    "grid_column"         : auto,
    "grid_row"            : auto,
    "justify_self"        : auto,
    "align_self"          : auto,
  ),
  "lg": (
    "breakpoint"          : 1080px,
    "grid_gap"            : 2rem,
    "grid_auto_flow"      : row,
    "grid_auto_columns"   : auto,
    "grid_auto_rows"      : auto,
    "repeat_columns"      : 4,
    "repeat_columns_size" : 1fr,
    "justify_content"     : space-evenly,
    "justify_items"       : stretch,
    "align_content"       : center,
    "align_items"         : stretch,
    "grid_column"         : auto,
    "grid_row"            : auto,
    "justify_self"        : auto,
    "align_self"          : auto,
  ),
  "xl": (
    "breakpoint"          : 1300px,
    "grid_gap"            : 2rem,
    "grid_auto_flow"      : row,
    "grid_auto_columns"   : auto,
    "grid_auto_rows"      : auto,
    "repeat_columns"      : 4,
    "repeat_columns_size" : 1fr,
    "justify_content"     : space-evenly,
    "justify_items"       : stretch,
    "align_content"       : center,
    "align_items"         : stretch,
    "grid_column"         : auto,
    "grid_row"            : auto,
    "justify_self"        : auto,
    "align_self"          : auto,
  ),
);