Responsive Framework for Flexible CSS Grid Layout

Iota is a small, responsive framework for flexible CSS grid layout specifications that is powered by custom CSS properties.

css grid layout examples, css grid responsive columns, responsive css grid generator, css grid vs flexbox, responsive css grid with media queries, grid template areas

Summary

1 class – That’s right, one small chapter is all you need to get ready and up and running. Some additional modes are available to unlock more planning possibilities.
584 bytes gzipped – small IOTA. Like, really small. Depending on how you set it up, the Iota file size can be reduced even further. Because you know… every byte counts.
Endless flexibility – The secret sauce comes from integrating the CSS grid and all its power with custom properties, unlocking true layout freedom without a huge load of unused classes weighing you down.

How to make use of it:

1. Install “iota.css” and import it into your project.

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

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

2. Create a basic CSS grid layout.

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

3. Use additional network categories for different devices.

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

4. Complex use:

<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>

5. Customize “iota.css” by overriding the default variables in “_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,
  ),
);

minimal flexible css grid layout, Iota.css Plugin/Github