.gridcontainer {
  position:relative;
  margin:8px;
  overflow:hidden;
}

.griditem {
  display: block;
  position: relative;
  float: left;
  width: 100%;  /* change this to set number of items columns */
  margin: 0;
  padding: 0;
  overflow: hidden; 
}

.gridbox {
  position:relative;
  margin: 4px;
  background:#dcd6d0;
  padding: 3px;
  border-radius:6px;
}

.gridbox table {
  width: 100%;
  background: #dcd6d0;
  border-collapse: collapse;
  border-spacing: 1px;
  table-layout: fixed;
  text-align: left;
}

.gridbox th {
  padding: 1px;
  font-size: 9px;
  font-weight: normal;
}

.gridbox td {
  padding: 1px;
  font-weight: normal;
}

.gridfield {
  position: relative;
  padding: 0;
  min-height: 22px;
  font-size: 14px;
  background: white;
}

.gridfield div {
  margin: 0;
  padding: 3px;
  border: none;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  background: white;
  font-size: 14px;
  border-radius: 4px;
}

.gridfield input {
  margin: 0;
  padding: 3px;
  border: none;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  background: white;
  font-size: 14px;
  border-radius: 4px;
}

.gridfield select {
  margin: 0;
  padding: 2px;
  border: none;
  width: 100%;
  box-sizing: border-box;  
  outline: none;
  background: white;
  font-size: 14px;
  border-radius: 4px;
}

.gridfield input[readonly] {
  background: #fcf8f4;
}

.gridfield textarea {
  display: block;
  padding: 3px;
  border: none;
  width: 100%;
  height: 54px;
  box-sizing: border-box;  
  outline: none;
  background: white;
  font-size: 14px;
  resize: none;
  font-family: inherit;
  margin: 0;
  border-radius: 4px;
}

.gridfield input[type=checkbox] {
  margin: 0;
  padding: 0;
  border: inherit;
  width: inherit;
  box-sizing: inherit;  
  outline: none;
  vertical-align: baseline;
  font:normal 14px Arial;
}

.gridfield img {
  display:block; 
  margin:3px; 
  max-height:128px;
  max-width: 85%; 
  float:left;
}