css grid for responsive layouts and how to use it - 12 col layout

HTML

<link rel="stylesheet" href="https://kruxor.com/code/css/css/margin-padding.css">

<div class="wrap">
	<div class="grid-12">
		<div class='span-12 bglg p20 mb10'>a header (probably does not need to be in a grid)</div>
	</div>
	<div class="grid-12 mb10">
		<div class='span-9 bglg p20'>span-9</div>
		<div class='span-3 bglg p20'>span-3</div>
	</div>
	<div class="grid-12 mb10">
		<div class='span-3 bglg p20'>span-3</div>
		<div class='span-9 bglg p20'>span-9</div>
	</div>
	<div class="grid-12">
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
		<div class='span-1 bglg p20'>span-1</div>
	</div>
</div>

CSS

.grid-12 {
		  display: grid;
		  grid-template-columns: repeat(12, 1fr);
		  grid-template-rows: auto;
		  grid-gap: 10px 10px;
		}	
		.span-1 { grid-column: span 1; }	
		.span-2 { grid-column: span 2; }	
		.span-3 { grid-column: span 3; }	
		.span-4 { grid-column: span 4; }	
		.span-5 { grid-column: span 5; }	
		.span-6 { grid-column: span 6; }	
		.span-7 { grid-column: span 7; }	
		.span-8 { grid-column: span 8; }	
		.span-9 { grid-column: span 9; }	
		.span-10 { grid-column: span 10; }	
		.span-11 { grid-column: span 11; }	
		.span-12 { grid-column: span 12; }	
		/* Pick a responsive breakpoint for the grid to stack */
		@media(max-width:1024px) {
			.grid-12 {
			  display: block;
			}
			/* add some padding or margin to the spans when they stack */
			.span-1,
			.span-2,
			.span-3,
			.span-4,
			.span-5,
			.span-6,
			.span-7,
			.span-8,
			.span-9,
			.span-10,
			.span-11,
			.span-12 {
				margin-bottom:10px;
			}
		}