Help:Wiki University Grids - Introduction





<< Previous Chapter Next Chapter >>

Limitations to Flexbox
ONE TWO THREE FOUR
 * Flexbox coding is really only a one dimensional program as are most software programs.
 * What we mean is that Flexbox is good programming back and forth on a horizontal line.
 * Programming up and down is another manner. It can be done with Flexbox, but Grids do it better.
 * To produce a format as seen below is far simpler with Grids than if you tried it with Flexbox alone.

What is CSS Grids?

 * Basically it is a CSS program to create pages without having to use floats and positioning.
 * Grid creates a grid where you specify the number of columns and rows.
 * It is the combining of items in the columns and rows which is where grids make life a lot easier.
 * It will allow you to, for example, create a box spanning horizontal rows and vertical columns with two lines of code.

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:20% 20% 20% 20% 20%  - this entry defines our grid be specifying the number of columns we will be working with. The five 20% tells you that there will be five columns.
 * Instead of percentages, you can also use pixels.
 * You can vary the percentages or amount of pixels; they do not all have to be the same: you could have 10% 30% 5% 40% 15%.
 * 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 >>