Grid-system als CSS

gistfile1.html

<section class="results-container">
    <div class="result-count">
		<p class="block-left bg-light padding">
			
			@if(this.Model.SearchResult.Results.Any())
			{
				@Html.T(this.Model.SearchResult.Total, "{0} object gevonden", "{0} objecten gevonden", "Found {0} work of art", "Found {0} works of art", this.Model.SearchResult.Total)</p>
			}
			else
			{
				@Html.T("Geen resultaten", "No results")
			}
		</p>
	</div>
	
	<div class="results">  
		@foreach(var workOfArt in this.Model.SearchResult.Results) 
		{
			var fileName = Html.UriDataEscape(workOfArt.Media.PrimaryImage.FileName);
			var url = WorkOfArtModuleUrls.WorkOfArt(workOfArt);

			<div class="result">
				<a href="@url" class="block padding bg-light">
					<img class="full-width background-cover" src="/static/images/1x1.png" style="height:auto; padding-top:20%; background-image:url(http://www.museum-online.nl/imageproxyboijmans.asp?cache=yes&amp;maxheight=500&amp;maxwidth=500&amp;filename=@(fileName)&amp;cache=yes)" />
					<h1 class="h3-like">@Html.LimitOnWordBoundaryText(workOfArt.Title, 50), @workOfArt.Dating.Indication</h1>
					<p>@workOfArt.Creator.FullName</p>
				</a>
			</div>
		}
	</div>

	@if(this.Model.SearchResult.Results.Any())
	{
		<div class="facets">
			@Html.Partial("Facets", this.Model)
		</div>

		<div class="pagination">
			@Html.Partial("Pagination", this.Model)
		</div>
	}
</section>


.results-container {
	@extend .row;
}

.result-count {
	@extend .col;
	@extend .all-full;
}

.results {
	@extend .col;
	@extend .m-4;
	@extend .l-10;
	@extend .xl-10;
	@extend .reset-padding;
}

.result {
	@extend .col;
	@extend .s-full;
	@extend .m-3;
	@extend .l-3;
	@extend .xl-2;
	@extend .m-clear-2nd;
	@extend .l-clear-4th;
	@extend .xl-clear-6th;
}

.facets {
	@extend .col;
	@extend .m-2;
	@extend .l-2;
	@extend .xl-2;
}

.pagination {
	@extend .col;
	@extend .all-full;
}