Layout (grid and flex)

Grid vs Flexbox

• CSS Grid Layout is a two-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a one-dimensional system (either in a column or a row).
• A core difference between CSS Grid and Flexbox is that — CSS Grid’s approach is layout-first while Flexbox’ approach is content-first. If you are well aware of you content before making layout, then blindly opt for Flexbox and if not, opt for CSS Grid.
• Flexbox layout is most appropriate to the components of an application (as most of them are fundamentally linear), and small-scale layouts, while the Grid layout is intended for larger scale layouts which aren’t linear in their design.
• If you only need to define a layout as a row or a column, then you probably need flexbox. If you want to define a grid and fit content into it in two dimensions — you need the grid.

Grid

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element's children (which become Grid Items). For more details, refer to CSS Grid

Currently, we have four predefined basic grid classes that are widely used in the new design. For details, refer to the mixins/grid.css file.

Classes use grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)) approach which means that the website displays the maximum number of columns that has some predefined width. That means that the number of columns is elastic and responsive.

• elastic-grid--horizontal-12: minimum wide of one item is 12rem (192px)
• elastic-grid--horizontal-15: minimum wide of one item is 15rem (240px)
• elastic-grid--horizontal-20: minimum wide of one item is 20rem (320px - this also our minimum width for the screen of mobiles).
• elastic-grid--horizontal-30: minimum wide of one item is 30rem (480px).
• elastic-grid--vertical

We also have two additional grid classes that determines the number of columns without definiting the minimum or maximum width.

• elastic-grid--horizontal-2col: two columns
• elastic-grid--horizontal-3col: three columns

Additionally, if you need to have smaller spacing between columns and rows you can use the elastic-grid--horizontal-condensed or elastic-grid--horizontal-gaps--small classes.

Code is similar in every case, the grid class should be placed directly in the container div that should contain elements (ideally div's) which form columns.

Grid examples

Elastic grid horizontal 12

<div class="elastic-grid--horizontal-12">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
  <div>Column 4</div>
  <div>Column 5</div>
</div>

Elastic grid horizontal 15

<div class="elastic-grid--horizontal-15">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
  <div>Column 4</div>
  <div>Column 5</div>
</div>

Elastic grid horizontal 20

<div class="elastic-grid--horizontal-20">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Elastic grid horizontal 30

<div class="elastic-grid--horizontal-30">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

Elastic grid vertical

<div class="elastic-grid--vertical">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

Flexbox

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow. For more details, refer to CSS Flexbox or Flexbox Properties Demonstration.

We have a lot of predefined classes for flexbox properties that can be used directly in the HTML code. To see the full list of classes, go to base/utilities.css.