Shipyard Grid

The Shipyard grid is a percentage-based, flexbox grid and is entirely responsive. Each class needs the foundational .col class in order to function properly, and also should be contained inside the .col-container as well.

Flexible Columns .col

By default, the flexbox-based grid will automatically size each column inside the container.

10
10
10
10
10
10
10
10
10
10
20
20
20
20
20
25
25
25
25
33
33
33
50
50
66
auto
<div class="col-container">
  <div class="col"><!-- column contents --></div>
  <div class="col"><!-- column contents --></div>
  <div class="col"><!-- column contents --></div>
</div>

Column Sizes .col-{ n }

The column sizes are percentage-based and available in any size from 5-100 in increments of 5.

5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
10
10
10
10
10
10
10
10
10
10
15
15
15
15
15
15
10
20
20
20
20
20
25
25
25
25
30
30
30
10
33
33
33
35
35
30
40
40
20
45
45
10
50
50
55
45
60
40
65
35
66
34
70
30
75
25
80
20
85
15
90
10
95
5
100
<div class="col-container">
  <div class="col col-33"><!-- column contents --></div>
  <div class="col col-33"><!-- column contents --></div>
  <div class="col col-33"><!-- column contents --></div>
</div>

Offset Columns .col-offset-{ n }

Useful when you need to push columns to the right to fill some empty space.

75
offset 5
70
offset 10
65
offset 15
60
offset 20
55
offset 25
50
offset 30
45
offset 35
40
offset 40
35
offset 45
30
offset 50
25
offset 55
20
offset 60
15
offset 65
10
offset 70
5
offset 75
<div class="col-container">
  <div class="col col-70"><!-- column contents --></div>
  <div class="col col-20 col-offset-10"><!-- column contents --></div>
</div>

Responsive Columns .{ screen }-col-{ n }

Useful when you want to build a grid that works for any size of screen.

100
100
100
100
100
100
100 
<div class="col-container-wrap">
  <div class="col col-100 sm:col-33 md:col-25 lg:col-0"><!-- column 1 --></div>
  <div class="col col-100 sm:col-33 md:col-25 lg:col-0"><!-- column 2 --></div>
  <div class="col col-100 sm:col-33 md:col-25 lg:col-0"><!-- column 3 --></div>
  <div class="col col-100 sm:col-33 md:col-25 lg:col-0"><!-- column 4 --></div>
  <div class="col col-100 sm:col-33 md:col-25 lg:col-0"><!-- column 5 --></div>
  <div class="col col-100 sm:col-33 md:col-25 lg:col-0"><!-- column 6 --></div>
  <div class="col col-100 sm:col-33 md:col-25 lg:col-0"><!-- column 7 --></div>
</div>

Take-Up-The-Rest Columns .col-container-nowrap

This type of layout is useful in all kinds of scenarios, especially when you have the auto-sized column contains some kind of call-to-action.

Take-up-the-rest Column
Variable Column
<div class="col-container-nowrap">
  <div class="col col-100">
    <!-- Take-Up-The-Rest Column -->
  </div>
  <div class="col">
    <!-- Variable Column -->
  </div>
</div>

Nested Columns

Nested grids can be tricky to build and somewhat fragile by nature. For the best results, pay special attention to how you want each column to respond at various screen sizes and test each breakpoint thoroughly.

40
60
20
20
20
<div class="col-container">
  <div class="col col-40">
    <!-- 40% column -->
  </div>
  <div class="col col-60">
    <!-- 60% column -->
    <div class="col-container">
      <div class="col"><!-- auto column --></div>
      <div class="col"><!-- auto column --></div>
      <div class="col"><!-- auto column --></div>
    </div>
  </div>
</div>

Reversible Columns .{ screen }-flex-{ col | col-reverse | row | row-reverse }

Useful when the flow of the content should be different at a certain breakpoint.

