0

I have a divider displayed as a grid and containing two rows. The first row has four cells and the second has two cells.

I need the both cells in the second row would be centered horizontally so that the first of them would be under the second cell of the first row and the second of the second row would be under the third of the first row.

That is

 _   _   _   _
|_| |_| |_| |_|
    |_| |_|

The code I'm trying:

<style>
.grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:1.5rem;
place-items:center;
justify-content:center;
}
.grid div{
width:100%;
height:200px;
background:green;
}
</style>

<div class="grid">
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
    <div>1-4</div>
    <div>2-1</div>
    <div>2-2</div>
</div>

Both place-items:center and justify-content:center don't give the expected result

stckvrw
  • 1,689
  • 18
  • 42

0 Answers0