how to get a flexible Ember.js parent layout

In an Ember template structure with {{outlet}}s, the way to organize layouts is generally like this:

resource.hbs
  - index.hbs
  - child.hbs

In other words, if I want to use an {{outlet}} to render templates from child routes, I also have to have an index child route that sits in the outlet when at the top level resource route.

Example:

<section id="layout">
  Some layout content
</section>

{{outlet}}

Is there a way to not render anything in the {{outlet}} when I'm in the parent resource route?

My use case is that, in the example above I want section#layout to be width: 100%;, but when in a child route, and the outlet has content, I want section#layout to be half the width.

This may be possible to do with some clever CSS, but I'm thinking I'll need to bind a className to the current route name for this to be possible.