A grid template that shows grids for 4 different column variations: 16 columns, 12 columns, 6 columns, and 4 columns, and 6 different major breakpoints for each:
Large Desktop Layout - 1200px to 1920px,
Tablet Landscape and Desktop Layout - 960px to 1199px,
Tablet Portrait Layout - 768px to 959px,
Mobile Landscape Layout - 480px to 767px,
Mobile Portrait Layout - 422px to 479px,
Small Portrait Layout - 250px to 421px
1. Resize the window to see the different variations of columns and the breakpoints when the browser is resized. Select which columns and rows that you will be using.
2. The Truss-Grid.css contains the grid dimensions as percentages. Be sure the CSS file Truss-Grid.css (link shown below) is in the <head> of your html file .
<link href="Truss/css/TrussGrid/css/Truss-Grid.css" rel="stylesheet" type="text/css" media="all">
3. The page requires a container with the grid you want to use. Example: <div class="trussGridContainer-16">. The number will be replaced with the grid number. Everything else will go within this container.
4. Add a <div class="row"> for elements you want to contain in the same horizontal field. You include as many rows as you want in the container.
5. Within each row add <div class="col-(container grid number)-?"></div> to specify how much horizontal space each element requires. The code snippet below is an example. Replace "?" with the number of columns you'd like the div to span. Make sure you have enough divs in each row to add up to the overall container number.
<div class="trussGridContainer-16"> <!--- Container div, specifies the total grid columns -->
<div class="row">
<div class="col-16-14"> <!--- 16 = overall grid, 14 = number of columns to span -->
<p>16-14</p> <!--- Content -->
</div>
<div class="col-16-2">
<p>16-2</p>
</div>
</div>
</div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
16-2
16-2
16-2
16-2
16-2
16-2
16-2
16-2
16-3
16-3
16-3
16-3
16-3
1
16-4
16-4
16-4
16-4
16-5
16-5
16-5
1
16-6
16-6
16-4
16-7
16-7
16-2
16-8
16-8
16-9
16-7
16-10
16-6
16-11
16-5
16-12
16-4
16-13
16-3
16-14
16-2
16-15
1
16-16
1
1
1
1
1
1
1
1
1
1
1
1
12-2
12-2
12-2
12-2
12-2
12-2
12-3
12-3
12-3
12-3
12-4
12-4
12-4
12-5
12-5
12-2
12-6
12-6
12-7
12-5
12-8
12-4
12-9
12-3
12-10
12-2
12-11
1
12-12
1
1
1
1
1
1
6-2
6-2
6-2
6-3
6-3
6-4
6-2
6-5
1
6-6
1
1
1
1
4-2
4-2
4-3
1
4-4