top (mobile)
left (mobile)
middle
right (mobile)
bottom (mobile) 
<div class="col-container">
  <div class="col flex-col md:flex-col-reverse">
    <div>
      <!-- top on mobile; bottom on desktop -->
    </div>
    <div class="col-container flex-row md:flex-row-reverse">
      <div class="col"><!-- left on mobile; right on desktop --></div>
      <div class="col"><!-- middle on all breakpoints --></div>
      <div class="col"><!-- right on mobile; left on desktop --></div>
    </div>
    <div>
      <!-- bottom on mobile; top on desktop -->
    </div>
  </div>
</div>

.col { display: block; position: relative; flex-basis: 0; flex-grow: 1; flex-shrink: 1; flex-direction: column; padding-left: 15px; padding-right: 15px }
.col-container { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px }
.col-container-nowrap { display: flex; flex-wrap: nowrap; margin-left: -15px; margin-right: -15px }
.col-center,
.col-v-center { display: flex; justify-content: center }
.col-center { align-items: center }
.col-0 { max-width: none; flex-basis: 0% }
.col-offset-0 { margin-left: 0% }
.col-5 { max-width: 5%; flex-basis: 5% }
.col-offset-5 { margin-left: 5% }
.col-10 { max-width: 10%; flex-basis: 10% }
.col-offset-10 { margin-left: 10% }
.col-15 { max-width: 15%; flex-basis: 15% }
.col-offset-15 { margin-left: 15% }
.col-20 { max-width: 20%; flex-basis: 20% }
.col-offset-20 { margin-left: 20% }
.col-25 { max-width: 25%; flex-basis: 25% }
.col-offset-25 { margin-left: 25% }
.col-30 { max-width: 30%; flex-basis: 30% }
.col-offset-30 { margin-left: 30% }
.col-33 { max-width: 33.3333333333%; flex-basis: 33.3333333333% }
.col-offset-33 { margin-left: 33.3333333333% }
.col-35 { max-width: 35%; flex-basis: 35% }
.col-offset-35 { margin-left: 35% }
.col-40 { max-width: 40%; flex-basis: 40% }
.col-offset-40 { margin-left: 40% }
.col-45 { max-width: 45%; flex-basis: 45% }
.col-offset-45 { margin-left: 45% }
.col-50 { max-width: 50%; flex-basis: 50% }
.col-offset-50 { margin-left: 50% }
.col-55 { max-width: 55%; flex-basis: 55% }
.col-offset-55 { margin-left: 55% }
.col-60 { max-width: 60%; flex-basis: 60% }
.col-offset-60 { margin-left: 60% }
.col-65 { max-width: 65%; flex-basis: 65% }
.col-offset-65 { margin-left: 65% }
.col-66 { max-width: 66.6666666666%; flex-basis: 66.6666666666% }
.col-offset-66 { margin-left: 66.6666666666% }
.col-70 { max-width: 70%; flex-basis: 70% }
.col-offset-70 { margin-left: 70% }
.col-75 { max-width: 75%; flex-basis: 75% }
.col-offset-75 { margin-left: 75% }
.col-80 { max-width: 80%; flex-basis: 80% }
.col-offset-80 { margin-left: 80% }
.col-85 { max-width: 85%; flex-basis: 85% }
.col-offset-85 { margin-left: 85% }
.col-90 { max-width: 90%; flex-basis: 90% }
.col-offset-90 { margin-left: 90% }
.col-95 { max-width: 95%; flex-basis: 95% }
.col-offset-95 { margin-left: 95% }
.col-100 { max-width: 100%; flex-basis: 100% }
.col-offset-100 { margin-left: 100% }

