div[class^="grid-zone-"] {
  display : -ms-grid;
  display : grid;
  margin: 0 10px 0 3px;
}

.grid-zone-1 { -ms-grid-columns: auto 1fr; grid-template-columns: auto 1fr; }
.grid-zone-2 { -ms-grid-columns: (auto 1fr)[2]; grid-template-columns: repeat(2, auto 1fr); }
.grid-zone-3 { -ms-grid-columns: (auto 1fr)[3]; grid-template-columns: repeat(3, auto 1fr); }
.grid-zone-4 { -ms-grid-columns: (auto 1fr)[4]; grid-template-columns: repeat(4, auto 1fr); }

.grid-zone-2 label { max-width: 290px; }
.grid-zone-3 label { max-width: 125px; }

div[class^="grid-zone-"] > * {
  margin: 3px 0;
}

div[class^="grid-zone-"] label {
  display: inline-block;
  text-align: right;
  align-self: center;
  padding: 0 7px;
  color: #48555e;
  -ms-grid-row-align: center;
}

div[class^="grid-zone-"] input,
div[class^="grid-zone-"] select {
  width: 100%;
  max-width: 172px;
}

div[class^="grid-zone-"] div.ecartement {
  justify-content: flex-start;
}

div[class^="grid-zone-"] div.ecartement input:not(.dateInput) {
  width: 76px;
  flex-shrink: 0;
}