360Giving Design System - Components

Grid: Default 

<section class="grid grid--two-columns">
    <div class="grid__1">
        <button class="button button--small button--yellow">More Information</button>
    </div>
    <div class="grid__1">
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
    </div>
    <div class="grid__2">
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
    </div>

    <div class="grid__all">
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
    </div>
</section>
 
<section class="grid grid--two-columns">
    <div class="grid__1">
        <button class="button button--small button--yellow">More Information</button>    
    </div>
    <div class="grid__1">
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
    </div>
    <div class="grid__2">
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
    </div>

    <div class="grid__all">
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
    </div>
</section>
 
/* No context defined. */
  • Content: 
    .grid {
  @include wrapper;


  @include breakpoint($medium) {
    display: grid;
    grid-gap: 16px;
    grid-auto-rows: auto;
    grid-auto-flow: row;
    grid-gap: 32px;
  }

  &--two-columns {
    @include breakpoint($medium) { grid-template-columns: repeat(2, 1fr); }
  }
  &--three-columns {
    @include breakpoint($medium) { grid-template-columns: repeat(3, 1fr); }
  }
  &--four-columns {
    @include breakpoint($medium) { grid-template-columns: repeat(4, 1fr); }
  }
  &--five-columns {
    @include breakpoint($medium) { grid-template-columns: repeat(5, 1fr); }
  }
  &--six-columns {
    @include breakpoint($medium) { grid-template-columns: repeat(6, 1fr); }
  }
  &--seven-columns {
    @include breakpoint($medium) { grid-template-columns: repeat(7, 1fr); }
  }

  &__2 { grid-column: auto / span 2; }
  &__3 { grid-column: auto / span 3; }
  &__4 { grid-column: auto / span 4; }
  &__5 { grid-column: auto / span 5; }
  &__6 { grid-column: auto / span 6; }
  &__7 { grid-column: auto / span 7; }
  &__all { grid-column: 1 / -1; }

  &.max-width__100 {
    max-width: 100%;
  }
}
  • URL: /components/raw/grid/grid.scss
  • Filesystem Path: src/components/04-modules/grid/grid.scss
  • Size: 1.1 KB

This is the draft of an internal Grid system, to be nested in the main content area of the Layout Module.

It has two variants:

.grid.grid--two-columns This renders a two column layout in the section.

.grid.grid--three-columns This renders a three column layout in the section.

In both layout variants, we can use the following classes in the child elements to control column span

.grid__1
.grid__2   # Spans 2 columns
.grid__3   # Spans 3 columns
.grid__all # Spans all columns