```
This would give you a grid item which is 100% wide unless it is on a
[lap](../core/settings/_breakpoints.scss) device, at which point it becomes
50% wide, or it is on a desktop device, at which point it becomes 33.333% wide.
### Side-by-side
And here is an example of where you would use the side-by-side layout module:
[](https://dl.dropboxusercontent.com/s/mvsgop57g3fm5mj/side-by-side%20layout%20module%20example%201.png)
[](https://dl.dropboxusercontent.com/s/spqikubn6gmdxn3/side-by-side%20layout%20module%20example%202.png)
The grey boxes represent each side-by-side layout module.
**The HTML**
```
```
**The CSS**
- [Default](_l-side-by-side.scss)
- [Alternative](_l-side-by-side-alt.scss)
You might be wondering why don't we just use the grid for this? You certainly
can use the grid however you will need to specify widths for each grid cell and
those widths might need changing based on the viewport size,
[see here](#responsive-grid). The side-by-side layout module cells do not
require widths instead the left and right cells will shrink wrap it's content
making it much more easier to implement this type of layout than the grid.
The side-by-side layout module is responsive friendly just like the grid. The
left and right parts will stack on top of eachother up until a certain
breakpoint where they'll then become–well side-by-side. This behaviour is
configurable by these two settings:
```
$l-side-by-side-apply-linear: [true/false];
$l-side-by-side-apply-linear-when: [a breakpoint];
```
The default values for these settings are:
```
$l-side-by-side-apply-linear: true !default;
$l-side-by-side-apply-linear-when: palm !default;
```
### Combined
Layout modules work perfectly well with each other meaning they can be nested
within each other e.g. the **side-by-side** layout module can be nested within
the **grid** layout module which itself can be nested within the **container**
layout module. When layout modules are combined like this they're extremely
powerful taking care of most—if not all—of your UI layout needs.
So if we take this piece of UI again:
[](https://dl.dropboxusercontent.com/s/mvsgop57g3fm5mj/side-by-side%20layout%20module%20example%201.png)
We can combine three of our layout modules and their modifiers to achieve this
layout:
[](https://dl.dropboxusercontent.com/s/a57y2wy6wc8jwsh/layout%20modules%20combined.png)
In order of stacking (bottom to top):
- Container *(modifier: full-bleed)*
- Container
- Grid
- Side-by-side
**The HTML**
```
```
### Do not mix other styles
You should **never** mix in any other styles with any of the layout modules.
This ties in with the [single responsibility principle](http://csswizardry.com/2012/04/the-single-responsibility-principle-applied-to-css/)
and the [open/close principle](http://csswizardry.com/2012/06/the-open-closed-principle-applied-to-css/) which is used for utilities and objects.
So if we look at the HTML for the header demo'd above for this piece of UI:
[](https://dl.dropboxusercontent.com/s/mvens15cnriutog/side-by-side%20layout%20module%20example%203.png)
```
```
And we need to add padding to all sides of the left grid cell and add the sub
nav component to the right grid cell we would mark it up like this:
```
```
## Namespace
All layout classes and settings are prefixed with `l-` so that they're easily
identifiable e.g.
- `.l-grid`
- `$l-grid-apply-at-breakpoints`
## Further reading
*Make sure to read the documentation within each layout Sass partial file as it
will contain information about the layout module and it's implementations.*
- [CSS guidelines - The separation of concerns](http://cssguidelin.es/#the-separation-of-concerns)
- [The single responsibility principle applied to CSS](http://csswizardry.com/2012/04/the-single-responsibility-principle-applied-to-css/)
- [The open/closed principle applied to CSS](http://csswizardry.com/2012/06/the-open-closed-principle-applied-to-css/)