<h2>Grid Layout Module Example</h2>
<div class="grid">
	<span class="grid__item grid__item--1"></span>
	<span class="grid__item grid__item--2"></span>
	<span class="grid__item grid__item--3"></span>
	<span class="grid__item grid__item--4"></span>
	<span class="grid__item grid__item--5"></span>
	<span class="grid__item grid__item--6"></span>
	<span class="grid__item grid__item--7"></span>
	<span class="grid__item grid__item--8"></span>
	<span class="grid__item grid__item--9"></span>
	<span class="grid__item grid__item--10"></span>
	<span class="grid__item grid__item--11"></span>
	<span class="grid__item grid__item--12"></span>
	<span class="grid__item grid__item--13"></span>
	<span class="grid__item grid__item--14"></span>
	<span class="grid__item grid__item--15"></span>
	<span class="grid__item grid__item--16"></span>
	<span class="grid__item grid__item--17"></span>
	<span class="grid__item grid__item--18"></span>
	<span class="grid__item grid__item--19"></span>
	<span class="grid__item grid__item--20"></span>
	<span class="grid__item grid__item--21"></span>
	<span class="grid__item grid__item--22"></span>
	<span class="grid__item grid__item--23"></span>
	<span class="grid__item grid__item--24"></span>
	<span class="grid__item grid__item--25"></span>
	<span class="grid__item grid__item--26"></span>
	<span class="grid__item grid__item--27"></span>
	<span class="grid__item grid__item--28"></span>
	<span class="grid__item grid__item--29"></span>
	<span class="grid__item grid__item--30"></span>
	<span class="grid__item grid__item--31"></span>
	<span class="grid__item grid__item--32"></span>
	<span class="grid__item grid__item--33"></span>
	<span class="grid__item grid__item--34"></span>
	<span class="grid__item grid__item--35"></span>
	<span class="grid__item grid__item--36"></span>
	<span class="grid__item grid__item--37"></span>
	<span class="grid__item grid__item--38"></span>
	<span class="grid__item grid__item--39"></span>
	<span class="grid__item grid__item--40"></span>
	<span class="grid__item grid__item--41"></span>
	<span class="grid__item grid__item--42"></span>
	<span class="grid__item grid__item--43"></span>
	<span class="grid__item grid__item--44"></span>
	<span class="grid__item grid__item--45"></span>
	<span class="grid__item grid__item--46"></span>
	<span class="grid__item grid__item--47"></span>
	<span class="grid__item grid__item--48"></span>
	<span class="grid__item grid__item--49"></span>
	<span class="grid__item grid__item--50"></span>
	<span class="grid__item grid__item--51"></span>
	<span class="grid__item grid__item--52"></span>
	<span class="grid__item grid__item--53"></span>
	<span class="grid__item grid__item--54"></span>
	<span class="grid__item grid__item--55"></span>
	<span class="grid__item grid__item--56"></span>
	<span class="grid__item grid__item--57"></span>
	<span class="grid__item grid__item--58"></span>
	<span class="grid__item grid__item--59"></span>
	<span class="grid__item grid__item--60"></span>
	<span class="grid__item grid__item--61"></span>
	<span class="grid__item grid__item--62"></span>
	<span class="grid__item grid__item--63"></span>
	<span class="grid__item grid__item--64"></span>
	<span class="grid__item grid__item--65"></span>
	<span class="grid__item grid__item--66"></span>
	<span class="grid__item grid__item--67"></span>
	<span class="grid__item grid__item--68"></span>
	<span class="grid__item grid__item--69"></span>
	<span class="grid__item grid__item--70"></span>
	<span class="grid__item grid__item--71"></span>
	<span class="grid__item grid__item--72"></span>
	<span class="grid__item grid__item--73"></span>
	<span class="grid__item grid__item--74"></span>
	<span class="grid__item grid__item--75"></span>
	<span class="grid__item grid__item--76"></span>
	<span class="grid__item grid__item--77"></span>
	<span class="grid__item grid__item--78"></span>
	<span class="grid__item grid__item--79"></span>
	<span class="grid__item grid__item--80"></span>
	<span class="grid__item grid__item--81"></span>
	<span class="grid__item grid__item--82"></span>
	<span class="grid__item grid__item--83"></span>
	<span class="grid__item grid__item--84"></span>
	<span class="grid__item grid__item--85"></span>
	<span class="grid__item grid__item--86"></span>
	<span class="grid__item grid__item--87"></span>
	<span class="grid__item grid__item--88"></span>
	<span class="grid__item grid__item--89"></span>
	<span class="grid__item grid__item--90"></span>
	<span class="grid__item grid__item--91"></span>
	<span class="grid__item grid__item--92"></span>
	<span class="grid__item grid__item--93"></span>
	<span class="grid__item grid__item--94"></span>
	<span class="grid__item grid__item--95"></span>
	<span class="grid__item grid__item--96"></span>
	<span class="grid__item grid__item--97"></span>
	<span class="grid__item grid__item--98"></span>
	<span class="grid__item grid__item--99"></span>
	<span class="grid__item grid__item--100"></span>
	
	<div class="grid grid--2">
		<span class="grid__item grid__item--1"></span>
		<span class="grid__item grid__item--2"></span>
	</div>
</div>
body {
  text-align: center;
}

.grid {
  margin: auto;
  width: 400px;
  height: 400px;
  display: grid;
  grid-template: repeat(10, 10%)/repeat(10, 10%);
  position: relative;
}
.grid__item {
  border: 1px solid #000000;
}
.grid--2 {
  position: absolute;
  top: 0;
  left: 0;

  .grid__item--1 {
    grid-column: 1/7;
    background: #ffff74;
  }
  .grid__item--2 {
    grid-column: 4/9;
    background: #9aff67;
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.