Show Last Element Full Width using simple CSS code

When you use display:grid and you want to show last element with full width so use simple grid css code. So now open live-executor and do coding.

Live Executor – Click Here

1st step

You have simple three DIV tag like –

<div class="tktrickgrid">
<div>something1</div>
<div>something2</div>
<div class="lastdiv">something3</div>
</div>

So now use simple code for class=”tktrickgrid”

.tktrickgrid{
display: grid;
grid-template-columns: auto auto;
}

2nd step

Now use given code for show lastdiv for full width

.lastdiv {grid-column: 1/-1;}

I hope this code will helpful for you. thanks for visiting.

Final Code

<div class="tktrickgrid">
<div class="tktrickgridd">something1</div>
<div class="tktrickgriddd">something2</div>
<div class="lastdiv">something3</div>
</div>

<style>
.tktrickgrid{
display: grid;
grid-template-columns: auto auto ;
height: 500px;
gap: 20px
}
.tktrickgridd {background: yellow}
.tktrickgriddd {background: blue}

.tktrickgrid .lastdiv {grid-column: 1/-1; background: red}
</style>