Quick Links

Content Alignment Basics     Auto Height     Minimum Aspect Ratio      Minimum Height    Fixed Height & Fixed Aspect Ratio 

Cell Content Alignment - The basics

The three cells below demonstrate the Cell Content Alignment property used in conjunction with a Fixed Cell Height (see section below).

The first cell has its content aligned Top (this is the default setting

The second cell has it's content aligned to the Middle

The third cell has it's content aligned to the Bottom

The cells below have a Fixed Height of 400px. Read more about this here. They have a padding setting of 2% All. The Section Grid is set to Auto (i.e NOT Cells Match Tallest).

Scroll down to the next section to see how we can do this with a picture, or any other form of content.

N.B The Cell you are reading this in has it's height set to Auto read more about this here.

Let's see how we can do the same with a picture

Or any other form of content, for that matter.  All settings have been kept the same as in the previous example.

What happens when we introduce a heading to that picture?

Or any other form of content, or even one passage of text, so long as it's separated by a paragraph break. (Understand the difference between a paragraph and a line break here.)

You will see, three new options have come into play.  In fact, they were always there, but because in the previous examples we only had one piece of content with no paragraph breaks, the new options wouldn't have taken affect.  This is because they offer three possibilties of spacing two or more pieces of content.  Let's look at these new options.

Content Alignment - Space Around

 Content is evenly distributed  with equal space around items

Content Alignment - Space Between

Content is evenly distributed; first item is at the top, last item is at the bottom

Content Alignment - Space Evenly

Content is distributed so that the spacing between any two items (and the space to the top and bottom) is equal.

To see this effect with even more content added, see below

Lets add some more content to the mix

We can see how Space Around, Space Between and Space Evenly work more clearly now.

But there's more.  Next we're going to be looking at different Height Basis options

Height Basis - Auto

Up to this point, we've set our green cells to a Fixed Height of 400px. This was in order to best demonstrate the various Content Alignment options.  Let's now compare the different Height Basis choices. 

First up is Height Basis - Auto.  That's the default setting, and as the green cells below demonstrate, the cell height is determined by the amount of content in them (and any padding applied, in this case 2% on all sides).

Height Basis - Minimum Aspect Ratio 

With Height Basis - Minimum Aspect Ratio, the height of the cell is determined by a percentage value of it's width, but the height of the cell never becomes less than the content it contains (compare this with Height Basis - Fixed Aspect Ratio).

In order to give the first cell below some extra height, I've applied a large Minimum Aspect Ratio of 700% of its width i.e 7 times high, as it is wide.

The second cell below has a Minimum Aspect Ratio of 200% i.e twice as high as it is wide.

The third cell has Minimum Aspect Ratio of 100% i.e it is as high as it is wide.

The final cell has its height set to 50%.  Nothing has changed, it's as high as the content filling it.  Note that Anything less than 100% will have no difference to the height of the cell with this setting - 50%, 20%, - 2000%, nothing will reduce the height of this cell to less than the content it contains.

N.B In all cases below, content has been aligned - Top 

N.B This cell is still set to Height Basis - Auto which also demonstrates how we can mix up different height settings in one section grid.

Height Basis - Minimum Height

Height Basis - Minimum Height defines the minimum height of a cell.

If the content is smaller than the minimum height, the Minimum Height will be applied.

If the content is larger than the minimum height, The Minimum Height property has no effect.

you can see this being demonstrated in the three cells below

Height Basis - Fixed Height & Fixed Aspect Ratio

 Note: these settings are only recommended when your cell is decorative, and doesn't contain any content such as text.

Fixed Height defines the exact height of a cell in pixels. The height of any cell content is ignored.

Fixed Aspect Ratio is similar to Minimum Aspect Ratio in so far as the height of the cell is determined by a percentage value of it's width. The difference, however, is that the cell can become shorter than the content it contains, effectively cutting off your content. (see example below).

We therefore don't recommend these settings if your cell contains any content!

Ok, so why would we even have this option? The answer is that it is useful if you want to size a cell that is purely decorative, and doesn't have any actual content such as text. When an empty cell is set to Auto height, it collapses. So in this situation you can set the cell to a Fixed Height or Fixed Aspect Ratio and the cell height will be forced to be that particular height.

Please see the examples below for instances where this might be useful.

Fixed Height

The cell below has a tile pattern set as a background to the cell - background images can be set to repeat as you can see.  This background image has been sized to 60px high and set to repeat horizontally. So that we can see the whole of the height of the image, we also set the height of the cell to be a fixed height of 60px, regardless of the viewport width. 

Try resizing the browser window - the height of the cell and repeating pattern stays the same.

Fixed Aspect Ratio

 The  cell below has the same image, again set to repeat horizontally but in this instance we wanted to show 3 tiles side by side, no matter what the viewport size. To achieve this we have given the background image a width of 33.33% (approx 100% divided by 3).

To ensure we can always see the full height of the repeated images, we have given the cell a Fixed Aspect Ratio of the same (33.33%). 

Try resizing the browser window and notice how the cell and the  images resize exactly to fit at all times.

Fixed Height and Fixed Aspect Ratio with content 

The cells below demonstrate how content can be cut off when using the Fixed Height  setting, and why it is best not to use it with cells containing content!