Help:Wiki University Grids - Introduction





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    Wikitext
 * Now there does not look like much difference between CSS Grids and Wikitext in one row, but see the difference when there are four rows in the table like so:
 * You can see are fewer 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:auto auto auto auto auto auto  - this entry defines the number of columns we want in our table.
 * 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.

Next Chapter >>