Reply To: Grid layout columns with different width

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