Reply To: Grid layout columns with different width

[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/