Introduction to CSS Grid

INTRODUCTION TO
CSS GRID
KARA LUTON
@karaluton
Slides available at: http://bit.ly/intro-to-grid

ABOUT ME
Will stop to pet any dog I see
Nashville native
Retired ballerina
Former music publicist
Web Developer at Lewis Communications
Co-organizer for Tech Ladies

“More than a layout module, CSS Grid is an invitation
to reaffirm our original intent with web design and
development: to create accessible, extensible solutions
that bring content to those interested in the best way
possible.
At the core of any front-end web project is a simple
principle: First, make it accessible, then make it
fancy, and make sure the fancy doesn’t break
accessibility.”

GRID TERMINOLOGY
GRID CONTAINER
The element containing the grid,
defined by setting
display: grid;

GRID TERMINOLOGY
GRID ITEM
Any element that is a direct
descendant of the grid container.

GRID TERMINOLOGY
GRID CELL
The intersection between a
grid-row and a grid-column

GRID TERMINOLOGY
GRID AREA
Rectangular area between four
specific grid lines. Can cover one
or more cells.

GRID TERMINOLOGY
GRID TRACK
The space between two grid
lines, either horizontal or
vertical.

GRID TERMINOLOGY
GRID LINE
Horizontal (row) or vertical
(column) line separating the grid
into sections.

GRID TERMINOLOGY
GRID GAP
The empty space between grid
tracks. Commonly called
gutters.

<div class="grid">
<div class="item">1</div>
</div>
.grid {
display: grid;
}

<div class="grid">
</div>
.grid {
display: grid;
grid-template-columns: 20rem 20rem 20rem;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 20rem);
}

<div class="grid">
</div>
.grid {
display: grid;
grid-gap: 1rem;
}

<div class="grid">
</div>
.grid {
display: grid;
grid-gap: 1rem;
}
.grid {
display: grid;
grid-template-rows: 10rem 15rem;
grid-gap: 1rem;
}

<div class="grid">
</div>
.grid {
display: grid;
grid-template-rows: 30rem;
grid-gap: 1rem;
}
.grid {
display: grid;
grid-template-rows: 15rem;
grid-auto-rows: 15rem;
grid-gap: 1rem;
}

PIXELS, PERCENTAGES +
FRACTIONAL UNITS

<div class="grid">
</div>
.grid {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-gap: 1rem;
}

<div class="grid">
</div>
.grid {
display: grid;
grid-template-columns: repeat(3, 10rem);
grid-gap: 1rem;
}

<div class="grid">
</div>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 1rem;
}

<div class="grid">
</div>
.grid {
display: grid;
grid-gap: 10px;
}
.grid {
display: grid;
grid-template-columns: auto 2fr 1fr;
grid-gap: 1rem;
}

<div class="grid">
<div class="item pupper">/div
div class=item3/div
div class=item4/div
div class=item5/div
div class=item6/div
/div
.grid {
display: grid;
grid-gap: 10px;
}
.grid {
display: grid;
grid-gap: 1rem;
}
.pupper {
width: 30rem;
}
.grid {
display: grid;
grid-gap: 1rem;
}
.pupper {
grid-column: span 2;
}

div class=grid
div class=item1/div
div class=item pupper/div
div class=item3/div
div class=item4/div
div class=item5/div
div class=item6/div
/div
.grid {
display: grid;
grid-gap: 1rem;
}
.pupper {
}
.grid {
display: grid;
grid-gap: 1rem;
grid-auto-flow: dense;
}
.pupper {
}

div class=grid
div class=item1/div
div class=item pupper/div
div class=item3/div
div class=item4/div
div class=item5/div
div class=item6/div
/div
.grid {
display: grid;
grid-gap: 1rem;
}
.pupper {
}
.grid {
display: grid;
grid-gap: 1rem;
}
.pupper {
grid-column: 1 / 3;
}

div class=grid
div class=item1Sidebar #1/div
div class=item2Doggo ipsum filler/div
div class=item3Another sidebar/div
div class=footerFooter/div
/div
.grid {
display: grid;
grid-template-rows: 10rem 10rem 5rem;
grid-gap: 1rem;
}
.grid {
display: grid;
grid-gap: 1rem;
grid-template-areas:
“sidebar-1 content sidebar-2”
“footer footer footer”;
}

div class=grid
div class=item1Sidebar #1/div
div class=item2Doggo ipsum filler/div
div class=item3Another sidebar/div
div class=footerFooter/div
/div
.grid {
display: grid;
grid-gap: 1rem;
}
.grid {
display: grid;
grid-gap: 1rem;
grid-template-areas:
“footer footer footer”;
}
.item1 {
grid-area: sidebar-1;
}
.item2 {
grid-area: content;
}
.item3 {
grid-area: sidebar-2;
}
.footer {
grid-area: footer;
}

RESOURCES
● Wes Bos’ CSS Grid
● CSS Grid Garden
● My article on CSS Grid
GRID TUTORIALS
OTHER RESOURCES
● Info on fallbacks for IE: CSS Grid + Autoprefixer
● Grid by Example
WHAT’S NEXT FOR GRID?
● CSS Grid Level 2 Subgrids

@karaluton
Slides available at: http://bit.ly/intro-to-grid

Introduction to CSS Grid

Recommended

More Related Content

Similar to Introduction to CSS Grid (20)

Recently uploaded (20)

Introduction to CSS Grid