29 March 2024

Slvrdlphn.com

Living loving learning

Creating a responsive web layout using a grid

9 min read

In the 90s we designed websites with tables.  It was chunky but as web layout tools go it worked.  It helped in making sure that all the elements of the website were organized.  Today tables are still in use but not as a layout tool for websites.  Tables are usually used for organizing tabular data instead … which is what it was created for in the first place.

The trend now, in web design, is to create web layouts with the use of a GRID.

Grid layout

pie-slicesA grid supports arranging views into rows and columns. Rows and columns can be set to have proportional sizes or absolute sizes. The Grid layout should not be confused with traditional tables and is not intended to present tabular data. The grid does not have the concept of the row, column, or cell formatting. Unlike HTML tables, Grid is purely intended for laying out content. (original source: Xamarin.com)

Think of a web page as a pie and each slice of a pie is the specific content of your website.  It could be an image, a video, or text content.  It could be a map or even an ad.  Whatever it is, at the end of the day, we assign a size to this element and we also assign a place for it on our page.

How do we create a grid?

There are two ways to create a grid … fixed measurements like pixels (px) and variable measurements like percent (%).  Let’s take a look at the table below.

Col or spanWidth (px)Width (%)Gutter (px)Gutter (%)OffsetMargin-left
1306.25%101.0416666667%18.3333333%
214014.5833333333%101.0416666667%216.6666667%
322022.9166666667%101.0416666667%325%
430031.25%101.0416666667%433.3333333%
538039.5833333333%101.0416666667%541.6666667%
646047.9166666667%101.0416666667%650%
754056.25%101.0416666667%758.3333333%
862064.5833333333%101.0416666667%866.6666667%
970072.9166666667%101.0416666667%975%
1078081.25%101.0416666667%1083.3333333%
1186089.5833333333%101.0416666667%1191.6666667%
1294097.9166666667%101.0416666667%12100%

The left part illustrates the widths, the middle part, the gutter, and the part on the right the offset or indent.

Don’t let the math scare you!  After all, we’ve already done all the computations for you. 🙂  But if you are curious about how we came up with those numbers, here is how each one was computed.

What is the basis for the maximum width?  Shouldn’t it just be 100%?

It starts off with the premise that we are designing for a standard resolution of 1024×768 and that we will not be utilizing the entire screen.  Therefore, 100% of the container will be 960.

Why 960?

It is the biggest number closest to 1024 which is divisible by 12.

Why is the gutter 10px (or 1.0416666667% in percent)?

In my opinion, the reason is that 10px has been an industry standard for minimum measurement since the beginning, whether it is font size or margins, or padding.  Another reason though had to do with the equal distribution of elements. 🙂

Why are there 2 kinds of measurements – in pixels and percent?

Widths defined in pixels (px) are what we call fixed widths.  This means that no matter what size screen (or device) is used the size will remain constant.  Therefore, there may be times when an element would be too big or too small for the screen.

Widths defined in percent (%) are called variable widths.  This means that the width of the element will adjust to the size of the screen or device when viewed.

How wide can an element be?

Visualize your webpage in your head.  Now let’s focus on just one straight horizontal line.  Now divide that line into 12 parts but put some space in between each part.  Do you see it yet?

12 columns
12 columns in a row

In the picture above take note of the blue border.  That is what we refer to as the GUTTER.  It is the designated space separating each element of your website that you will use.  In the table above the gutter is equivalent to 10px (1.0416666667%).

Let’s do some math

How did we come up with those numbers?  Here’s how it was computed

the grid layout
the grid layout

col1 (or span1)(960/12)=80-20 (this is the gutter on the left and right side)=60;therefore, (60/960)x100=6.25%
col2 (or span2)col1 (or span1)x2=160-20=140;therefore, (140/960)x100=14.5833333333%
col3 (or span3)col1 (or span1)x3=240-20=220;therefore, (220/960)x100=22.9166666667%
col4 (or span4)col1 (or span1)x4=320-20=300;therefore, (300/960)x100=31.25%
col5 (or span5)col1 (or span1)x5=400-20=380;therefore, (380/960)x100=39.5833333333%
col6 (or span6)col1 (or span1)x6=480-20=460;therefore, (460/960)x100=47.9166666667%
col7 (or span7)col1 (or span1)x7=560-20=540;therefore, (540/960)x100=56.25%
col8 (or span8)col1 (or span1)x8=640-20=620;therefore, (620/960)x100=64.5833333333%
col9 (or span9)col1 (or span1)x9=720-20=700;therefore, (700/960)x100=72.9166666667%
col10 (or span10)col1 (or span1)x10=800-20=780;therefore, (780/960)x100=81.25%
col11 (or span11)col1 (or span1)x11=880-20=860;therefore, (860/960)x100=89.5833333333%
col12 (or span12)960-20=940;therefore, (940/960)x100=97.9166666667%

The same principle applies to the gutter … (10/960)x100=1.0416666667%

Oh, headache!  So much math!

mathKeep calm.  We already did the math for you, all you need to do is apply the widths to your elements as classes. 🙂  Since these measurements are most likely to be used over and over, we will use them as classes in our CSS and will be written down like this:

