This tutorial is still in progress and will continue to update it with more words, examples, and illustrations.
This tutorial provides the basic guide of working with CSS Grid in any WordPress or HTML site with the help and reference of mentioned resources at the end…
Support for different browsers can be found here. https://caniuse.com/css-grid
The Basic of CSS Grid
Grid Column is Horizontal ——— and Grid row is vertical |||, listing items under a container.
Example:
#container { display: -webkit-grid; display: grid; }
Properties and Values
1. grid-column-start
grid-column-start specifies a grid item’s start position within the grid columns and values can be an integer. <interger> OR span <interger>
Keep in mind that span only works with positive values.
Example:
#container { display: -webkit-grid; display: grid; grid-column-start: 3; }
2. grid-column-end
grid-column-end specifies a grid item’s end position within the grid columns and values should be an integer. <interger> OR span <interger>
Keep in mind that span only works with positive values.
Example:
#container { display: -webkit-grid; display: grid; grid-column-start: 1; grid-column-end: 4; }
3. grid-column
grid-column specifies a grid item’s position within the grid columns.
It is a shorthand property that can accept both values at once, separated by a slash. <grid-column-start> / <grid-column-end>
Example:
#container { display: -webkit-grid; display: grid; grid-column: 4 / 6; }
For example, grid-column: 4 / 6; will set the grid item to start on the 4th vertical grid line and end on the 6th grid line.
Works with span too, like grid-column: 2 / span 3;
4. grid-row-start
grid-row-start specifies a grid item’s start position within the grid rows and values can be an integer. <interger> OR span <interger>
Example:
#container { display: -webkit-grid; display: grid; grid-row-start: 3; }
5. grid-row-end
grid-row-end specifies a grid item’s end position within the grid rows and values can be an integer. <interger> OR span <interger>
Example:
#container { display: -webkit-grid; display: grid; grid-row-end: 5; }
4. grid-row
grid-row specifies a grid item’s position within the grid rows and values can be an integer.
It is a shorthand property that can accept both values at once, separated by a slash. <grid-row-start> / <grid-row-end>
Example:
#container { display: -webkit-grid; display: grid; grid-row: 3 / 6; }
5. grid-area
grid-area accepts four values separated by slashes: grid-row-start, grid-column-start, grid-row-end, followed by grid-column-end. like
<grid-row-start> / <grid-row-end> / <grid-column-start> / <grid-column-end>;
grid-area: 1 / 2 / 4 / 6;
Example:
#container { display: -webkit-grid; display: grid; grid-area: 1 / 2 / 4 / 6; }
6. order
If grid items aren’t explicitly placed with grid-area, grid-column, grid-row, etc., they are automatically placed according to their order in the source code.
We can override this using the order property, which is one of the advantages of grid over table-based layout.
By default, all grid items have an order of 0, but this can be set to any positive or negative value, similar to z-index.
7. grid-template-columns
grid-template-columns specifies the sizing and names of the grid’s columns and accepts the following values
a) <length>
You can use, percentage pixels and ems. You can even mix different units together.
grid-template-columns: 100px 3em 40%;
The grid also introduces a new unit, the fractional fr. Each fr unit allocates one share of the available space.
For example, if two elements are set to 1fr and 3fr respectively, space is divided into 4 equal shares; the first element occupies 1/4 and the second element 3/4 of any leftover space.
grid-template-columns: 1fr 5fr;
b) <percentage> grid-template-columns: 20% 20%;
can be used with repeat property too. grid-template-columns: repeat(2, 20%);
c) <flex>
max-content
min-content
minmax(min, max)
8. grid-template-rows
grid-template-rows works much the same as (7) grid-template-columns.
9. grid-template
grid-template is a shorthand property that combines grid-template-rows and grid-template-columns.
#container { grid-template: grid-template-rows / grid-template-columns; }
#container { grid-template: grid-template: 60% / 200px; }
Resources:
https://cssreference.io/css-grid/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://learncssgrid.com/
https://gridbyexample.com/examples/
https://thecssworkshop.com/
https://learn-the-web.algonquindesign.ca/
https://adam-marsden.co.uk/css-cheat-sheet
https://materializecss.com/grid.html
https://tympanus.net/codrops/css_reference/grid/
https://flaviocopes.com/css-grid/
https://www.quackit.com/css/grid/
https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
Cheatsheet:
http://grid.malven.co/
https://alialaa.github.io/css-grid-cheat-sheet/
https://rachelandrew.co.uk/css/cheatsheets/box-alignment
Course:
https://cssgrid.io/
https://teamtreehouse.com/library/css-grid-layout
http://jensimmons.com/post/feb-27-2017/learn-css-grid
Game:
http://cssgridgarden.com/