grid

.grid-container {
  margin: auto;
  display: grid;
  grid-gap: 1px;
  border: 1px solid #5e5e5b;
  width: 400px;
  height: 190px;
  background-color: #5e5e5b;
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #dbdbdb;
}
.item1 {
  grid-column: 1 / span 6;
  grid-row: 1;
}
.item3 {
  grid-column: 2 / span 3;
  grid-row: 2;
}
.item4 {
  grid-column: 5 / span 2;
  grid-row: 2 / span 3;
}
.item6 {
  grid-column: 2 / span 3;
  grid-row: 3;
}
.item8 {
  grid-column: 2 / span 3;
  grid-row: 4;
}

.item10 {
  grid-column: 2 / span 2;
  grid-row: 5;
}
.item12 {
  grid-column: 5 / span 2;
  grid-row: 5;
}


 <div className="grid-container" ref={elementRef}>
                <div className="grid-item item1">{imgMp?.purchaser}</div>
                <div className="grid-item item2">{imgMp?.fixture}</div>
                <div className="grid-item item3">{imgMp?.fixtureName}</div>
                <div className="grid-item item4">
                  <Image width={80} height={80} src={imgCode} />
                </div>
                <div className="grid-item item5">{imgMp?.number}</div>
                <div className="grid-item item6">{imgMp?.numberName}</div>
                <div className="grid-item item7">{imgMp?.company}</div>
                <div className="grid-item item8">{imgMp?.companyName}</div>
                <div className="grid-item item9">{imgMp?.model}</div>
                <div className="grid-item item10">{imgMp?.modelName}</div>
                <div className="grid-item item11">{imgMp?.dateOfManufacture}</div>
                <div className="grid-item item12">{imgMp?.dateTime}</div>
              </div>
              <div>