JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Docking Layout › Grid layout columns with different width
Tagged: grid layout column size
- This topic has 6 replies, 2 voices, and was last updated 3 years, 5 months ago by
yavordashew.
-
AuthorPosts
-
March 22, 2021 at 12:03 pm #101647
tullio0106
MemberUsing grid layout is it possible to have columns of different size : eg 5% + 35% + 60% ?
How ?
TksMarch 22, 2021 at 3:20 pm #101650yavordashew
MemberHi 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/March 23, 2021 at 9:22 am #101653tullio0106
MemberTks for Your help but I still don’t understand.
I interpreted that col-sm-8 means take 8 columns, col-sm-2 means take 2 columns and so on and the column has a predefined size (say 100/12%).
If this is not the case and I can redefine them am I forced to use such names or can I use different names ?
And col-sm-4 should be double of col-sm-2 or I’m free ?
I need, just as example, to have something like 2% / 18% / 30% / 2% / 18% / 30% .
Is it possible ?
I’m not interested to the responsiveness.
TksMarch 23, 2021 at 10:24 am #101655tullio0106
MemberI also tested directly Your suggestion on codepen using Your overview demo but I didn’t get the wanted result.
I added
.col-2{
width: 10%!important;
}
.col-sm-10{
width: 5%!important;
}
to the grid layout overview code but Logo took 10% of a 2 column space it didn’ make col-2 large as 10% of the whole space.
What I need is to say first column is 10% wide of the whole space, second is 30% of the whole space and so on.
TksMarch 23, 2021 at 3:07 pm #101657yavordashew
MemberHi tullio0106,
Just to clarify a thing which you may already know.
Each row in the smart-grid-layout has col span of 12 columns and you can use different col classes depending on the window size.
For example if you want a column to take 12 columns of the grid on small screen devices you use the classcol-sm-12
and to take 10 columns on medium screen device you use thecol-md-10
class. Here is a quick example:<div class="smart-grid-layout"> <div class="row"> <div class="col-sm-12 col-md-1"> One of three columns </div> <div class="col-sm-12 col-md-1"> One of three columns </div> <div class="col-sm-12 col-md-10"> One of three columns </div> </div>
Basically what you do with the grid layout is to set how much columns each
col
class will take on different screen sizes.
Also here is example for you previous question about how to have something like 2% / 18% / 30% / 2% / 18% / 30%.<div class="smart-grid-layout"> <div class="row"> <div class="col-1"> One of three columns </div> <div class="col-2"> One of three columns </div> <div class="col-3"> One of three columns </div> <div class="col-1"> One of three columns </div> <div class="col-2"> One of three columns </div> <div class="col-3"> One of three columns </div> </div>
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/March 23, 2021 at 3:50 pm #101659tullio0106
MemberIf I understand rigth what You are telling me the grid layout is not my tool.
I’m not interested in changing device type or screen size : I only need to be working on a computer screen.
On the other side I need to construct a quite rigid grid in which I can calculate, at runtime by code, the size of each column, the columnspan and the rowspan.
If I should work using only a multiple of a base unit (col) and with a maximum of 12 my possibilities are very poor.
Using css grid make me possibile to do that but the resulting code is ugly and not well readable.
Could You suggest a solution with Your product ?
TksMarch 24, 2021 at 5:28 pm #101668yavordashew
MemberHi tullio0106,
Well this functionality is quite possible to achieve.You can also overwrite the default styles of thegrid-template-columns
if you want to have more columns in the row, but I am not aware of the your logic for displaying the grid but below I will share a example for you which has rows with column span of 20.<div class="smart-grid-layout"> <div class="row"> <div class="col-6"> 1 of 4 with 6 columns </div> <div class="col-6"> 2 of 4 with 6 columns </div> <div class="col-6"> 3 of 4 with 6 columns </div> <div class="col-2"> 4 of 4 with 2 columns </div> </div> <div class="row"> <div class="col-1"> 1 of 20 </div> <div class="col-1"> 2 of 20 </div> <div class="col-1"> 3 of 20 </div> <div class="col-1"> 4 of 20 </div> <div class="col-1"> 5 of 20 </div> <div class="col-1"> 6 of 20 </div> <div class="col-1"> 7 of 20 </div> <div class="col-1"> 8 of 20 </div> <div class="col-1"> 9 of 20 </div> <div class="col-1"> 10 of 20 </div> <div class="col-1"> 11 of 20 </div> <div class="col-1"> 12 of 20 </div> <div class="col-1"> 13 of 20 </div> <div class="col-1"> 14 of 20 </div> <div class="col-1"> 15 of 20 </div> <div class="col-1"> 16 of 20 </div> <div class="col-1"> 17 of 20 </div> <div class="col-1"> 18 of 20 </div> <div class="col-1"> 19 of 20 </div> <div class="col-1"> 20 of 20 </div> </div> </div>
And in your CSS:
.smart-grid-layout .row{ grid-column: span 20!important; grid-template-columns: repeat(20, 1fr)!important; }
Repeat represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.
Hope that gives you a bit more clarification.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.