How to create layout with grid

Question

I want to create layout where the last element is centered. I should do with grids, but cant center the last element

.box {
  min-width: 50px;
  min-height:50px;
  background: red;
  margin: 5px;
}

.container {
   width: 200px;
   display: grid;
   grid-template-columns: auto auto auto;

}

.box7 {
    grid-column-start: 2;
    grid-row-start: 3;
    grid-column-end: 4;
}

<div class='container'>
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
  <div class='box'>4</div>
  <div class='box'>5</div>
  <div class='box'>6</div>
  <div class='box box7'>7</div>
<div>

Desired view

score 0 · Accepted Answer · answered Mar 04 '22 at 12:20

.box {
  min-height: 50px;
  background: red;
  margin: 5px;
  grid-column: span 2;
}

.container {
   width: 200px;
   display: grid;
   grid-template-columns: repeat(6, 1fr);

}

.box7 {
   grid-column-start: 2;
   grid-column-end: 6;
}

<div class='container'>
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
  <div class='box'>4</div>
  <div class='box'>5</div>
  <div class='box'>6</div>
  <div class='box box7'>7</div>
<div>

You can also find multiple ways on this discussion

score 0 · Answer 2 · answered Mar 04 '22 at 12:28

I hope this approach of mine will help you:

.box {
  min-width: 50px;
  min-height:50px;
  background: red;
  margin: 5px;
}

.container {
   width: 200px;
   display: grid;  
   grid-template-rows: repeat(3, [row] auto  );
   grid-template-columns: repeat(3, [col] auto) ;
}

.subgrid {
 grid-column: col / span 3;
 grid-row: row 3;
}

.box7
{
width:66%;
margin-left:auto;
margin-right:auto;
}

<div class='container'>
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
  <div class='box'>4</div>
  <div class='box'>5</div>
  <div class='box'>6</div>
  <div class="subgrid">
    <div class='box box7'>7</div>
  </div>
<div>

How to create layout with grid

2 Answers2