Help:Wiki University Grids - Containers





<< Previous 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 as shown in red.
 * 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
Lets combine cells 7 & 8, 9 & 10, 12 & 13, 14 & 15 and 17 - 20. Here is what it will look like: 1 6 7 9 12 <div style="grid-column:4/6; border:2px solid red; padding:3px">14 <div style="grid-column:2/6; border:2px solid red; padding:3px">17 Here is the coding: CSS Grids <div style=" display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr> <div style=" grid-column:1/6">1     <div style=" grid-row:2/5">6     <div style=" grid-column:2/4 ">7     <div style=" grid-column:4/6 ">9     <div style=" grid-column:2/4 ">12     <div style=" grid-column:4/6 ">14     <div style=" grid-column:2/6 ">17
 * Sometimes the keeping track of the grid lines can be a bit tricky.
 * See how fewer lines of code it take to create this rather complicated table.

<< Previous Chapter