@media screen and (min-width:  576px) {
  .sm:col-center,
  .sm:col-v-center { display: flex; justify-content: center }
  .sm:col-center { align-items: center }
  .sm:col-0 { max-width: none; flex-basis: 0% }
  .sm:col-offset-0 { margin-left: 0% }
  .sm:col-5 { max-width: 5%; flex-basis: 5% }
  .sm:col-offset-5 { margin-left: 5% }
  .sm:col-10 { max-width: 10%; flex-basis: 10% }
  .sm:col-offset-10 { margin-left: 10% }
  .sm:col-15 { max-width: 15%; flex-basis: 15% }
  .sm:col-offset-15 { margin-left: 15% }
  .sm:col-20 { max-width: 20%; flex-basis: 20% }
  .sm:col-offset-20 { margin-left: 20% }
  .sm:col-25 { max-width: 25%; flex-basis: 25% }
  .sm:col-offset-25 { margin-left: 25% }
  .sm:col-30 { max-width: 30%; flex-basis: 30% }
  .sm:col-offset-30 { margin-left: 30% }
  .sm:col-33 { max-width: 33.3333333333%; flex-basis: 33.3333333333% }
  .sm:col-offset-33 { margin-left: 33.3333333333% }
  .sm:col-35 { max-width: 35%; flex-basis: 35% }
  .sm:col-offset-35 { margin-left: 35% }
  .sm:col-40 { max-width: 40%; flex-basis: 40% }
  .sm:col-offset-40 { margin-left: 40% }
  .sm:col-45 { max-width: 45%; flex-basis: 45% }
  .sm:col-offset-45 { margin-left: 45% }
  .sm:col-50 { max-width: 50%; flex-basis: 50% }
  .sm:col-offset-50 { margin-left: 50% }
  .sm:col-55 { max-width: 55%; flex-basis: 55% }
  .sm:col-offset-55 { margin-left: 55% }
  .sm:col-60 { max-width: 60%; flex-basis: 60% }
  .sm:col-offset-60 { margin-left: 60% }
  .sm:col-65 { max-width: 65%; flex-basis: 65% }
  .sm:col-offset-65 { margin-left: 65% }
  .sm:col-66 { max-width: 66.6666666666%; flex-basis: 66.6666666666% }
  .sm:col-offset-66 { margin-left: 66.6666666666% }
  .sm:col-70 { max-width: 70%; flex-basis: 70% }
  .sm:col-offset-70 { margin-left: 70% }
  .sm:col-75 { max-width: 75%; flex-basis: 75% }
  .sm:col-offset-75 { margin-left: 75% }
  .sm:col-80 { max-width: 80%; flex-basis: 80% }
  .sm:col-offset-80 { margin-left: 80% }
  .sm:col-85 { max-width: 85%; flex-basis: 85% }
  .sm:col-offset-85 { margin-left: 85% }
  .sm:col-90 { max-width: 90%; flex-basis: 90% }
  .sm:col-offset-90 { margin-left: 90% }
  .sm:col-95 { max-width: 95%; flex-basis: 95% }
  .sm:col-offset-95 { margin-left: 95% }
  .sm:col-100 { max-width: 100%; flex-basis: 100% }
  .sm:col-offset-100 { margin-left: 100% }
}

