Help:Wiki University Grids - Introduction





<< Previous Chapter Next Chapter >>

Limitations to Flexbox
ONE TWO THREE FOUR CSS Grids   ONE     TWO     THREE     FOUR
 * Flexbox coding is really only a one dimensional program.
 * 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 and with far less lines of code.
 * To produce a table as seen below is far simpler with Grids than if you tried it with Wikitext.

HTML 1 2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  CSS Grids   1     2     3     4     5     6     7     8     9     12     11     12     13     14     15     16     17     18     19     20    HTML
 * Now there does not look like much difference between CSS Grids and Wikitext, but see the difference when there are four rows in the table like so:
 * You can see are few lines of code.
 * You do not have to specify where rows begin.

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:1fr 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 >>