UI MarCom 3

Responsive Behavior

How to organize responsive layout with the help of a fluid grid system with 12 columns.

Grid System

A grid system is a tool to create responsive layout with ease. It divides the container width into 12 columns, which can then be filled with content. The width of a content column can be defined by simply adding the appropriate class name. It is possible to define different column width for several viewport sizes, so the layout will change on the desired breakpoint. By nesting the rows and columns it’s possible to build up complex layouts.

Technically it is similar to the Bootstrap grid system, which we refer to for further reading and understanding the grid system.

8
4
4
4
4
6
6
4
4
6
<div class="container">
  <div class="row">
    <div class="col-8">8</div>
    <div class="col-4">4</div>
  </div>
  <div class="row">
    <div class="col-4">4</div>
    <div class="col-4">4</div>
    <div class="col-4">4</div>
  </div>
  <div class="row">
    <div class="col-6">6</div>
    <div class="col-6">6</div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">4</div>
    <div class="col-4">4</div>
  </div>
  <div class="row justify-content-center">
    <div class="col-6">6</div>
  </div>
</div>

Grid settings

BreakpointExtra small<576pxSmall >576pxMedium >768pxLarge >992pxExtra Large >1200px
Max container widthNone (auto)540px720px960px1440px
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-
# of columns12
Gutter width30px (15 px on each side of a column)

Layout rules

For desktop views like 1440px width it is standard to use all 12 columns for the content. So the content is aligned with the elements of the Header on the left and right. On marketing related sites it is possible to use less columns to ensure a good readability for long texts and forms. The nested grid for the content then uses 12 columns again.

Consider using space efficiently rather than showing white space, so that the app content expands over the whole maximum container width, which is set for the grid system.

Block Grid

Deprecated

Layout to arrange content in boxes like a shelf.

The horizontally aligned items are equal in height. The number of columns can be set responsive to the viewport width.

1. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident optio consectetur aperiam tempore recusandae nam consequatur quo numquam dolore. Repellat, asperiores exercitationem.

2. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia debitis laborum repellat et ab quidem quaerat tempore at dicta doloremque? Labore sapiente numquam sit autem magni obcaecati vitae, ad ipsa.

3. Nulla architecto, ducimus cumque non velit dolores, ipsam modi iste, cupiditate ipsum qui! Fugit dignissimos earum, odio repellat enim corporis accusamus a!

4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem animi id quasi doloribus, itaque amet fugit ullam sint laboriosam consequuntur culpa autem in quae numquam facilis dolore sunt facere placeat.

5. Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, placeat pariatur, quisquam nostrum minus in sapiente quod numquam voluptas itaque ipsa, facilis exercitationem odio magnam veritatis. A provident quod cum!

6. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur quibusdam impedit sequi voluptates corporis totam ab laudantium, expedita in, at repellendus ducimus! Provident vitae officia vero, iste non voluptatum dolores.

7. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident optio consectetur aperiam tempore recusandae nam consequatur quo numquam dolore. Repellat, asperiores exercitationem.

8. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam rem laudantium, cum unde doloremque id et eveniet, odio qui aliquid quisquam ad itaque necessitatibus inventore atque, nemo libero ut distinctio?

<div class="block-grid block-grid-md-2 block-grid-lg-3 block-grid-xl-4">
    <div class="block-grid__item">
        <div class="bg-color-black-7 padding-1">
            <p>1. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident optio consectetur aperiam tempore recusandae nam consequatur quo numquam dolore. Repellat, asperiores exercitationem.</p>
        </div>
    </div>
    <div class="block-grid__item">
        <div class="bg-color-black-7 padding-1">
            <p>2. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia debitis laborum repellat et ab quidem quaerat tempore at dicta doloremque? Labore sapiente numquam sit autem magni obcaecati vitae, ad ipsa.</p>
        </div>
    </div>
    <div class="block-grid__item">
        <div class="bg-color-black-7 padding-1">
            <p>3. Nulla architecto, ducimus cumque non velit dolores, ipsam modi iste, cupiditate ipsum qui! Fugit dignissimos earum, odio repellat enim corporis accusamus a!</p>
        </div>
    </div>
    <div class="block-grid__item">
        <div class="bg-color-black-7 padding-1">
            <p>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem animi id quasi doloribus, itaque amet fugit ullam sint laboriosam consequuntur culpa autem in quae numquam facilis dolore sunt facere placeat.</p>
        </div>
    </div>
    <div class="block-grid__item">
        <div class="bg-color-black-7 padding-1">
            <p>5. Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, placeat pariatur, quisquam nostrum minus in sapiente quod numquam voluptas itaque ipsa, facilis exercitationem odio magnam veritatis. A provident quod cum!</p>
        </div>
    </div>
    <div class="block-grid__item">
        <div class="bg-color-black-7 padding-1">
            <p>6. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur quibusdam impedit sequi voluptates corporis totam ab laudantium, expedita in, at repellendus ducimus! Provident vitae officia vero, iste non voluptatum dolores.</p>
        </div>
    </div>
    <div class="block-grid__item">
        <div class="bg-color-black-7 padding-1">
            <p>7. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident optio consectetur aperiam tempore recusandae nam consequatur quo numquam dolore. Repellat, asperiores exercitationem.</p>
        </div>
    </div>
    <div class="block-grid__item">
        <div class="bg-color-black-7 padding-1">
            <p>8. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam rem laudantium, cum unde doloremque id et eveniet, odio qui aliquid quisquam ad itaque necessitatibus inventore atque, nemo libero ut distinctio?</p>
        </div>
    </div>
</div>

Dos and don’ts

  • Do not use it for content of greatly varying length. If necessary, control the amount of text by truncating the content.