Setting a specific cell height or aspect ratio and aligning content vertically

Running Time: 01m 03s

 

This video gives you an overview of Sketchanet's powerful Cell Height and Content Alignment settings.

NB Click on Image in the bottom right of the video to view fullscreen.

 

By default, all cells are the height of the content (text and images etc) inside them (plus any top and bottom padding). Sometimes you might want to override this (for aesthetic reasons) so that a cell or cells have a minimum aspect ratio (width to height ratio), or a fixed height, regardless of how much content is inside.

 

If you do apply a minimum or a fixed height, then you can also control the vertical alignment of the content, as there is likely to be excess vertical height in the cell and hence you can align the content to the top, middle, bottom, or use one of the more advanced spacing options.

 

IMPORTANT: Please be aware that if you apply a fixed height to a cell, then the content of the cell may get cut off at smaller screen sizes. Be sure to test this on all devices. For this reason if you do have content in a cell, it is recommended that you apply only a minimum height or a minimum aspect ratio, rather than one of the fixed settings.

 

The  video below will give a brief overview of where the various settings can be found in the editor.  We then urge you to scroll down the page, where we have demonstrated what effect these settings have in practise.

 

Please note that this tutorial is best viewed on a desktop computer.

 

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.

Content Aligned
Top

Content Aligned
Middle

Content Aligned
Bottom

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.

Image

Image

Image

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

Content Aligned Top


Image

Content Aligned Middle


Image

Content Aligned Bottom


Image

Space Around


Image

Space Between

Image

Space Evenly


Image

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

Content Aligned Top


Image

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Content Aligned Middle


Image

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Content Aligned Bottom


Image

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Space Around


Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Space Between

Image

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Space Evenly


Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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).

Not much content

 

Image

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Medium content

 

Image

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in pellentesque urna. Nam neque odio, iaculis a hendrerit et, consequat nec libero. Vivamus hendrerit gravida nulla vel tempor. Praesent eget lacinia nulla, eu condimentum quam. Morbi lacinia eros nec ligula faucibus mattis.

Loads of content

 

Image

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in pellentesque urna. Nam neque odio, iaculis a hendrerit et, consequat nec libero. Vivamus hendrerit gravida nulla vel tempor. Praesent eget lacinia nulla, eu condimentum quam. Morbi lacinia eros nec ligula faucibus mattis. Vestibulum quis nulla dui. Duis vel placerat justo, a vulputate ante. Pellentesque et convallis libero.

 

Donec lobortis erat suscipit lorem malesuada, id mollis nibh luctus. Donec vitae nulla metus. Duis tempus quam eu ligula cursus, vitae imperdiet risus euismod.

Cras pulvinar egestas commodo. Donec a dolor lorem. Praesent eget pulvinar lacus, non vestibulum felis. Aliquam ac mi rutrum, imperdiet diam in, laoreet neque. 

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.

Minimum Aspect Ratio of 700%

 

Image

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Minimum Aspect Ratio of 200%

 

Image

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in pellentesque urna. Nam neque odio, iaculis a hendrerit et, consequat nec libero. Vivamus hendrerit gravida nulla vel tempor. Praesent eget lacinia nulla, eu condimentum quam. Morbi lacinia eros nec ligula faucibus mattis.

Minimum Aspect Ratio of 100%

 

Image

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in pellentesque urna. Nam neque odio, iaculis a hendrerit et, consequat nec libero. Vivamus hendrerit gravida nulla vel tempor. Praesent eget lacinia nulla, eu condimentum quam. Morbi lacinia eros nec ligula faucibus mattis. Vestibulum quis nulla dui. Duis vel placerat justo, a vulputate ante. Pellentesque et convallis libero.

 

Donec lobortis erat suscipit lorem malesuada, id mollis nibh luctus. Donec vitae nulla metus. Duis tempus quam eu ligula cursus, vitae imperdiet risus euismod.

Cras pulvinar egestas commodo. Donec a dolor lorem. Praesent eget pulvinar lacus, non vestibulum felis. Aliquam ac mi rutrum, imperdiet diam in, laoreet neque. 

Minimum Aspect Ratio of 50%

 

Image

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in pellentesque urna. Nam neque odio, iaculis a hendrerit et, consequat nec libero. Vivamus hendrerit gravida nulla vel tempor. Praesent eget lacinia nulla, eu condimentum quam. Morbi lacinia eros nec ligula faucibus mattis. Vestibulum quis nulla dui. Duis vel placerat justo, a vulputate ante. Pellentesque et convallis libero.

 

Donec lobortis erat suscipit lorem malesuada, id mollis nibh luctus. Donec vitae nulla metus. Duis tempus quam eu ligula cursus, vitae imperdiet risus euismod.

Cras pulvinar egestas commodo. Donec a dolor lorem. Praesent eget pulvinar lacus, non vestibulum felis. Aliquam ac mi rutrum, imperdiet diam in, laoreet neque. 

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

Minimum Height of 700px

 

Image

 

The content in this cell is shorter than 700px but the minimum height setting forces the cell to be 700px tall anyway.

Minimum Height of 400px

 

Image

 

The content in this cell is shorter than 400px but the minimum height setting forces the cell to be 400px tall anyway.

Minimum Height of 20px

 

Image

 

This time, it is the other way around - you can see the content in this cell is much taller than the minimum height of 20px and hence the cell grows to be the height of the content.

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!

Fixed Height of 420px

 

Image

 

This cell demonstrates 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.

Fixed Aspect Ratio -  115%

 

Fixed Aspect Ratio of 95%

 

Image

 

This cell demonstrates how content can be cut off when using the Fixed Aspect Ratio  setting, and why it is best not to use it with cells containing content.