@media screen and (min-width:  768px) {
  .md:col-center,
  .md:col-v-center { display: flex; justify-content: center }
  .md:col-center { align-items: center }
  .md:col-0 { max-width: none; flex-basis: 0% }
  .md:col-offset-0 { margin-left: 0% }
  .md:col-5 { max-width: 5%; flex-basis: 5% }
  .md:col-offset-5 { margin-left: 5% }
  .md:col-10 { max-width: 10%; flex-basis: 10% }
  .md:col-offset-10 { margin-left: 10% }
  .md:col-15 { max-width: 15%; flex-basis: 15% }
  .md:col-offset-15 { margin-left: 15% }
  .md:col-20 { max-width: 20%; flex-basis: 20% }
  .md:col-offset-20 { margin-left: 20% }
  .md:col-25 { max-width: 25%; flex-basis: 25% }
  .md:col-offset-25 { margin-left: 25% }
  .md:col-30 { max-width: 30%; flex-basis: 30% }
  .md:col-offset-30 { margin-left: 30% }
  .md:col-33 { max-width: 33.3333333333%; flex-basis: 33.3333333333% }
  .md:col-offset-33 { margin-left: 33.3333333333% }
  .md:col-35 { max-width: 35%; flex-basis: 35% }
  .md:col-offset-35 { margin-left: 35% }
  .md:col-40 { max-width: 40%; flex-basis: 40% }
  .md:col-offset-40 { margin-left: 40% }
  .md:col-45 { max-width: 45%; flex-basis: 45% }
  .md:col-offset-45 { margin-left: 45% }
  .md:col-50 { max-width: 50%; flex-basis: 50% }
  .md:col-offset-50 { margin-left: 50% }
  .md:col-55 { max-width: 55%; flex-basis: 55% }
  .md:col-offset-55 { margin-left: 55% }
  .md:col-60 { max-width: 60%; flex-basis: 60% }
  .md:col-offset-60 { margin-left: 60% }
  .md:col-65 { max-width: 65%; flex-basis: 65% }
  .md:col-offset-65 { margin-left: 65% }
  .md:col-66 { max-width: 66.6666666666%; flex-basis: 66.6666666666% }
  .md:col-offset-66 { margin-left: 66.6666666666% }
  .md:col-70 { max-width: 70%; flex-basis: 70% }
  .md:col-offset-70 { margin-left: 70% }
  .md:col-75 { max-width: 75%; flex-basis: 75% }
  .md:col-offset-75 { margin-left: 75% }
  .md:col-80 { max-width: 80%; flex-basis: 80% }
  .md:col-offset-80 { margin-left: 80% }
  .md:col-85 { max-width: 85%; flex-basis: 85% }
  .md:col-offset-85 { margin-left: 85% }
  .md:col-90 { max-width: 90%; flex-basis: 90% }
  .md:col-offset-90 { margin-left: 90% }
  .md:col-95 { max-width: 95%; flex-basis: 95% }
  .md:col-offset-95 { margin-left: 95% }
  .md:col-100 { max-width: 100%; flex-basis: 100% }
  .md:col-offset-100 { margin-left: 100% }
}

@media screen and (min-width:  992px) {
  .lg:col-center,
  .lg:col-v-center { display: flex; justify-content: center }
  .lg:col-center { align-items: center }
  .lg:col-0 { max-width: none; flex-basis: 0% }
  .lg:col-offset-0 { margin-left: 0% }
  .lg:col-5 { max-width: 5%; flex-basis: 5% }
  .lg:col-offset-5 { margin-left: 5% }
  .lg:col-10 { max-width: 10%; flex-basis: 10% }
  .lg:col-offset-10 { margin-left: 10% }
  .lg:col-15 { max-width: 15%; flex-basis: 15% }
  .lg:col-offset-15 { margin-left: 15% }
  .lg:col-20 { max-width: 20%; flex-basis: 20% }
  .lg:col-offset-20 { margin-left: 20% }
  .lg:col-25 { max-width: 25%; flex-basis: 25% }
  .lg:col-offset-25 { margin-left: 25% }
  .lg:col-30 { max-width: 30%; flex-basis: 30% }
  .lg:col-offset-30 { margin-left: 30% }
  .lg:col-33 { max-width: 33.3333333333%; flex-basis: 33.3333333333% }
  .lg:col-offset-33 { margin-left: 33.3333333333% }
  .lg:col-35 { max-width: 35%; flex-basis: 35% }
  .lg:col-offset-35 { margin-left: 35% }
  .lg:col-40 { max-width: 40%; flex-basis: 40% }
  .lg:col-offset-40 { margin-left: 40% }
  .lg:col-45 { max-width: 45%; flex-basis: 45% }
  .lg:col-offset-45 { margin-left: 45% }
  .lg:col-50 { max-width: 50%; flex-basis: 50% }
  .lg:col-offset-50 { margin-left: 50% }
  .lg:col-55 { max-width: 55%; flex-basis: 55% }
  .lg:col-offset-55 { margin-left: 55% }
  .lg:col-60 { max-width: 60%; flex-basis: 60% }
  .lg:col-offset-60 { margin-left: 60% }
  .lg:col-65 { max-width: 65%; flex-basis: 65% }
  .lg:col-offset-65 { margin-left: 65% }
  .lg:col-66 { max-width: 66.6666666666%; flex-basis: 66.6666666666% }
  .lg:col-offset-66 { margin-left: 66.6666666666% }
  .lg:col-70 { max-width: 70%; flex-basis: 70% }
  .lg:col-offset-70 { margin-left: 70% }
  .lg:col-75 { max-width: 75%; flex-basis: 75% }
  .lg:col-offset-75 { margin-left: 75% }
  .lg:col-80 { max-width: 80%; flex-basis: 80% }
  .lg:col-offset-80 { margin-left: 80% }
  .lg:col-85 { max-width: 85%; flex-basis: 85% }
  .lg:col-offset-85 { margin-left: 85% }
  .lg:col-90 { max-width: 90%; flex-basis: 90% }
  .lg:col-offset-90 { margin-left: 90% }
  .lg:col-95 { max-width: 95%; flex-basis: 95% }
  .lg:col-offset-95 { margin-left: 95% }
  .lg:col-100 { max-width: 100%; flex-basis: 100% }
  .lg:col-offset-100 { margin-left: 100% }
}

