Deep Dive into CSS Grid Layouts

@Webapp Builders Meetup

Jull Weber
Monkey Kode Agency

Jull-Allan Weber Sanfiorenzo


Bayamon, Puerto Rico
2000 MIT Graduate
Monkey Kode Agency, Danceraccess
PHP, JS; Technically Full Stack, but more Front End Dev
Curious Facts:
  1. Was obsessed with building 2000 piece jigsaw puzzles when i was 4.
  2. Went to Space Camp and witnessed my first tornado at 11. I didn't fly away, Thank God.
  3. Took hiatus to dance professionally. Went on tour dancing with Madonna.

Dancing Coder

CSS GRID Layout basics


  • It's like flexbox, but in 2 dimensions.
  • Very similar to tables but without all the ugly table markup.

CSS GRID Terminology

Download CSS Grid terminology Reference

Grid Container

The element containing a grid,
defined by setting display:grid

You can nest grid containers inside grid containers and have as many as you like.


Grid Item

Direct descendant of container.

Only first level descendants are placed on the grid, children, not at all.


Grid Lines

  • Referenced by number, starting and ending with the other borders of the grid. Starting at top left, left to right.
  • You can name grid lines and reference them by their custom names.

Grid Cell

The intersection between a grid row and grid column, like table-cell. These will auto-populate from Top Left to Bottom Right.

Grid Track

The full row or column. Horizontal or Vertical.

Grid Area

One or more cells.

Grid Gap

Same as gutter. Can be horizontal, vertical, or both. You are creating empty space in the grid track, so whatever color behind the grid will come through.

CSS Grid Lines and Units


  • Draws grid lines
  • This sets the width of the columns in px, em, %, fr, etc
    grid-template-columns: 2fr 1fr 1fr;
  • You can mix any measurement unit with any of the other types.
    grid-template-columns: 63px 20vw 10% 40em 42vh;


  • This sets the height of the row in px, em, %, fr, etc
grid-template-rows: auto 1fr 3fr

Fraction Unit

  • Represents a fraction of the available space in the container.
    grid-template-rows:1fr 1fr 2fr
  • If you add another unit it will evenly divide the space in fractions.
    grid-template-columns: 20em 1fr 1fr 2fr 3fr;

So if you have "1fr 2fr," it'll divide the area into 3 sections giving the latter 66 2/3 % and the first one 33 1/3%.

mixmax() Function

Lets you define the minimum or maximum width of a column or row.

Great for responsive design.

grid-template-rows: 1fr minmax(10em, 20em)

repeat() Function

If you have a list of similar columns you can use repeat() as a shorthand notation.

grid-template-rows: repeat(2, 1fr) 2fr

You can do alternating widths by adding a additional units

grid-template-rows: repeat(2, 1fr 30px) 2fr

Dev tools


Chrome comes with basic Grid Overlay in Inspector.


Firefox gives you the grid overlay and a number of other helpful tools. You'll notice a new tab "Layout" gets added when working with grids.

Placing items on the Grid

grid-column, grid-row

  • You can place items wherever you want on the grid with grid-column and grid-row.
    grid-column:2/4; grid-row: 2/3;
  • Once you move the particular cell around, the remaining items will flow up to top left.
  • The first part of the unit tells you where it starts and the last part where it ends. In this scenario, we are referencing the numbers.
  • If grid item placement requires additional columns or rows, the browser adds implicit lines to keep the integrity of the grid.
  • We can also give it a span.
    grid-column: 2/2 span
    You tell it where on the grid to start and the second argument how far to span.

Naming your lines

  • The name goes in square brackets before the unit.

