Using CSS grid layout with Ionic

October 29, 2017, 6:16 pm Categories:

Categories

CSS Grid is a relatively new feature that allows developers to create layouts for their websites/applications that would have been previously difficult, if not - in some circumstances - impossible, to accomplish.

Over the course of this tutorial we're going to use this feature (with a Flexbox fallback for non-supporting browsers) to develop a single page Ionic project with the following interface:

CSS grid layout displayed in full on desktop

When the browser viewport is resized (or the project is viewed on devices with a default smaller viewport) the layout automatically adjusts courtesy of the CSS Grid rules that have been applied:

CSS grid layout displayed in different viewport sizes

It's important to be aware that our application won't do anything other than demonstrate how CSS Grid Layout can be used to create a well structured, responsive, aesthetically pleasing interface.

I also won't be taking you through the core fundamentals of CSS Grid and explaining each of the key features that are available - I'll leave that to resources like the following:

Before we begin coding though there's one critical factor that we can't afford to overlook.

Caveat emptor

Whenever we are looking at using a relatively new technology feature we always have to start with the following question: What is the current level of browser/device support?

As it stands support for CSS Grid Layout is relatively limited:

Browser Version
IE11 Partial support (for older specification of CSS Grid layout)
Edge 15 - Partial support (for older specification of CSS Grid layout)
16 - Full support
Firefox 55+
Chrome 60+
Safari 10.1+
Opera 47+
iOS Safari 10.3+
Android 56+
Chrome for Android 61+

Definitely not encouraging as far as being able to use this feature with a much wider audience.

Thankfully there are some fallback options we can rely on to help provide an "emulated" grid experience for legacy/non-supporting browsers.

One of those is the CSS-Grid-Polyfill which provides grid support for browsers from IE9 upwards.

At first glance this sounds great but, unfortunately, the project hasn't been updated in some time and provides support based on an outdated specification.

Alternatively we can look to use CSS 3's flexbox layout mode to provide that "emulated" grid experience - the only caveat here being that browser support is still a factor (albeit not as severe as that for CSS Grid Layout).

Whichever way we cut it support is going to be a factor for implementing CSS Grid Layout (albeit slightly less so for CSS Flexbox).

That doesn't mean we can't still play with this technology though...right? ;)

Laying the foundation

Open your preferred system CLI software, navigate to a location on your computer where you would usually store your digital projects and issue the following Ionic CLI command to create a new project named ionic-grid:

ionic start ionic-grid blank

We won't be adding any plugins or node packages and nor will we be generating additional components, providers or making configuration changes to the application's root module or package.json file.

What we will be doing is simply editing the following files to respectively add the necessary style rules and templating for the project:

  • ionic-grid/src/app/app.scss
  • ionic-grid/src/pages/home/home.html

Let's start with the additions for the app.scss file first as these are easily the most involved of the coding required for these files.

Crafting the project style rules

