Responsive Grid Layout

The new website templates will be ''responsive'' to display optimally on various devices (desktops, laptops, tablets and phones) to provide easy reading and navigation without resizing, panning, and scrolling. The templates will use media queries to resize the display of the content on website pages according to defined breakpoints. It is designed for a minimum width and a maximum width and then a fluid design between those two points. Fluid layouts are flexible and resize based on the size of the browser window by using relative units like percentages (vs. absolute units like pixels) for page element sizing.

The minimum and maximum widths for this design are:

  • Minimum (e.g. small phone): 375 pixels
  • Maximum (e.g. desktop): 1,920 pixels
12
6
6
4
4
4
3
3
3
3

HTML Source

Click the copy button to the right and paste (Ctrl + V) in to your WYSIWYG HTML source.


<div class="col12">
    <div class="col12">1</div>
</div>
<div class="col12">
    <div class="col6">6</div>
    <div class="col6">6</div>
</div>
<div class="col12">
    <div class="col4">4</div>
    <div class="col4">4</div>
    <div class="col4">4</div>
</div>
<div class="col12">
    <div class="col3">3</div>
    <div class="col3">3</div>
    <div class="col3">3</div>
    <div class="col3">3</div>
</div>