Help:Grid Containers





<< Previous Chapter Next Chapter >>

Create Grid container
 
 * As with Flexbox, you need to create the overall container for the individual boxes of the above table.
 * This is the first line of coding:
 *  display:grid  - instead of "display:flex" as with Flexbox, we enter "display:grid."
 *  grid-template-columns:1fr 1fr 1fr 1fr  - this entry defines our grid be specifying the number of columns we will be working with.
 * "fr" stands for "fractions" in other words there are four columns of equal fraction or in still other words there are four columns of equal width.
 * You can also use percentages and pixels. You can even mix them up.  You can one of two columns in percentages and the other in pixels.
 * You can vary the percentages or amount of pixels; for example: 10% 30% 200px 40% 50px.
 * It is between the opening and closing div tags we will enter the coding for the individual boxes as we do for Flexbox.

Individual boxes
Here is the Grid coding for the above table:  ONE TWO THREE FOUR FIVE HEADER SIDEBAR ITEM ONE ITEM TWO FOOTER
 * The individual boxes are created with div tags.
 * Inside these div tags you can insert Wikitext, CSS, HTML and Flexbox coding.
 * The coding for the borders and any padding have been left out to simplify the code. Each of the boxes has a border.
 * Notice that each box is in its own div tag container. We will explain the coding in the next lesson.

<< Previous Chapter Next Chapter >>