How can I expand my grid-column-start to grid-column-end to take exactly half of the current grid si-CodePudding

In this codepen I included my code here. What I want to achieve is that boxes 8 and 9 take up exactly half of the current grid size width-wise. So boxes 8 and 9 should be together with the whole width of the grid and meet in the middle right below box 3. I am writing this in react but this shouldn't be important for the purpose of what I am doing.

const Grid = () => {
  return ( <
    div class = 'container' >
    <
    div class = 'cell cell-1' > 1. < /div> <
    div class = 'cell cell-2' > 2. < /div> <
    div class = 'cell cell-3' > 3. < /div> <
    div class = 'cell cell-4' > 4. < /div> <
    div class = 'cell cell-5' > 5. < /div> <
    div class = 'cell cell-6' > 6. < /div> <
    div class = 'cell cell-7' > 7. < /div> <
    div class = 'cell cell-8' > 8. < /div> <
    div class = 'cell cell-9' > 9. < /div> < /
    div >
  );
};

const App = () => {
  return ( <
    div >
    <
    Grid / >
    <
    /div>
  );
};

ReactDOM.render( <
  React.StrictMode >
  <
  App / >
  <
  /React.StrictMode>,
  document.getElementById('root')
);

.container {
  height: 90vh;
  margin: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 3px;
}

.cell {
  color: white;
  font-size: 3rem;
  text-align: center;
  padding: 4rem;
}

.cell-1 {
  background: deepskyblue;
  grid-row-start: 1;
  grid-row-end: 3;
}

.cell-2 {
  background: orange;
}

.cell-3 {
  background: royalblue;
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 3;
}

.cell-4 {
  background: gold;
}

.cell-5 {
  background: blueviolet;
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 5;
}

.cell-6 {
  background: limegreen;
}

.cell-7 {
  background: coral;
}

.cell-8 {
  background: lightseagreen;
  grid-row-start: 3;
  grid-column-start: 1;
}

.cell-9 {
  background: maroon;
  grid-row-start: 3;
}

.cell-10 {
  background: mediumaquamarine;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<body>
  <div id="root"></div>
</body>

CodePudding user response：

Just add grid-column-end in box 8 and 9.

.cell-8 {
  background: lightseagreen;
  grid-row-start: 3;
  grid-column-start: 1;
  grid-column-end: 4;
}

.cell-9 {
    background: maroon;
    grid-row-start: 3;
    grid-column-start: 4;
    grid-column-end: 6;
}

Updated:

.container {
  height: 90vh;
  margin: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 3px;
}

.cell {
  color: white;
  font-size: 3rem;
  text-align: center;
  padding: 4rem;
}

.cell-1 {
  background: deepskyblue;
  grid-row-start: 1;
  grid-row-end: 3;
}

.cell-2 {
  background: orange;
}

.cell-3 {
  background: royalblue;
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 3;
  grid-column-end: 5;
}

.cell-4 {
  background: gold;
}

.cell-5 {
  background: blueviolet;
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 5;
}

.cell-6 {
  background: limegreen;
}

.cell-7 {
  background: coral;
}

.cell-8 {
  background: lightseagreen;
  grid-row-start: 3;
  grid-column-start: 1; 
  grid-column-end: 4;
  grid-row-start: 3;
  
}

.cell-9 {
  background: maroon;
  grid-row-start: 3;
  grid-column-start: 4;
  grid-column-end: 7
}

.cell-10 {
  background: mediumaquamarine;
  grid-row-start: 3;
  grid-column-start: 5;
  grid-column-end: 6;
}

Another Solution

Separate box 8 and 9 to another div. Check out here

CodePudding user response：

You can check the following Codepen here

I have added a width attribute along with grid-column-end. It will work without changing the html structure.

.cell-8 {
  background: lightseagreen;
  grid-row-start: 3;
  grid-column-start: 1;
  grid-column-end: 3;
  width: 104.8%;
  left: 0;
  item-self: flex-end;
}

.cell-9 {
  background: maroon;
  width: 104.8%;
  grid-column-start: 4;
  grid-column-end: 6;
  justify-self: flex-end;
}

Thanks