PopWP

WordPress and Genesis Tutorials

CSS Grid in Genesis

Last Updated on Favorited: 1 times

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/

Related Posts

Reader Interactions