@media screen and (min-width:  1200px) {
  .xl:col-center,
  .xl:col-v-center { display: flex; justify-content: center }
  .xl:col-center { align-items: center }
  .xl:col-0 { max-width: none; flex-basis: 0% }
  .xl:col-offset-0 { margin-left: 0% }
  .xl:col-5 { max-width: 5%; flex-basis: 5% }
  .xl:col-offset-5 { margin-left: 5% }
  .xl:col-10 { max-width: 10%; flex-basis: 10% }
  .xl:col-offset-10 { margin-left: 10% }
  .xl:col-15 { max-width: 15%; flex-basis: 15% }
  .xl:col-offset-15 { margin-left: 15% }
  .xl:col-20 { max-width: 20%; flex-basis: 20% }
  .xl:col-offset-20 { margin-left: 20% }
  .xl:col-25 { max-width: 25%; flex-basis: 25% }
  .xl:col-offset-25 { margin-left: 25% }
  .xl:col-30 { max-width: 30%; flex-basis: 30% }
  .xl:col-offset-30 { margin-left: 30% }
  .xl:col-33 { max-width: 33.3333333333%; flex-basis: 33.3333333333% }
  .xl:col-offset-33 { margin-left: 33.3333333333% }
  .xl:col-35 { max-width: 35%; flex-basis: 35% }
  .xl:col-offset-35 { margin-left: 35% }
  .xl:col-40 { max-width: 40%; flex-basis: 40% }
  .xl:col-offset-40 { margin-left: 40% }
  .xl:col-45 { max-width: 45%; flex-basis: 45% }
  .xl:col-offset-45 { margin-left: 45% }
  .xl:col-50 { max-width: 50%; flex-basis: 50% }
  .xl:col-offset-50 { margin-left: 50% }
  .xl:col-55 { max-width: 55%; flex-basis: 55% }
  .xl:col-offset-55 { margin-left: 55% }
  .xl:col-60 { max-width: 60%; flex-basis: 60% }
  .xl:col-offset-60 { margin-left: 60% }
  .xl:col-65 { max-width: 65%; flex-basis: 65% }
  .xl:col-offset-65 { margin-left: 65% }
  .xl:col-66 { max-width: 66.6666666666%; flex-basis: 66.6666666666% }
  .xl:col-offset-66 { margin-left: 66.6666666666% }
  .xl:col-70 { max-width: 70%; flex-basis: 70% }
  .xl:col-offset-70 { margin-left: 70% }
  .xl:col-75 { max-width: 75%; flex-basis: 75% }
  .xl:col-offset-75 { margin-left: 75% }
  .xl:col-80 { max-width: 80%; flex-basis: 80% }
  .xl:col-offset-80 { margin-left: 80% }
  .xl:col-85 { max-width: 85%; flex-basis: 85% }
  .xl:col-offset-85 { margin-left: 85% }
  .xl:col-90 { max-width: 90%; flex-basis: 90% }
  .xl:col-offset-90 { margin-left: 90% }
  .xl:col-95 { max-width: 95%; flex-basis: 95% }
  .xl:col-offset-95 { margin-left: 95% }
  .xl:col-100 { max-width: 100%; flex-basis: 100% }
  .xl:col-offset-100 { margin-left: 100% }
}