Organic grids

An experimental outlook on visual structure and information hierarchy. Traditional grids introduced by Swiss designer are great for generating robust static layouts. Organic grids focus on reviving these static grids for interactive environments. It is an updated take on grids based on the philosophies of creative coding and motion design.

The organic grid ist constructed with HTML and CSS. It relies mainly on the flexbox properties. Each grid element has a flex: 1 attribute that transforms to flex: 10 on hover. The transitions are added with transition: flex 1s ease-out . ²⁰²³

Creative Coding
Programming
Webdesign

HTML (structure)

The HTML structure of the organic grid consists of a container element that sets the boundaries of the grid. Inside the container, we create a nested structure of horizontal rows, each containing multiple grid cells. The grid cells are represented by the .grid-element class.

<div class="container">
  
  <!-- row 1 -->
  <div class="row">
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
  </div>

  <!-- row 2 -->
  <div class="row">
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
  </div>

  <!-- row 3 -->
  <div class="row">
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
  </div>

</div>

CSS (styling)

Now we can apply the organic grid styling using the classes we created in our HTML structure.

First we set the container element to display as a flex container using display: flex. This allows the grid elements to be positioned in a row. Each grid element has the initial flex value of 1, which means they will take equal space within the row.

On hover, the grid element's flex value is changed to 10, causing it to grow in size. This change in flex value is animated using a transition effect. You can adjust the transition duration (1s in the example) to control the speed of the animation. You can also play around with the gap width and the flex value on hover for variations of the grid.

.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.row {
    display: flex;
    flex-direction: row;
    gap: 2px;
}

.grid-element {
    background-color: red;
}

.row,
.grid-element {
    flex: 1;

    /* add transitions for smooth change of the grid */
    /* play around with transition time */
    -webkit-transition: flex 1s ease-out;
    -moz-transition: flex 1s ease-out;
    -ms-transition: flex 1s ease-out;
    -o-transition: flex 1s ease-out;
    transition: flex 1s ease-out;
}

.row:hover,
.grid-element:hover {
    flex: 10;
}

Typelabs Dear AI Oracle