Unit & grid system

Svenska Spel´s responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.

The grid system is a responsive, mobile first, fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It's based on Bootstrap v5.0.0 with some modifications. It's built with flexbox and is fully responsive

Examples

<div className="unit-and-grid_wrapper__WkIQj">
  <Grid>
    <GridRow className="unit-and-grid_row__1BGcf">
      <GridCol>
        <div className="unit-and-grid_col__vgG3x">
          col-12
        </div>
      </GridCol>
    </GridRow>
    <GridRow className="unit-and-grid_row__1BGcf">
      <GridCol>
        <div className="unit-and-grid_col__vgG3x">
          col-6
        </div>
      </GridCol>
      <GridCol>
        <div className="unit-and-grid_col__vgG3x">
          col-6
        </div>
      </GridCol>
    </GridRow>
    <GridRow className="unit-and-grid_row__1BGcf">
      <GridCol>
        <div className="unit-and-grid_col__vgG3x">
          col-4
        </div>
      </GridCol>
      <GridCol>
        <div className="unit-and-grid_col__vgG3x">
          col-4
        </div>
      </GridCol>
      <GridCol>
        <div className="unit-and-grid_col__vgG3x">
          col-4
        </div>
      </GridCol>
    </GridRow>
    <GridRow className="unit-and-grid_row__1BGcf">
      <GridCol>
        <div className="unit-and-grid_col__vgG3x">
          col-2
        </div>
      </GridCol>
      <GridCol>
        <div className="unit-and-grid_col__vgG3x">
          col-2
        </div>
      </GridCol>
      <GridCol>
        <div className="unit-and-grid_col__vgG3x">
          col-2
        </div>
      </GridCol>
      <GridCol>
        <div className="unit-and-grid_col__vgG3x">
          col-2
        </div>
      </GridCol>
      <GridCol>
        <div className="unit-and-grid_col__vgG3x">
          col-2
        </div>
      </GridCol>
      <GridCol>
        <div className="unit-and-grid_col__vgG3x">
          col-2
        </div>
      </GridCol>
    </GridRow>
  </Grid>
</div>

• Additional styles for demo purpose

  // className='unit-and-grid_wrapper*'
  .wrapper {
    width: 100%;
  }
  
  // className='unit-and-grid_col*'
  .col {
    padding: var(--margin-base);
    border: 1px dashed var(--navy);
  }
  
  // className='unit-and-grid_row*'
  .row {
    margin-bottom: 12px;
  }
  
  // className='unit-and-grid_wrapperOuterSpace*'
  .wrapperOuterSpace {
    width: 100%;
    background: var(--white);
    padding: 0 12px;
  }
  

The grid system

Breaking it down, here is how the grid system comes together:

• Our grid supports six responsive breakpoints. Breakpoints are based on min-width media queries, meaning they affect that breakpoint and all those above it (e.g., .col-sm-4 applies to sm, am, md, lg, and xl). This means you can control container and column sizing and behavior by each breakpoint.

• Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side.

• Columns are incredibly flexible. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., col-4 spans four). widths are set in percentages so you always have the same relative sizing.

• Gutters are also responsive and customizable. Gutter are available across all breakpoints, with all the same sizes as our margin and padding spacing.

Columns

• Columns build on the grid’s flexbox architecture. Flexbox means we have options for changing individual columns and modifying groups of columns at the row level. You choose how columns grow, shrink, or otherwise change.

• When building grid layouts, all content goes in columns. The hierarchy of Svenska Spel’s grid goes from container to row to column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences.

• Svenska Spel's grid is build with six breakpoints and a dozen columns at each grid tier.

Gutters

• Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.

• Gutters start at (margin-base) 12px wide. This allows us to match our grid to the padding and margin spacers scale.

• Gutters can be responsively adjusted. Use breakpoint-specific gutter classes to modify horizontal gutters, vertical gutters, and all gutters

Breakpoints

Prop tables

GridRow

GridCol