• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

CSS Grid in Genesis

Last Updated on March 11, 2019 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

  • Featured Post Widgets in Columns
  • Copyblogger style Post Grid Layout in Genesis
  • Site Inner with container background in Genesis Sample
  • Advanced Post Page Blog layout in Grid using CSS Grid in Genesis
  • Add Logo Between Site Title Area in Genesis

Categories: Free Content, What's New? Tags: CSS, CSS Grid

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service