#container{
  width: 600px;
  height: 300px;
  border: none;
  margin-top: 30px;
  margin-left: 30px;
 
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 20px 20px; 
  
  /* justify-items: center; */
  /* align-items: center; */
 
  
  /* justify-content: center; */
  /* align-content: center; */
   
}

div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border: solid 1px black;
}

span, td {
  vertical-align: middle;
}





html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  
  font-family: Raleway;
  font-size: large;
}

.left_bg,
.right_bg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left_bg {
  background-color: #3498db;
}

.right_bg {
  background-color: #ecf0f1;
}



article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}



grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}



/*
https://css-tricks.com/snippets/css/complete-guide-grid/ 
https://stackoverflow.com/questions/45536537/centering-in-css-grid
*/

/*
div.klein {
      color:		green;
      font-size:	80%; }
	  
.opvallend {
	  text-decoration:	underline;
	  font-style:		italic;
	  font-weight:		bold
	}

#menu {
      color:		purple;
      font-size:	120%; }

a[href="http://www.ad.nl"]{
	color: pink;
	background-color: black;
}	  

div {
  width: 400px;
  height: 300px;
  border: solid 1px black;
  overflow: auto;
  resize: horizontal; // both; 
}

 img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
*/