.site {
     grid-template-columns: [begin-edge] 2fr [halfway] 1fr [quarter] 1fr [end-edge];
     grid-template-rows: auto 1fr 3fr;
 .masthead {
    grid-column: halfway/end-edge

Naming Lines shorthand.

Since it can get clunky naming all your sections there is a shorthand that you can use.

.masthead {
	grid-column: main-end/sidebar;
	grid-row: 2/3;
.page-title {
	grid-column: main/sidebar;
	grid-row: 1/2;
.main-content {
	grid-column: main;
	grid-row: 2/4;


Grid Areas

  • Naming lines is useful, but grid areas is way better.
  • It's like naming sections on a map.
  • Within the grid map, the individual cells get named areas.
  • This is unlike any other CSS property. You literally draw out the areas with text.
  • This is super powerful because all you need to do is move the text around to change the grid placements. This becomes especially helpful in responsive sites. All you need to do is change the template areas with media queries and your grid adjusts.
  • To add an empty cell, just add a "." instead of a title.

  "title title title"
  "main header ."
  "main sidebar footer";

Grid Gap

  • This only applies to the space between the grid.
  • It can be for either column or row
  • Shorthand
    grid-gap: 1em 2em
  • Layouts

    • Embrace nested grids! Don't flatten the html
    • You can change the order of cells.
    • This is purely columns and rows, it should be used for traditional grids only. Something like masonry is the antithesis of a grid and it will not work.
    • Resist the urge to make grid frameworks or classic x-columns grids. Make dynamic grids that fit your content. If you don't need 16 columns, don't create them.
    • Find the best solution for your project.


    • Start by drafting some grids on paper.
    • Draw the grid lines and identify the columns, rows, cells, and grid areas .
    • Figure out nested grids.

    Feature Queries

    • CSS grids are available on all major browser versions.
    • For older browser that do not support CSS grids, offer them the mobile layout.
    • Test using CSS feature queries to see if the browser supports it.
       @supports (grid-area:auto) {

    Flexbox Inheritance

    • CSS Grids inherits a lot from flexbox.
    • To change the content alignment inside the columns, use justify-content.
    • You no longer need to use max-width and margins to center content. All you need to do is use the minmax() function and set justify-content to center
      grid-template-columns: 15em minmax(auto, 30em) 15em;
      justify-content: center;

    Be Fancy!

    You can easily do things you couldn't even dream of doing before!

    Split and change locations

    • Lets say you would like the sidebar to split and move into different parts of the grid for different screen sizes. Ah, but you say : "I can't do that because it's already all in one area, if I use grid-column and grid-row, it'll jump the whole section to the next placement..."

    All you need is some CSS magic.

    • Make the sidebar inherit the display grid styles so you create a new nested grid. Place the half bottom of the sidebar (with class .twin) into the right using grid-row and grid-column, and give the sidebar a height of 0 with overflow:visible... and voila it works.
    .sidebar {
    	display: inherit;
    	grid-template-columns: inherit;
    	grid-column: 1/4;
    	grid-row: 2/3;
    	height: 0;
    .twin:last-of-type {
    	grid-column: 3/4;

    Full bleed sections

    • To make full bleeds per row and contain content, only apply the grid to the areas that need it.
    /* Disable fallback max-width center aligned rule: */
    .site {
    	max-width: none;
    /* Four-column layout: Two center columns have total width of 50em: */
    .main-area > *,
    .colophon {
    	display: grid;
    	grid-template-columns: 1fr repeat(2, minmax(auto, 25em)) 1fr;
    /* Center items by placing them in the two center columns: */
    .buckets ul {
    	grid-column: 2/4;
    /* Use automatic grid placement + span to let each item span two columns: */
    .colophon aside {
    	grid-column: 2 span;

    Make cards easily.

    Combine flexbox and grid to achieve full heights in the cells.

    .card a {
    	display: grid;
    	grid-template-columns: 6em auto;
    	grid-template-rows: 1fr 1fr;
    	padding: 0 1em 0 0;
    	text-align: left;
    .time {
    	grid-column: 1;
    	grid-row: 1/3;
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
    .card h2 {
    	grid-column: 2;
    	grid-row: 1;
    	align-self: flex-end;
    .meta {
    	grid-column: 2;
    	grid-row: 2;

    Stacking things on top of each other.

    Sooo easy!!! No extra weird dom elements.

    grid-column: 1;
    grid-row: 1;

    *Tip- make text align to the bottom. Use flex!

    display:flex; display: flex-end;

    Make elements in a grid bigger than others

    .double {
    	grid-column: span 2;
    	grid-row: span 2;

    Helpful Links

    Thank You!
    Monkey Kode Agency