:root {
  --markerwidth: 44px;
  --hmarkerwidth: 22px;
}

#pagegrid {
	display: grid; /*zie bv. page3x4.css voor hoe het grid er precies uitziet*/
	position: absolute;
	top: 100px;
	grid-template-columns: 220px 220px 220px 220px 220px 220px;
	grid-template-rows: 70px 470px 470px 470px 470px 40px;
	column-gap: 40px;
	row-gap: 55px;
	justify-content: start; /*Het mooiste zou zijn geen gap aan te geven en hier met space-between te werken. Dan krijg je echter in de printweergave andere tussenruimtes...*/
	align-content: start;
}

.hfcontainer {
	grid-column: auto / span 3;
	position: relative; /*tbv. positionering xmarkbutton*/
	border: 0px solid blue;
}

.diagcontainer {
	grid-column: auto / span 2;

/*
verplaatst naar style.css:
	border: 5px solid red transparent;
	padding: 5px;
	display: grid;
*/
	grid-template-columns: 410px 50px; /*410: indices+bord, 50: wie-is-aan-zet en sel-vierkantje*/
	grid-template-rows: 414px 50px; /*410: bord+indices, 50: dsubscript*/
}

.diag {
	/*positie in diagcontainer*/
	grid-row: 1;
	grid-column: 1;
	height: 410px;
	width: 408px; /*was eerst 455*/
	border: 0px solid crimson;
}