Help:Wiki University Grids - Introduction
Jump to navigation Jump to search
Limitations to Flexbox[edit | edit source]
- 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.
- 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?[edit | edit source]
- 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.
How to create the above format[edit | edit source]
Create Grid container[edit | edit source]
- 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 the number of columns we want in our table.
- "fr" stands for "fractions" in other words there are five columns of equal fraction or in still other words there are five 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.