Help:Wiki University Grids - Introduction





<< Previous Chapter Next Chapter >>

Limitations to Flexbox

 * 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 along.

HEADER SIDEBAR ITEM ONE ITEM TWO FOOTER

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.
 * 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
<< Previous Chapter Next Chapter >>