Layout Grid

Overview

The Layout Grid is taken from Bootstrap, upon which Pelican is built, allocates space to items and sizes them. We recommend familiarizing yourself with it.

Explanation

The Layout Grid needs to be understood from the point of view of screen or device widths, such as mobile devices.

The browser window has an explicit width whether it’s edge-to-edge of your monitor or resized to some fraction. The Bootstrap grid divides that width into 12 equally-sized columns with gaps. These 12 columns’ individual widths change as the browser window or device width changes. These browser windows or device widths are put into certain grid division ranges, or Breakpoints, as their widths fall within certain pixel width ranges.

1. Extra Small, -xs , the beginning, is 0 – 576px.
2. Small, -sm , is 577 – 767px.
3. Medium, -md , is 768 – 991px.
4. Large, -lg , is 992 – 1199px.
5. Extra Large, -xl , is 1200px or larger.

These breakpoints allow for items to be predictably sized. Resize this window and observe how the light blue boxes widths change in small increments before changing across larger increments.

<div class="container-fluid">
    <div class="row mb-4">
        <div class="bg-info-10 col-12">
            <div class="bg-info-30 p-6">
                <span>Always 12 Columns</span>
            </div>
        </div>
    </div>
    <div class="row mb-4">
        <div class="bg-info-10 col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="bg-info-30 p-6">
                <span class="d-block d-sm-none">XS 12</span>
                <span class="d-none d-sm-block d-md-none">SM 6</span>
                <span class="d-none d-md-block d-lg-none">MD 4</span>
                <span class="d-none d-lg-block d-xl-none">LG 3</span>
                <span class="d-none d-xl-block">XL 2</span>
            </div>
        </div>
        <div class="bg-info-10 col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="bg-info-30 p-6">
                <span class="d-block d-sm-none">XS 12</span>
                <span class="d-none d-sm-block d-md-none">SM 6</span>
                <span class="d-none d-md-block d-lg-none">MD 4</span>
                <span class="d-none d-lg-block d-xl-none">LG 3</span>
                <span class="d-none d-xl-block">XL 2</span>
            </div>
        </div>
        <div class="bg-info-10 col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="bg-info-30 p-6">
                <span class="d-block d-sm-none">XS 12</span>
                <span class="d-none d-sm-block d-md-none">SM 6</span>
                <span class="d-none d-md-block d-lg-none">MD 4</span>
                <span class="d-none d-lg-block d-xl-none">LG 3</span>
                <span class="d-none d-xl-block">XL 2</span>
            </div>
        </div>
        <div class="bg-info-10 col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="bg-info-30 p-6">
                <span class="d-block d-sm-none">XS 12</span>
                <span class="d-none d-sm-block d-md-none">SM 6</span>
                <span class="d-none d-md-block d-lg-none">MD 4</span>
                <span class="d-none d-lg-block d-xl-none">LG 3</span>
                <span class="d-none d-xl-block">XL 2</span>
            </div>
        </div>
        <div class="bg-info-10 col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="bg-info-30 p-6">
                <span class="d-block d-sm-none">XS 12</span>
                <span class="d-none d-sm-block d-md-none">SM 6</span>
                <span class="d-none d-md-block d-lg-none">MD 4</span>
                <span class="d-none d-lg-block d-xl-none">LG 3</span>
                <span class="d-none d-xl-block">XL 2</span>
            </div>
        </div>
        <div class="bg-info-10 col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <div class="bg-info-30 p-6">
                <span class="d-block d-sm-none">XS 12</span>
                <span class="d-none d-sm-block d-md-none">SM 6</span>
                <span class="d-none d-md-block d-lg-none">MD 4</span>
                <span class="d-none d-lg-block d-xl-none">LG 3</span>
                <span class="d-none d-xl-block">XL 2</span>
            </div>
        </div>
    </div>
</div>

Guidance

To get the predictable resizing, follow this markup guide.

1. Begin with a container-fluid
2. Insert a row
3. Add the column classed <div>s as necessary

<div class="container-fluid">
  <div class="row">
    <div class="col-12 ..."></div>
  </div>
</div>

This forms the basis of your layout.

Content which needs to resize would be placed directly in the <div> elements with the columns classes. Cards and Form Groups are easy examples.

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card">
                <div class="card-body">
                    Card
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card">
                <div class="card-body">
                    Card
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card">
                <div class="card-body">
                    Card
                </div>
            </div>
        </div>
    </div>
</div>

Special Note

Pelican uses container-fluid rather than container to better accomodate fluid sizing.

• .container-fluid sets width at 100% on all breakpoints, which allows it to use to maximum screen width available to its parent element
• .container sets a maximum width at preset breakpoints, which makes it less flexible as a child element

Resources

• Bootstrap Documentation - Grid System