[pastacode lang=”css” manual=”%2F*%20GRID%20LAYOUT%20*%2F%0A.col1%2C%20.col2%2C%20.col3%2C%20.col4%2C%20.col5%2C%20.col6%2C%20.col7%2C%20.col8%2C%20.col9%2C%20.col10%2C%20.col11%2C%20.col12%20%7B%0A%20%20%09margin%3A%20%201.0416666667%25%3B%0A%7D%0A.col1%20%7B%0A%20%20%09width%3A%206.25%25%3B%0A%7D%0A.col2%20%7B%0A%20%20%09width%3A%2014.5833333333%25%3B%0A%7D%0A.col3%20%7B%0A%20%20%09width%3A%2022.9166666667%25%3B%0A%7D%0A.col4%20%7B%0A%20%20%09width%3A%2031.25%25%3B%0A%7D%0A.col5%20%7B%0A%20%20%09width%3A%2039.5833333333%25%3B%0A%7D%0A.col6%20%7B%0A%20%20%09width%3A%2047.9166666667%25%3B%0A%7D%0A.col7%20%7B%0A%20%20%09width%3A%2056.25%25%3B%0A%7D%0A.col8%20%7B%0A%20%20%09width%3A%2064.5833333333%25%3B%0A%7D%0A.col9%20%7B%0A%20%20%09width%3A%2072.9166666667%25%3B%0A%7D%0A.col10%20%7B%0A%20%20%09width%3A%2081.25%25%3B%0A%7D%0A.col11%20%7B%0A%20%20%09width%3A%2089.5833333333%25%3B%0A%7D%0A.col12%20%7B%0A%20%20%09width%3A%2097.9166666667%25%3B%0A%7D%0A” message=”fluid-css” highlight=”” provider=”manual”/]

In the code above I applied float: left on all the classes since float: left is usually applied to elements using this selector anyway.  You can always delete it from your code or use float: none selectively.

How do we use it?

Just keep in mind one thing … the total width of 1 line (in parts).  Therefore, you can keep adding div classes of different sizes (widths) until you reach 12 without going over. If you do, the last element will go to the next line.  For example:

spanning-sample

Given the sample above your HTML will look something like this:

[pastacode lang=”markup” manual=”%3Chead%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col1%22%3ESPAN1%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col2%22%3ESPAN2%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col3%22%3ESPAN3%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col4%22%3ESPAN4%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col5%22%3ESPAN5%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col6%22%3ESPAN6%3E%3C%2Fdiv%3E%0A%3C%2Fbody%3E” message=”” highlight=”” provider=”manual”/]

Since 1, 2, 3, and 4 are short of making up 12, they were able to stand side by side.  But with the addition of 5, it already exceeded 12, therefore, the div went to the next line.

Offset layout

pushMany get confused by this.  What is offset in web design?  Simply put, let’s call it an INDENT.  According to the Oxford Dictionary indent means to … “Start (a line of text) or position (a block of text, table, etc.) further from the margin than the main part of the text.”

In other words, it is like saying you push an element in from the left side to a position you designate.

So how far can we push it?  Just like in the grid layout, we can also divide this into 12 equal parts.  This time, though, there is no gutter to think about and the only thing we need to think about it is the value in percent, not in pixels.

offset

Time for some math again, just to show you how it was computed.

  • offset1:  (1/12)*100=8.3333333%
  • offset2:  (2/12)*100=16.6666667%
  • offset3:  (3/12)*100=25%
  • offset4:  (4/12)*100=33.3333333%
  • offset5:  (5/12)*100=41.6666667%
  • offset6:  (6/12)*100=50%
  • offset7:  (7/12)*100=58.3333333%
  • offset8:  (8/12)*100=66.6666667%
  • offset9:  (9/12)*100=75%
  • offset10:  (10/12)*100=83.3333333%
  • offset11:  (11/12)*100=91.6666667%
  • offset12:  (12/12)*100=100%

In plain English it means … if you want to indent an element by 8.33% then apply offset1, if you want to indent an element by 16.67% you apply offset2, if you want to indent an element by 25% then apply offset3, etc.

Simple, right?

As for the CSS, it will look like this:

[pastacode lang=”css” manual=”.offset1%20%7B%0A%09margin-left%3A%208.3333333%25%3B%0A%7D%0A.offset2%20%7B%0A%09margin-left%3A%2016.6666667%25%3B%0A%7D%0A.offset3%20%7B%0A%09margin-left%3A%2025%25%3B%0A%7D%0A.offset4%20%7B%0A%09margin-left%3A%2033.3333333%25%3B%0A%7D%0A.offset5%20%7B%0A%09margin-left%3A%2041.6666667%25%3B%0A%7D%0A.offset6%20%7B%0A%09margin-left%3A%2050%25%3B%0A%7D%0A.offset7%20%7B%0A%09margin-left%3A%2058.3333333%25%3B%0A%7D%0A.offset8%20%7B%0A%09margin-left%3A%2066.6666667%25%3B%0A%7D%0A.offset9%20%7B%0A%09margin-left%3A%2075%25%3B%0A%7D%0A.offset10%20%7B%0A%09margin-left%3A%2083.3333333%25%3B%0A%7D%0A.offset11%20%7B%0A%09margin-left%3A%2091.6666667%25%3B%0A%7D%0A.offset12%20%7B%0A%09margin-left%3A%20100%25%3B%0A%7D” message=”offset” highlight=”” provider=”manual”/]

Just as with the grid layout we designated these as classes because the premise is, we will most likely be using them several times on a page.

Is it possible to use the grid layout and the offset at the same time?

Absolutely!  It all depends on your design needs.  In the meantime, have fun experimenting with your web layout while using these. 🙂

Facebook Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Protected by CleanTalk Anti-Spam