To ensure that our project layout can be rendered in legacy browsers (and those browsers that don't support the CSS Grid Layout specification(s)) we'll be adding CSS Flexbox style rules as a fallback option.

We could, if we felt it necessary, use the previously mentioned CSS Grid polyfill to add support for such browsers but, as stated earlier, the project hasn't been updated in some time and is based on an older version of the CSS Grid Layout specification.

If you decide to go down this road in your own projects then please do so advisedly.

As with any project your choice of technology should always be guided by your analytics data (there may also be the additional challenge of developing for a client and guaranteeing that the project works on their systems [which may have the added challenge of being antiquated in technology terms] - I can still remember, even as late as 2013, one client that I worked for had to guarantee that their website was 100% compatible with IE6...talk about styling headaches right there!)

For modern browsers that do support the CSS Grid Layout we'll make use of the following features (which will be explained in full within the code itself):

  • grid-template-columns
  • grid-auto-rows
  • minmax
  • grid-column
  • @supports

We'll use the ionic-grid/src/app/app.scss file to add our CSS as this is where all style rules that are to be applied globally for a project should be placed.

Open this file and then add the following style rules (comments are there to guide you as to the purpose of each rule):

// IF the browser does NOT support the  CSS Grid Layout specification
// We rely on the use of the CSS Flexbox standard instead
.wrapper {
   display: flex;
   flex-wrap: wrap;
}


// IF the browser DOES support the CSS Grid Layout specification
// then the following rules are applied instead
.wrapper {
   display: grid;

   // Define a 10 pixel gap between each grid track
   grid-gap: 10px;
 
   // Define a rule, that will be repeated for each grid column, where
   // the grid track is set to a minimum width of 300 pixels and a maximum 
   // width of the available space within the grid container (via the fr or 
   // fraction unit)

   // The auto-fill value allows as many grid tracks to be fitted into the
   // width of the grid container as possible
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

   // Specify the height of the row - minimum value of 50 pixels and a maximum
   // value set to auto
   grid-auto-rows: minmax(150px, auto);

}


// Define the header/footer tag values
header,
footer {
   padding: 3em;
   margin-left: 5px;
   margin-right: 5px;
   // Add a flex rule for browsers not supporting the
   // CSS Grid Layout spec
   flex: 0 1 100%;
   // Define the start and end values for the grid column
   grid-column: 1 / -1;
   text-align: center;
   background-color: rgba(175, 186, 202, 1);
}


// Define the style rules for each panel within the grid
// container
.box {
   border-radius: 5px;
   padding: 3em;
   margin-left: 5px;
   margin-right: 5px;
   // Add a flex rule for browsers not supporting the
   // CSS Grid Layout spec
   flex: 1 1 300px;

   h2 {
      font-weight: bold;
  }
}


// We need to ensure that browsers that fall back to the
// Flexbox rules add a bottom margin of 10 pixels to all 
// direct child elements within the grid container (to 
// emulate the grid gap)
.wrapper > * {
  margin-bottom: 10px;
}


// Use a feature query to determine if the browser supports 
// a specific CSS rule - in this case the display: grid property

// If the rule is supported then we remove the flexbox fallback 
// rule of adding 10 pixels to the bottom margin of each child 
// decendent of the grid container (to emulate the grid gap)
@supports (display: grid) {
  .wrapper > * {
    margin: 0;
  }
}



// Add the necessary classes for styling the 
// background colours of each panel in the 
// project UI
.red {
	background-color: rgba(220, 83, 81, 1);
}

.green {
	background-color: rgba(187, 225, 123, 1);
}

.blue {
	background-color: rgba(131, 150, 225, 1);
}

.purple {
	background-color: rgba(155, 121, 170, 1);
}

.yellow {
    background-color: rgba(235, 229, 39, 1);
}

.violet {
    background-color: rgba(213, 118, 211, 1);
}

.orange {
	background-color: rgba(213, 151, 46, 1);
}

.turquoise {
	background-color: rgba(105, 203, 217, 1);
}

Minus the comments that's a fairly small set of style rules for the project.

We've simply made use of selected properties from both CSS Grid Layout and CSS Flexbox to ensure that our project will play nicely on as wide a browser base as possible.

Now all that remains is to add the necessary templating for our styles to reference.

Crafting the template

The markup for the project is incredibly simple and will consist of a container element that encapsulates a header, footer and eight separate child <div> elements.

These are constructed within the ionic-grid/src/pages/home/home.html template as shown below:

<ion-header>
  <ion-navbar>
    <ion-title>
      CSS Grid
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

   <div class="wrapper">
      <header>
         <h1>Ionic Technologies</h1>
      </header>

      <div class="box red">
         <h2>Angular</h2>
         <p>Front-end development framework</p>
      </div>

      <div class="box green">
         <h2>Ionic Native</h2>
         <p>Apache Cordova compatible plugins</p>
      </div>

      <div class="box blue">
         <h2>TypeScript</h2>
         <p>Superset of JavaScript</p>
      </div>

      <div class="box purple">
         <h2>Sass</h2>
         <p>Object oriented CSS</p>
      </div>

      <div class="box orange">
         <h2>HTML 5</h2>
         <p>Semantic Mark-up and related API's</p>
      </div>

      <div class="box violet">
         <h2>Ionic CLI</h2>
         <p>The engine behind the framework</p>
      </div>

      <div class="box turquoise">
         <h2>Stencil</h2>
         <p>Web component generator</p>
      </div>

      <div class="box yellow">
         <h2>Web Components</h2>
         <p>Self-packaged modules</p>
      </div>

      
      <footer>Footer</footer>
   </div>

</ion-content>

You'll be pleased to know that with this additional markup the project is now fully developed!

Told you it was going to be a simple tutorial didn't I?

Let's launch our project in the browser and see how the CSS Grid layout performs.

Testing the layout

Return back to your system CLI, navigate to the root of the ionic-grid project and run the following command:

ionic serve

This will subsequently launch your project in the browser like so:

CSS grid layout displayed in full on desktop

Now play around with resizing the viewport to see how the grid layout behaves.

You should start to see the application interface resizing and reformatting itself according to the viewport width:

CSS grid layout displayed in different viewport sizes

You can even start switching off the CSS Grid style rules in the browser Web Inspector to see how the fallback CSS Flexbox style rules are subsequently used to maintain the grid layout for the application.

As with all things web related - play and have fun!

In summary

Despite support for CSS Grid Layout not, at the time of writing, being widely available that doesn't mean we can't start exploring how this feature could be used in our own projects.

There's a lot of excellent online resources available for developers to learn and familiarise themselves with CSS Grid the best of which I've found are as follows:

Hopefully you've found the above tutorial useful and it's given you a taste for using the CSS Grid Layout within Ionic - there's a lot more we could have touched upon and developed further but I'll leave such possibilities for a subsequent tutorial.

If you've enjoyed what you've read and/or found this helpful please feel free to share your comments, thoughts and suggestions in the comments area below.

I explore how the Ionic framework can be further themed and styled within my e-book featured below and if you're interested in learning more about my e-books please sign up to my FREE mailing list where you can receive updates on current/forthcoming e-books and blog articles.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

Top