JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Docking Layout › Grid layout columns with different width › Reply To: Grid layout columns with different width
March 22, 2021 at 3:20 pm
#101650
yavordashew
Member
Hi tullio0106,
You can overwrite the default style of columns of the grid layout like so :
//In your css file
.col{
width: 10%!important;
}
.col-sm-8{
width: 5%!important;
}
//in your HTML file
<div class="smart-grid-layout">
<div class="row">
<div class="col">Header</div>
</div>
<div class="row">
<div class="col-sm-4">Side Bar</div>
<div class="col-sm-8">Content. Grid system with 3 rows. The Header and Footer are with 100px height. The Content and Side Bar fill the rest of the remaining space. The Side Bar and Content sre stacked on small device screen.</div>
</div>
<div class="row">
<div class="col">Footer</div>
</div>
However if this is not the case I would advise you give us more context about your situation.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/