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
 * 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
Line 1 Line 2 Line 3 Line 4 Line 5 Line 6  Line 1 Line 2 Line 3 Line 4 Line 5 1
 * Lets combined the first row of container into one container.

6 7  8  9  10  11  12  13  14  15  16  17  18  19  20 Here is the coding: CSS Grids  1     6     7     8     9     12     11     12     13     14     15     16     17     18     19     20   1  6  7  8  9  12  11  12  13  14  15  16  17  18  19  20
 * We have left out the coding for the borders and any padding so you can more easily see what changes have made.

<< Previous Chapter Next Chapter >>