/* Allows the use of px units on borders */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

.grid-wrapper {
	/* Prevents odd margin behaviour in Chrome */
	overflow: hidden;
}

.grid {
  /* forces equal cell heights */
  display: flex;
  flex-wrap: wrap;

  /* creates an equal outer gap (optional) */
  padding: 20px 0 0 20px;

  /* pulls grid cells hard against edges */
  margin: -20px;

	/* Alternate margin if not including padding */
  // margin: 0 -20px -20px 0;
}

.grid-cell {
  /* sets column count */
  width: calc(100% / 1); /* 1 column by default */

  /* creates gaps */
  border: 0 solid transparent;
  border-width: 0 20px 20px 0;
	
	/* prevents background bleed */
	background-clip: padding-box;
}

@media (min-width: 400px){
	.grid-cell {
    width: calc(100% / 2); /* 2 columns */
	}
}

@media (min-width: 600px){
	.grid-cell {
    width: calc(100% / 3); /* 3 columns */
	}
}


/************************************\
  Prettiness only below this point
\************************************/

.grid-cell {
	/* So that we can see the grid cells */
	box-shadow: inset 0 0 0 1px #000;
	height: 100px;
	
	/* For displaying the color coding */
	// outline: 2px dashed yellow;
	// border-color: hsla(0, 100%, 35%, 1);

	&:nth-child(1){
		background-color: hotpink;
	}
}

.grid {
	/* For displaying the color coding */
	// padding: 0;
	// border: 0 solid hsla(210, 100%, 50%, 1);
	// border-width: 20px 0 0 20px;
}

.grid-wrapper {
	/* So that we can see the edges of the grid */
	box-shadow: 0 0 10px 2px green;

	max-width: 500px;
	margin: 30px auto;
}

html {
	margin: 20px;
}