Help:Wiki University Grids - Containers





<< Previous Chapter Next Chapter >>

Combining Cells

 * In tables you learned how to combine cells. Grids make that process a little easier.
 * We will be using the five column table from the previous lesson.

Grid lines
Line 1 Line 2 Line 3 Line 4 Line 5 Line 6  Line 1 Line 2 Line 3 Line 4 Line 5 1 2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20 We will refer to this illustration as we go through the lessons.
 * The first concept to learn is grid lines.
 * Below you see for our five column table with six red vertical lines and five horizontal lines surrounding each cell or individual containers.

Combine horizontal cells or containers
1 6 7  8  9  10  11  12  13  14  15  16  17  18  19  20
 * Lets combined the first row of container into one container.

Here is the coding : CSS Grids  1      6     7     8     9     10     11     12     13     14     15     16     17     18     19     20
 * Basically what we have done is add the code "grid-column:1/6" to cell 1 and erased columns 2, 3, 4 & 5.
 * To combined cells or containers, you count the vertical lines starting from the left to the last vertical line on the right of the cells you are combining.
 * Since we are combining cells 1 - 5, we use lines 1 through 6.
 * Notice that we indicate the lines by separating them with a "/". So to combine cells 1 - 5 we write "1/6" or in other words we are combing the cells between lines 1 through 6.
 * The last step is to erase the coding for the cells you are combining together into one, in other words erase the cells 2 - 5.

Combine vertical cells or containers
Again referring to our table with the red grid lines above, lets combine cells a column, namely 6, 11 and 16 1 6 7 8  9  10  12  13  14  15  17  18  19  20

Here is the coding: CSS Grids  1     6      7     8     9     10     12     13     14     15     17     18     19     20
 * Notice, we started with horizontal line 2 to horizontal line 5.

Combining more cells
1 6 7 9 12 <div style="grid-column:4/6; border:1px solid black; padding:3px">14 <div style="grid-column:2/6; border:1px solid black; padding:3px">17

<< Previous Chapter Next Chapter >>