Grid layout columns with different width

[tullio0106]

Using grid layout is it possible to have columns of different size : eg 5% + 35% + 60% ?
How ?
Tks

[yavordashew]

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/

[tullio0106]

Tks 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.
Tks

[tullio0106]

I 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.
Tks

[yavordashew]

Hi 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 class col-sm-12 and to take 10 columns on medium screen device you use the col-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/

[tullio0106]

If 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 ?
Tks

[yavordashew]

Hi tullio0106,
Well this functionality is quite possible to achieve.You can also overwrite the default styles of the grid-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/

[Author]

Posts