CSS Grid

Dustin Tauer

dustin@easelsolutions.com

Slides / Files

https://github.com/dtauer/infotec2018-cssgrid

Resources

Wes Bos Courses

• https://cssgrid.io/
• http://wesbos.com/courses/

Rachel Andrew: Grid By Example

• https://gridbyexample.com/

Jen Simmons: Layout Land

• https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag/

MDN

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

caniuse.com

Some CSS Grid Properties

grid-template

grid-template-columns
grid-template-rows
 

grid-auto-flow

grid-auto-columns
grid-auto-rows

 

grid-row
grid-row-start
grid-row-end

grid-column
grid-column-start

grid-column-end

grid-gap
grid-row-gap
grid-column-gap

How to get started

1) Create a Grid Container

.wrapper {
    display: grid;
}

2) Define Rows/Columns/Areas

.wrapper {
    display: grid;
    grid-template-columns: 200px 600px 200px;
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(5, 200px);
}

Use Feature Queries

.wrapper {
    /* container for .items */
}

.item {
    display: block;
    margin: 10px;
    float: left;
}

@supports(display: grid){
    .wrapper {
        display: grid;
        grid-template-columns: repeat(5, 200px);
        grid-gap: 20px;
    }
    .item {
        margin: 0;
    }
}

Examples

Questions?