Grid

by Kriem

HTML

<body>
  <ul class="grid">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</body>

SCSS

body, html { margin: 0; }
* { box-sizing: border-box; }

@mixin display-grid {
    display: grid;
    grid-template-rows: auto;
	$gutter: 0.5rem !default;
	
	@media screen and (min-width: 0) {
		grid-template-columns: repeat( auto-fit, minmax( calc(100px - #{$gutter}), 1fr) );
    	grid-gap: $gutter;
	}
	
	$gutter: 1.5rem;
	@media screen and (min-width: 200px) {
   		grid-gap: $gutter;
	}
	@media screen and (min-width: 300px) {
		grid-template-columns: repeat( auto-fit, minmax( calc(150px - #{$gutter}), 1fr) );
	}
}

ul {
    display: flex;
    flex-wrap: wrap;
    background: yellow;
    margin: 0; padding: 0; list-style: none;

	&.grid {
		@include display-grid;
	}
}
li {
	margin: 0;
	padding: 0;
  	flex-grow: 1;
  	border: 2px solid white;
}

@media screen and (min-width: 1px) {
  li { flex-basis: 100px;
    background: green;
  }
}

@media screen and (min-width: 200px) {
  li { flex-basis: 100px;
    background: blue;
  }
}

@media screen and (min-width: 300px) {
  li { flex-basis: 150px;
    background: hotpink;
  }
}