CSS Grids & OutSystems

Almost a year ago I was reading some blogs about CSS Grids and how it could change de way we create websites and applications.

Some of my favorites include Morten Rand-Hendriksen and his fantastic presentation CSS Grid Changes EVERYTHING.

More recently a friend pointed me to some deep thought about CSS Grid by Jen Simmons and her series of videos Layout Land.

Inspired by this video where Jen takes a magazine design from the '30s and creates a responsive web page, I wanted to see what would it take to work with, and implement, CSS Grid in OutSystems.

Replicating a 1930's style magazine

This was a direct implementation of Jen's example, just by using the CSS editor in OutSystems.

And the responsive features are awesome

Even in a mobile phone screen size

It really shows the power of CSS Grid in determining what goes where dependent on the size of the browser.

You can take a look at this example here. (change the size of the browser to see the responsive effect)

Creating a component

The next step was obviously to create a component to make it easier for the not so CSS savvy developers.

So there are two components the grid container to hold the grid itself and set most of its properties and the grid item which allows you to put anything inside and also set its properties. These properties are converted to CSS.

The end result is total flexibility when designing a structure to hold content.

You can take a look at the example here. (change the size of the browser to see the responsive effect)

Data-driven - Gallery example

Of course, you don't go anywhere without data, so trying this technique out on a data-driven component is a must.

It is impressive how you can implement a gallery with 4 lines of CSS.

.grid-container-base {  
  display:grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}

.grid-item-base{
  display: flex;
}

And it adjusts the number of tiles according to the width of the browser.

You can take a look here. (change the size of the browser to see the responsive effect)

As usual, this example can be found on the OutSystems Forge.

I wonder what would it take to create a full page layout/template using CSS Grid? Are you up for the challenge? What will you build today?