The address for this web page is:   `http://fishcaro.crosswinds.net/day_37_grids.htm`
On to the next lesson!
Back to the COURSE SYLLABUS

# 37. GRIDS

The last two tutorials of Worksheet #36 introduced the ideas of creating frames with a GRID structure (a simple arrangement of rows and columns), and NESTING FRAMESETS for more complicated arrangements. This lesson explores the GRID structure.

INDEX CARD #37:

## WHAT IS A GRID? (37a)

The word "grid" is used to refer to an arrangement of rows and columns where each row goes all the way across, and each column goes all the way up and down, something like this:
 cell 1 cell 2 cell 3 cell 4 cell 5 cell 6 cell 7 cell 8
In contrast, the following would NOT be called a grid.
 cell 1 cell 2 cell 3 cell 4
Grids are created by using the `ROWS` and `COLS` attributes in the `<FRAMESET>` tag, as discussed in card 37b. However, non-grid structures must use the idea of NESTING FRAMESETS, which is discussed in Lesson 38.

## CREATING A GRID (37b)

A grid is created by specifying the desired row and column structure in the `<FRAMESET>` tag, like this:
``````<FRAMESET ROWS="comma_separated_list_of_rows"
COLS="comma_separated_list_of_columns">
<FRAME SRC="frame_1.htm">
<FRAME SRC="frame_2.htm">
(and so on...)
</FRAMESET>
``````
You must have one `<FRAME>` tag for each cell. If you have m rows and n columns, then you will need mn `<FRAME>` tags. The order that you list the frames inside the `<FRAMESET>` container IS IMPORTANT! Frames are loaded top-to-bottom and left-to-right. That is, left-to-right along the first row. Then, left-to-right along the second row. And so on.

There is lots more information on specifying the comma-separated lists of rows and columns on cards 37c, 37d, and 37e.

## WAYS TO SPECIFY SIZE: (37c) ABSOLUTE PIXELS VALUES

Frame size can be specified in three ways: absolute pixel values, percentages, and relative values. This card discusses ABSOLUTE PIXEL VALUES.

The code

`<FRAMESET COLS="100,400" ROWS="150,50">`
creates two columns and two rows. The first column is set to 100 pixels; the second 400 pixels. The first row is set to 150 pixels; the second 50 pixels.

If the browser window is larger (or smaller) than the total specified pixels, each frame is "scaled" proportionally to fill the entire window. So, you're not really guaranteeing a fixed pixel size at all! Really, all this specification is guaranteeing is that the second column is four times the width of the first column; the first row is three times the width of the second row.

Be sure to change the window size and see what happens!

## WAYS TO SPECIFY SIZE: (37d) PERCENTAGES

Another way to specify sizes of frames is using PERCENTAGES.
The code
`<FRAMESET COLS="20%,80%" ROWS="75%,25%">`
creates two columns and two rows. The first column is 20% of the total frameset width; the second is 80%. Thus, the second column is four times as wide as the first column.

The first row is 75% of the total frameset height; the second row is 25%. Thus, the first row is three times as high as the second.

Notice that these specifications give the same results as the example on card 37c!

If your percentages don't add up to 100%, then the browser scales them proportionally so they DO add to 100%. For example, the code `<FRAMESET COLS="5%,20%">` only has percentages adding up to 25%. We need 100%. So, each percentage gets multiplied by 4, and this code will be interpreted as `<FRAMESET COLS="20%,80%">`

Be sure to change the window size and see what happens!

## WAYS TO SPECIFY SIZE: (37e) RELATIVE ("*") VALUES

Another way to specify sizes of frames is using RELATIVE VALUES, indicated by the asterisk (*) character. (I'll call * a star; it's easier.)
The code
`<FRAMESET COLS="*,4*" ROWS="3*,*">`
creates two columns and two rows.

Notice that there are five stars in the COLS specification: 1* + 4* = 5*. So, think of the available width as being divided into five equal portions. The first column gets one of these portions; the second column gets four portions. Thus, the second column is four times as wide as the first column.

Notice that there are four stars in the ROWS specification: 3* + 1* = 4*. So, think of the available height as being divided into four equal portions. The first row gets three of these portions; the second row gets one portion. Thus, the first row is three times as high as the second row.

Notice that these specifications give the same results as the examples on cards 37c and 37d! So, you can achieve the same effect in different ways. You choose!

Be sure to change the window size and see what happens!

## MIXING SIZE SPECIFICATIONS (37f)

The three different ways to specify size can be mixed and matched, as desired. For example,
`<FRAMESET ROWS="25%,100,3*,*" COLS="*,30%,2*">`
produces four rows and three columns.

The first row is 25% of the available height. The second row is 100 pixels high. The remaining height is divided into four equal portions: the third row gets three of these portions, and the fourth row gets only one.

The second column is 30% of the available width. The remaining width is divided into three equal portions: the first column gets only one of these portions; the last column gets two of these portions.

Be sure to change the window size and see what happens!

WORKSHEET #37:
Create each grid below. (Don't cheat by VIEWing the SOURCEcode until you've tried them yourself!)

ASSIGNMENT #37:

• (A37.1) Please re-read pages 212–213 (from "Establishing Rows and Columns" up to "Nesting Frames") in the Weasel Book.
• (A37.2) On your HOMEPAGE, put a LINK to a framed document that uses a GRID structure. Put in contents that are appropriate for you! For example, you might want to show, at the same time, four different web sites that contain information relevant to your web page. In your source code, put a comment:
```<!-- HERE IS THE LINK TO THE GRID STRUCTURE.-->
```
so that I can easily find this when I grade your homepage.
On to the next lesson!
Back to the COURSE SYLLABUS