EUAA Design System

Grid Setup

Use this flexbox grid system to build different layouts. This basic grid system uses the power of flexbox and is composed of 8 columns. It also addresses responsive setups.

The Basic Layout

Each cell inside the grid is assigned an equal share of the total width. Each cell is placed inside a container called fg-grid-container. The total width of fg-grid-container is 100%.

item 1

item 2

item 3

item 4

<div class="fg-grid-container">
    <div class="fg-grid-cell">item 1</div>
    <div class="fg-grid-cell">item 2</div>
    <div class="fg-grid-cell">item 3</div>
    <div class="fg-grid-cell">item 4</div>
</div>

Paddings and margins

To reduce the amount of padding between cells use the class fg-grid-container--small-pad and for no padding use the class fg-grid-container--no-pad

item 1

item 2

item 3

item 4

item 1

item 2

item 3

item 4

<div class="fg-grid-container fg-grid-container--small-pad">
    <div class="fg-grid-cell">item 1</div>
    <div class="fg-grid-cell">item 2</div>
    <div class="fg-grid-cell">item 3</div>
    <div class="fg-grid-cell">item 4</div>
</div>
<div class="fg-grid-container fg-grid-container--no-pad">
    <div class="fg-grid-cell">item 1</div>
    <div class="fg-grid-cell">item 2</div>
    <div class="fg-grid-cell">item 3</div>
    <div class="fg-grid-cell">item 4</div>
</div>

To remove the margin from the top and bottom of the fg-grid-container use the following class fg-grid-container--no-mar

item 1

item 2

item 1

item 2

<div class="fg-grid-container fg-grid-container--no-mar">
    <div class="fg-grid-cell">item 1</div>
    <div class="fg-grid-cell">item 2</div>
</div>
<div class="fg-grid-container fg-grid-container--no-mar">
    <div class="fg-grid-cell">item 1</div>
    <div class="fg-grid-cell">item 2</div>
</div>

Percentage based columns

These columns have different percentage sizes. The following are some examples that can be used.

fg-col-1/fg-col-7
fg-col-2/fg-col-6
fg-col-3/fg-col-5
fg-col-4/fg-col-4

fg-col-1

fg-col-7

fg-col-2

fg-col-6

fg-col-3

fg-col-5

fg-col-4

<div class="fg-grid-container">
    <div class="fg-grid-cell fg-col-1">fg-col-1</div>
    <div class="fg-grid-cell fg-col-7">fg-col-7</div>
</div>
<div class="fg-grid-container">
    <div class="fg-grid-cell fg-col-2">fg-col-2</div>
    <div class="fg-grid-cell fg-col-6">fg-col-6</div>
</div>
<div class="fg-grid-container">
    <div class="fg-grid-cell fg-col-3">fg-col-3</div>
    <div class="fg-grid-cell fg-col-5">fg-col-5</div>
</div>
<div class="fg-grid-container">
    <div class="fg-grid-cell fg-col-4">fg-col-4</div>
    <div class="fg-grid-cell fg-col-4">fg-col-4</div>
</div>

There can be more than a 2 cell setup with percentages like the following examples.

fg-col-3

fg-col-2

fg-col-4

fg-col-2

<div class="fg-grid-container">
    <div class="fg-grid-cell fg-col-3">fg-col-3</div>
    <div class="fg-grid-cell fg-col-3">fg-col-3</div>
    <div class="fg-grid-cell fg-col-3">fg-col-3</div>
</div>
<div class="fg-grid-container">
    <div class="fg-grid-cell fg-col-2">fg-col-2</div>
    <div class="fg-grid-cell fg-col-2">fg-col-2</div>
    <div class="fg-grid-cell fg-col-2">fg-col-2</div>
    <div class="fg-grid-cell fg-col-2">fg-col-2</div>
</div>
<div class="fg-grid-container">
    <div class="fg-grid-cell fg-col-4">fg-col-4</div>
    <div class="fg-grid-cell fg-col-2">fg-col-2</div>
    <div class="fg-grid-cell fg-col-2">fg-col-2</div>
</div>

Fixed width column

To set a column to fixed width, add the class fg-grid-cell--fixed and then add the specific width needed.

item 1

item 2

item 3

<div class="fg-grid-container">
    <div class="fg-grid-cell fg-grid-cell--fixed" style="width: 100px;">item 1</div>
    <div class="fg-grid-cell">item 2</div>
    <div class="fg-grid-cell">item 3</div>
</div>

Content alignment

Align the content vertically inside the column.

item 1

item 2

item 3

<div class="fg-grid-container" style="height: 100px;">
    <div class="fg-grid-cell fg-grid-cell--align-top">item 1</div>
    <div class="fg-grid-cell fg-grid-cell--align-center">item 2</div>
    <div class="fg-grid-cell fg-grid-cell--align-bottom">item 3</div>
</div>

Inner content alignment

Align the inner content inside the cells.

item 1

item 2

item 3

item 1

item 2

item 3

<div class="fg-grid-container">
    <div class="fg-grid-cell fg-grid-cell--top" style="height: 100px;">item 1</div>
    <div class="fg-grid-cell fg-grid-cell--center" style="height: 100px;">item 2</div>
    <div class="fg-grid-cell fg-grid-cell--bottom" style="height: 100px;">item 3</div>
</div>
<div class="fg-grid-container">
    <div class="fg-grid-cell fg-grid-cell--left" style="height: 100px;">item 1</div>
    <div class="fg-grid-cell fg-grid-cell--middle" style="height: 100px;">item 2</div>
    <div class="fg-grid-cell fg-grid-cell--right" style="height: 100px;">item 3</div>
</div>

Nested grids

The grid setup can be nested

item 1

nested item

<div class="fg-grid-container">
    <div class="fg-grid-cell fg-col-2 fg-grid-cell--align-top">item 1</div>
    <div class="fg-grid-cell fg-col-6">
        <div class="fg-grid-container">
            <div class="fg-grid-cell">nested item</div>
            <div class="fg-grid-cell">nested item</div>
        </div>
    </div>
</div>

Breakpoints

These classes will set the grid cell column to 100% at specific screen sizes

fg-col-sm changes to 100% at 480px;
fg-col-md changes to 100% at 620px;
fg-col-lg changes to 100% at 800px;

item 1

item 2

item 3

<div class="fg-grid-container">
    <div class="fg-grid-cell fg-col-sm">item 1</div>
    <div class="fg-grid-cell fg-col-md">item 2</div>
    <div class="fg-grid-cell fg-col-lg">item 3</div>
</div>