Grid

DreamHost has multiple options to achieve the layouts we need to create.

We recommend custom CSS Grid as required by each use case, but also utilize a modified version of bootstrap grid for some projects.

Bootstrap grid

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s structure consists of a .container, .row, and .col.

<div class="container">
	<div class="row">1</div>
	<div class="col">2</div>
</div><!--Grid-->

12 column grid

For more specific grid requirements there is also a 12 column grid layout system.

.col-12
.col-6
.col-6
.col-3
.col-3
.col-3
.col-3
.col-2
.col-2
.col-2
.col-2
.col-2
.col-2
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
<div class="container">
	<div class="row">
		<div class="col-12 m-bottom-2 bg-c-g200 t-center p-2"><strong>.col-12</strong></div>
		<div class="col-6 m-bottom-2 bg-c-g200 t-center p-2"><strong>.col-6</strong></div>
		<div class="col-6 m-bottom-2 bg-c-g200 t-center p-2"><strong>.col-6</strong></div>
	</div>
</div><!--Grid-->

12 column responsive modifiers

-xs - extra small-breakpoint modifier <576px
-s - small-breakpoint modifier ≥576px
-md - medium-breakpoint modifier ≥750px
-lg - large-breakpoint modifier ≥1050px
-xl - extra large-breakpoint modifier ≥1280px

1
2
3
<div class="container">
	<div class="row">
		<div class="col-md-12 col-lg-4">1</div>
		<div class="col-md-12 col-lg-4">2</div>
		<div class="col-md-12 col-lg-4">3</div>
	</div>
</div><!--Grid-->