Grid

The layout grid has three main parts: columns, gutters and margins.

Columns contain the content. They act as invisible guides while setting typography and aligning elements to establish a visual rhythm. Content can span into multiple columns.

Gutters are the spaces between columns. They provide breathing room around elements so your content can be easily consumed.

Margins are the spaces between the:

1. content area and
2. the left and right edges of the screen.

(We do not use top and bottom margins for our grids.) Margins define the content area from within the viewable area.

Best Practices

A grid is a guide that helps us set the base while designing. Here’s a list of a few things to keep in mind while designing with your grid.

• All your content should always wrap inside a container. These containers can be visible with clear borders (cards and modals) or be invisible for layouts with only text and icons.
• The containers should always span from the outer edges of the columns they sit on, and should not bleed into the gutter.
• The elements inside the containers don’t necessarily have to abide by the grid. These can be aligned as per the padding of their parent containers.
• Images, illustrations, and hero images can bleed out of the grid and scale regardless of whether the grid is fixed or fluid.

Breakpoints

A breakpoint is the screen size threshold determined by specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation.

UCLA provides responsive layouts based on 4-column, 8-column, and 12-column grids, available for use across different screens, devices, and orientations.

Each breakpoint range determines the number of columns, and recommended margins and gutters for each display size.

Desktop

• 12 columns
• 1224px viewport or larger
• 1176px content (max)
• 76px columns (max)
• 24px gutters (12px) each side
• 24px margins

Tablet

• 8 columns
• 768px - 1223px viewport
• 720px - 1175px content
• 69px - 126px columns
• 24px gutters (12px) each side
• 24px margins

Mobile

• 4 columns
• 320px - 767px viewport
• 272px - 719px content
• 50px - 162px columns
• 24px gutters (12px) each side
• 24px margins

Using the grid is simple.

1. Add a .ucla container
2. Add as many .col elements as needed. Each .col will have an equal width, no matter how many there are.

<div class="ucla">
    <div class="col">Auto</div>
    <div class="col">Auto</div>
    <div class="col">Auto</div>
    <div class="col">Auto</div>
    <div class="col">Auto</div>
</div>

Container

Using the .container class will give your content some padding on the edge of your viewport and a set max-width of 1176px. Simply wrap your .ucla grid with the .container.

<div class="container">
    <div class="ucla">
        <!-- ... -->
    </div>
</div>

Column Sizes

If you want to change the size of a single (or multiple) column(s), you can use the following classes:

• span_1_of_12
• span_2_of_12
• span_3_of_12
• span_4_of_12
• span_5_of_12
• span_6_of_12
• span_7_of_12
• span_8_of_12
• span_9_of_12
• span_10_of_12
• span_11_of_12
• span_12_of_12

Responsive Columns

You can define a column size for each viewport size using the -md and/or -lg suffix to the column size.

By default, auto columns stack on top of each other on mobile. A column must be specified if you want it to work on mobile

<div class="ucla">
    <div class="col span_6_of_12 span_12_of_12-md span_3_of_12-lg">
        6 of 12 Mobile
        12 of 12 Tablet
        3 of 12 Desktop
    </div>
    <div class="col">Auto</div>
</div>

Offset

You can offset columns to create horizontal space between or before a .col element. To offset columns, use the .offset_{num}_of_12 class in your .col element. You can also add the -md and/or -lg suffix if you need the offset to be responsive.

<div class="ucla">
  <div class="col span_1_of_12">1 of 12</div>
  <div class="col span_4_of_12 offset_2_of_12">
    4 of 12
    Offset 2 columns
  </div>
</div>
<div class="ucla">
  <div class="col span_4_of_12 offset_4_of_12">
    4 of 12
    Offset 4 columns
  </div>
</div>

Nesting

To nest your content, add a new .ucla and a set of .col columns inside of an existing .col element.

<div class="ucla example">
  <div class="col span_9_of_12-md" style="background-color:#8bb8e8; border-radius: 4px">
    <div class="ucla">
      <div class="col span_12_of_12-md">Body Content 12 of 12</div>
    </div>
    <div class="ucla">
      <div class="col span_6_of_12-md">Body Content 6 of 6</div>
      <div class="col span_6_of_12-md">Body Content 6 of 6</div>
    </div>
  </div>
  <div class="col span_3_of_12-md" style="background-color:#2774ae; border-radius: 4px">Menu content</div>
</div>

CSS Grid

While the default grid system is built around flexbox, we’ve added the another grid system utilizing CSS Grid.

• Change .ucla to .ucla-grid
• Add .col-{num} to the .ucla-grid to define how many columns in the grid.

Column Span

You can set a single column to take up a specified number of rows with the .ucla-grid_span-{num} class. This number must not exceed the .col-{num}.

Grid set to 3 Columns

Grid Set to 5 Columns

<p>Grid set to 3 Columns</p>
<div class="ucla-grid cols-3">
    <div>Auto<</div>
    <div class="ucla-grid_span-2">Span 2 Columns</div>
    <div>Auto</div>
    <div>Auto</div>
    <div>Auto</div>
    <div class="ucla-grid_span-3">Span 3 Columns</div>
    <div>Auto</div>
</div>
<p>Grid set to 5 Columns</p>
<div class="ucla-grid cols-5">
    <div>Auto</div>
    <div class="ucla-grid_span-2">Span 2 Columns</div>
    <div>Auto</div>
    <div>Auto</div>
    <div>Auto</div>
    <div class="ucla-grid_span-3">Span 3 Columns</div>
    <div>Auto</div>
</div>